Stealth Genetics Startup
Stealth Genetics Startup
Web App, 2018
For this new genetics service, I chose to use different faces in different tints to represent the phenotypic variety our genes are responsible for. The image also communicates that chronic disease can affect us all, regardless of age, race, or gender.
At first, I just wanted to see how it would look to slightly overlap a series of different faces in the colors of our new palette. I found the faces on Google Image search, so they have different lighting and angles.
The design starts to look interesting once I made the overlapping much more pronounced—where about half the face is overlapped with another face.
After some considerable hunting, I found a collection of photos on iStockPhotos of very different people—all ages, genders, and ethnicities—in the same lighting and poses.
After a lot of playing around, I settled on an order. Strangely, each photo had different cropping, so next I had to fix that.
After cropping the photos and colorizing them in Photoshop, the effect is complete.
All Health Reports screen
This new service focuses on gene variants linked to specific diseases, organs, and symptoms. Adding icons and color livened up what could have been an especially dull list.
It was just a quick and dirty sketch, but I realized that if I used our limited color palette to give the report tiles a bit of visual interest, we wouldn't be able to use those colors as visual cues elsewhere. Green later stood for “no variants”, a darker version of the orange indicated a variant, and blue was used for hyperlinks.
Giving the tiles a charcoal background was better, but still too dreary. And the padding was too great between the tiles.
Changing from a background color to a colored outline made the layout so much lighter. The visual language is being established here—the blue is used to indicate hypertext, and the magenta is used for titles. Further refinement includes the slight pinstriping to give the page organization, the addition of small icons to give the page added visual interest, and tightening up the padding.
The final touches that make the screen complete were making the tiles square for a cleaner look, adding a corner fold to indicate that the tiles represent documents and thus reports, and including the total gene count at the bottom of each tile to manage user expectations.
Disease Report Screen
The challenge here was how to make what could have been an all-text screen more visually interesting. Each gene in the report is represented with a strand of DNA and color coded to indicate whether the user has a mutation or not. The user instantly knows their test results, and can explore how their gene mutations may be affecting their health.
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.
Gene Report Screen
For each disease report, we focus on a series of genetic mutations that appear to contribute to that disease. For example: if there are 10 genes common to Chron’s disease, the Chron’s disease report will have 10 gene reports. After we analyze your DNA, you can see which variants, if any, you have for a specific gene, what the effects may be, and what that means for your treatment.
In this early sketch, the report is divided into two columns: the left column states general information about the gene, while the right column shows the user what variants, if any, the user has, and what it means.
The persona for our typical user was someone worn down by their condition, frustrated with the medical establishment, and seeking answers. This design bombarded the user with data that wasn’t pertinent to them, and the text-heavy layout and restrained use of color was visually dull.
Going from one extreme to another, this next version was cleaner but colorful to the point of distraction. Clearly the overlapping area graph background wasn’t going to work, but the yellow callout box successfully got the user’s attention and game them the answer they were seeking: what are my results?
At this point I had established the new color palette and was using our orange and green colors as an outline to draw attention to the callout rather than the yellow background of before. I also adopted a gray background to make the white of the report “page” stand out. I tried to add as much iconography as possible to add visual interest: body parts, genes, nucleotides, meters, and pie charts.
I dropped the two column approach and used a horizontal stacking layout, which is much cleaner and less chaotic for the user to read.
The finishing touches were using colorful graphics to explain all the possible variants a user might have, and whether they have it or not.
The name and logo were already established when I was hired, but I felt it needed some tweaking to look more distinctive and to better communicate the brand.
The original palette was limited to shades of orange and magenta. The lack of contrast meant that the logo appeared muddled at smaller resolutions. But more importantly, this limited palette didn’t give us a lot of choices when it came to representing data with color. And using color to communicate information was essential to make such a data-heavy service look visually appealing and maintain user interest.
One of my first assignments was to create business cards. I didn’t just want to drop the logo onto a white background, add the contact info, and call it a day.
The original logo was a circle that masked a collection of overlapping area charts. The idea was: if we get a large group of people with a specific genetic illness to track their symptoms, we can observe correlations in the data that can point to novel treatments. This logo represented such a correlation. I ran with this idea and wanted to see what this group of overlapping graphs might look like if we zoomed out to see the whole screen. The result was beautiful and dynamic, so I played around with saturation and outlines until I found a graphic we could use on the business cards.
This is what I settled on for the early business cards—The overlapping graphs are present but with diminished opacity in the background, and reveal what the circular logo actually represents.
When I happened upon the design for the Landing Page—that of the tinted faces overlapping (see above)—I chose those four tints to be our new color palette. The added cool tones of green and blue gave the palette much more flexibility for the app design tasks that would follow. Now I needed to re-do the logo, so I re-arranged the colors in the 24 arrangements possible with 4 colors so I could see which overlaps would come closest to an attractive arrangement for the logo.
Once I figured out an overlap order I liked, I took that one and swapped out all the color positions to find the best ones. I’m nothing if not thorough!
Key to the color order was the what the resulting circular logo would look like. Here’s the same 24 background graphics with the circle masked in the center.
After a series of eliminations, I came to an arrangement that had potential. The tones were a little muddy, so I played with the shades, saturation, and brightness to liven it up. As a finishing touch, I added thin white outlines to make the vibrant colors pop even more.
The final result: a more dynamic logo with clearly articulated colors overlapping. The rainbow-like variety that resulted from these colors overlapping does a solid job of communicating the infinite variety of genetic combinations that this company seeks to make sense out of.
Note: This service is launching in 2019, but it is in stealth mode currently.