Genos is a personal genomic sequencing service allowing users to explore their own DNA and participate in genomic research.
14 Months (ongoing when I joined)
User Flows, UI Design, Prototyping, Style Guide
Andrew Fullerton/John McRee/Tyler Merry/Sam Xia
As a UX designer on the project, my first task was to improve the information hierarchy of the Genome Map. Genome Map is a tool for the users to explore their genomic data on various zoom levels: genome, chromosome, region, gene, and variant.
The redesign fixed the inconsistent naming of the zoom levels, as well as highlighting the detailed information of the current level.
The “Sneak Peek”
Because there’s a time gap between when the users submit their sample for sequencing and when they can see the data on Genos, we want to give them a “sneak peek” of what will be available to them while they’re waiting. I created this quick prototype in Keynote, then ported it to HTML/CSS with some help from a developer. Click to play the video.
As I became more familiar with the system and the subject matter, I was tasked to design the Health Reports: Conditions, Drug Responses, and Traits. These reports are generated from the user’s genomic data, presenting potential health risks and genetic traits.
Shown here are the header designs for each report. These widgets are interactive so the users can either get a summary of their genetic health, or dive into the details if they’re inclined to learn more.
As a UX/UI design hybrid, I offered to maintain and update the style guide. The style guide proved to be invaluable during the transition of work from Frog, who designed the initial visual language for Genos.
After the transition the style guide was expanded to include more UI elements and patterns. This became a library of reusable building blocks for the entire team.
New Public Website
One last thing I did for the project was reimagining the public-facing website. In the new design, I used full-screen sections and animations to tell a story of who Genos is and how it works to potential customers. To demonstrate the design to the product owner as well as the rest of the team, I created this prototype in Keynote. Click to play the video.
After the project ended with Complete Genomics, Genos went on to become a standalone company and started testing in Beta. It recently completed testing and opened to the public. Visit Genos at genos.co.