Product overhaul for a microbiome app: science stories, data visualizations and more.
SUMMARY
Explorer was a consumer-based microbiome sampling product and app. Each “story” in the app consisted of a scientific explanation, lab results, and a “Take Action” section.
GOAL
Redesign and optimize for mobile. Reorganize and add content (writing and data visualizations). Navigation updates, style overhaul. Prepare the platform for news/story cycles about the gut microbiome.
ROLE
Design Director
Lead Designer for a team of four; two writers, two product designers.
What we started with.
The original app had not been updated for over two years, and was non-functional on mobile. We made a few code updates to allow it to operate on mobile, and began sketching out new designs. On the left, you can see where we started; The original, desktop app was one, long scroll of about five stories. The mobile menu needed simplification (“Advanced Tools”, for example, actually showed you some results, and we thus decided it should be wrapped into “My Microbiome”).
The Data Science team and science writers were hard at work with a number of new stories, and we knew that the overall goal was to build a platform that could accept anywhere from one to three new stories a month, for the foreseeable future.
Another issue: One the user logged in, there was a landing page, but it did not appear in the menu and It was of no real use to the user - it basically operated as another menu to navigate through the site. We either needed to make the landing/welcome/home page more useful, or log the user straight into the microbiome stories.
Navigation.
Below, the progression of our navigation/menu brainstorms. On the far right is our MVP menu, the idea borrowed from Nike.com. A few of the decisions we made:
Folding “Advanced Tools” into “My Microbiome”
Changing the names of some menu items. For example, “My Samples” could be misinterpreted as a results section. We at first changed it to “My Sample History” and then settled upon “My Sample Status” as a place where users could check in on the status of their samples, in transit.
We removed the “Surveys” section, and instead added mini-surveys to each story.
We moved “Activate a Kit” up in line, as we knew from our data that customers were often forgetting to activate their kits before sending their samples back to us.
Finally, for the MVP, we decided against having a My Microbiome landing page. Because we had a limited number of stories, we created a two-layered navigation menu for mobile (below, far right).
Navigating through stories.
Post-MVP, we knew we’d be challenged with how to provide easy navigation through potentially dozens of microbiome stories. We sketched out some ideas for a My Microbiome landing page, based on research we did on fitness and news apps. The example on the far right is taken from Fitbit; the idea here was to land the user on their most recent sample date, allowing them to move forward and backward by date. Below the date, we grouped stories into various buckets; “Health and Wellness,” “Paleo Diet,” and so on.
The elements of a story.
Once we had developed a navigation system that supported multiple, stand-alone, stories, we began diving into the elements of the stories themselves. With new content at the ready from our science writers, we quickly discovered that each story was going to be much longer than the original story template.
We experimented with how to order the information in the story, to be of most use to the user. But with so much scrolling in mobile, we decided we needed to break each story into three, main sections - and to reflect these sections in the designs: “About,” “Results,” and “Take Action.”
Instead of including references at the bottom of each section, we created a modal for all references. When the user tapped on a reference while reading the “About” section, for example, the user would be taken to the references modal and that, specific, reference would be highlighted at the top of the modal.
Menu MVP.
We launched with a menu based off Nike.com.
Content writing and organization.
Nesting organized information was the way we dug ourselves out of the possibility of information overload with this product. Our writers were amazing - they dug deep into the science of each story and provided fun facts, clues to help you shop for microbiome-healthy foods at the grocery store, and new ways to understand the inner workings of your gut microbiome. But it did take us many weeks of brainstorming, white-boarding and wire-framing to produce a simple template that could accommodate even the busiest of stories.
Below, our “About” section. The Anti-Inflammatory story focused on three types of molecules. So within each section, we needed a subnav (vs. long scroll) for the user to discover information and actions related to each molecule.
Our main approach was to allow the user to dig as deep as they wanted, but to surface only so much information so as not to overwhelm the user who wanted to skim. Each section delivers top-line information for skimming, while also inviting the user to learn more.
Data visualizations.
Explaining microbiome results to the average consumer is no easy task. This was hands-down the trickiest part of the project. I spent hours with science writers and bioinformaticians, sketching ideas and forcing myself to ask the simplest of questions. I found that my own lack of understanding served me exceedingly well in designing data visualizations for our customers. Below, some initial sketches.
We wanted to not only show the user their own results, but compare them to the rest of our database (the largest microbiome database in the world). Not only is the microbiome constantly shifting, but it’s not uncommon for a user to have a certain amount of bacteria that most users do not, and vice-versa.
The upshot: Not only did we need to show the user what microbes they did and did not have present in their gut sample, but we needed to explain how common or uncommon the bacteria was in our database, and the abundance of that bacteria in their gut sample.
The elements of a lab result.
While sketching ideas, we simultaneously focused on the elements needed for each microbe result. We continued our “dig deeper, but only if you want” theme by allowing the user to see a simple result at top level: Name of microbe, whether or not you have it, and how many others in our database have this same microbe.
If the user opts to open up the details for this result, they will find a deeper explanation, or “Breakdown” of the information, along with a link to take action, and tags to other stories that contain this microbe.
Breaking down the results.
I began working on a step-by-step reveal to users of how to view their results in the context of their microbiome, and our database.
The animation and click-through did not make it into the MVP, but I was determined to return to this concept post-MVP, and test it with our users.
My main goal with data visualization was to allow the user to grasp each step of the concept without having to think too hard. The abundance graphs here did not, in my opinion, accomplish this goal.
MVP release: removing the “pretty.”
We shipped with a stripped-down version - text only - of results. While slightly disappointing from a visual standpoint, we knew this was a solid ground to begin building strong visualizations for our users. This was a very educational step for me, as a number of employees responded negatively to the lack of visuals. When I sat down with them, and asked them to explain the data visuals that existed within the previous design, they discovered how confusing those prior visuals had been. In essence, we removed the pretty to make it easier for the user to understand. I had every intention of bringing the “pretty” back - but not until we could design and develop data visuals that made sense to the user and accurately reflected our science.