Client Brief

Koonkie Cloud Services designs algorithms, pipelines, and analytical platforms to help clients understand, get insights, and manage genomic data.

Rather than spending months compiling and analyzing data, Koonkie does it in hours, delivered with their Phandi platform, ready for publication or commercialization.

Opportunity

Koonkie wants to get the public interested in genomics, but information found online about this topic is too technical for casual users to understand. It is also not very visually appealing and interactive.

They want the app to educate and inspire high schoolers and professionals about genomics and bioinformatics by providing simplified views, relatable fun facts, and artistic visuals.

Team

This five-week project was done with team of two Product Designers, myself and Max, we together conducted user research, planning, paper prototyping, wireframing, UI and testing for this project. 

The team worked closely with co-founders of Koonkie Cloud Services. She gave important insights in the field of microbiology, came up with lots of great ideas through discussions.

Research

To better understand the look and feel our client wants for the app, we decided to do a quick gut test. A gut test consists of 10 or so images shown one at a time for 10 seconds each. Each image is rated on a scale from 1 to 5 and images with a high rating are revisited to see what elements the client liked.

Not only is this a great conversation starter, we also learned more about our client’s goals and priorities. Below are some of the terms used to describe the images they liked.


Virtual Terms

Virtual terms that our client used to describe the images they liked:


Design Inception

Design inception diagram with words describing how we want the app to look and feel:

We took the key terms that were noted in the meeting and expanded upon them to complete the design inception diagram. In particular, we wanted diagrams to be colourful, glowing, and fluid with round, overlapping shapes. This will create a lively and friendly feeling.

Motion will be really important for this app as, if used correctly, can create a sense of interest and can make things more interactive.

Art Direction

To expand upon the design inception sheet, we decided to create two separate style tiles to determine the art direction. A style tile is a quick way to show how the app would look by including the colour scheme, basic UI elements, illustrations, and fonts.


Max did the one on the left and I did the one on the right. I chose bright colours for the diagrams so they pop out more and dark purple as the main colour so it does not steal the focus of the main content. I also added some subtle gradients for visual interest.

Afterwards, we showed our client, the two styles to get approval on the art direction. They liked the dark green theme with the circular ring pattern and also the less vivid colour palette. We then combined what they liked into one style tile.

Wireframes

We designed wireframes and then started to apply the styling. To give a sense of progress, here is what we came out:

Colour & Shapes

The app’s colour palette is inspired by the colours of bioluminescent deep sea creatures.The background is inspired by jellyfish swarms with rounded, overlapping, and semi-transparent shapes.

Typography

We decided to use Proxima Nova as it is a simple, modern, and geometric font that works well in all sizes. The versatility is especially important in diagrams where labels may be small. Best of all, the client already uses this font on their website so it is consistent with their branding.

Illustrations

Using familiar terminology and simplifying diagrams to ease beginners to the world of microbiology and genetics is one of the big challenges of this project. There needs to be just enough detail for people to get the gist of things without overwhelming them. Then we can slowly ease them in by introducing more things in more detail.

The size of the circles are based on the number of known species in each category. This method of arrangement looks informative and artistic.

We also simplified the LUCA view by grouping similar species together rather than using the traditional view of arranging species like the branches of a tree. Since this method excludes a lot of detail, we also included a list view where users can group species by different taxonomic ranks.

As for the Circos views, we included hints where different parts of the diagram flash. Users can tap on these parts to learn what each part of the diagram represents. Not only do they learn some fun facts, they will also understand that diagrams are interactive.

At higher levels of detail, users can tap on certain elements to have others fade out. This maintains a balance between detail and complexity.

Reflections

At the start of this project, I was overwhelmed with the terms and visuals used in microbiology, genomics, and bioinformatics. However, this ended up being helpful as we are designing a user interface for non-experts. Since nobody in our team specialized in biology, if we do not understand it, it is not simple enough yet.

I would not have envisioned an app interface that is this simple. When I was searched online for genomics data visualization, they looked very busy and complex so I was thinking this app will not be suitable for a phone screen. However, as we iterated on the design, we found that lots of detail can be hidden away under multiple detail levels. This will allow more space for tappable elements.

All in all, from doing this project, we got to understand what our client meant by art in science. The shapes and patterns created from the Circos, chromosome, and gene sequence can look artistic when stylized. We also got to explore the different methods of data visualization such as with the Circos chord diagram, gene count radial bar chart and the six kingdoms bubble map.