At first, we didn’t really know what we would say on the Disease Report. This whiteboard sketch was all we knew at first: include a description of the disease, a list of the gene variants the user had that contribute to the disease, and maybe a histogram explaining how the user’s variants compared to other disease sufferers.
Needing to add interest and content to the screen, we thought we’d include a description of what each gene was responsible for, and whether the impact of that gene mutation was “high” or “low”. But it’s still too text heavy and boring, and designating a genetic mutation as having high or low impact is too reductive—it’s really the combination of genes that cause disease.
The founders wanted to see an at-a-glance description of the disease, so I added a right-hand sidebar in a question-and-answer format. But the design is still too text heavy and dull.
Looking for ways to reply on iconography instead of text, I thought of creating a mini helix icon to represent each gene that contributed to the disease we’re focusing on. There’s not really a need to explain what the gene does on this screen, so we removed that. it’s also too reductive—we can rarely explain what a gene does in a single sentence.
By organizing the bright blue symptom and organ icons into neat rows just below the orange and green gene icons, I had finally created enough visual interest—functional visual interest—to liven up the screen. I also got rid of any vertical sidebars in the web app and went to an entirely horizontal layout style, which is much cleaner.