Finding Fitness in DNA Results
Overview:
Organization: Athletigen
Product: Athletigen - iOS/Android App
Role: Senior Product Designer
Industry: B2C Health and Fitness
Toolstack: Sketch, Miro, GitHub
Introduction
I’ll walk you through the process I used to create a user-friendly interface for Athletigen, a sports genetics company. This platform helps users understand their DNA results and use that information to make informed fitness and health decisions, including personalized workout routines and programs.
I came into the company when Athletigen had just released its first alpha version. It was a critical time as major development architecture needed to be improved while also upholding strict health guidelines around privacy.
UNDERSTANDING OUR USERS
The first course of action was to get a better understanding of what problems were currently plaguing the app and conduct user interviews. We decided to prioritize user interviews in the beginning because they provide deep, qualitative insights into user’s personal experiences and emotional responses.
For a sensitive health topic like DNA analysis, understanding individual user's perspectives and how they relate to their health and fitness was crucial as there is nothing more personal than what you’re made of.
We conducted our user interviews alongside our marketing and customer service departments, where we started to discover two main groups of users emerging with very similar concerns, but all users displayed one singular overarching problem.
Overall Problem:
Low Discoverability of High-Value Offerings
User-specific Problems:
Limited Understanding of Scientific Validity
No Clear Link Between DNA Results and Workout Plans
All Users
When engaging with the application there was a lack of discoverability happening between the different types of DNA results. Interesting information that most users would find delight in knowing such as “Based on a gene trait discovered in your DNA you are more sensitive to the effects of caffeine” wasn’t being seen. This gave the illusion to our users that the value offering was much smaller.
General Users Looking for Health & Fitness Tips
The existing organization of scientific information was too complex to understand what level of confidence they should have in their results creating mistrust and a snake oil mentality.
Fitness Enthusiasts & Professional Athletes
These users felt like their personal needs weren’t being met when talking about the app as there was no direct collation between their results and workout plans. This made it hard for them to have consistent engagement and act on their DNA insights.
Ideation
Our product trio (product, design, and development) facilitated brainstorming sessions, focusing on assumption and outcome discovery around the three main problems identified during user interviews. From there, the design team explored ways to effectively present DNA data and help users understand the science behind DNA traits.
Initial Flow Diagram
To help the low discoverability that was occurring I created a summary screen that displayed what our users were considering high-value offers. I made sure to not overwhelm the user by restricting/reducing information to create easier bite-size pieces.
I also decided that, based on the struggle of general users, we needed a new simplified scoring system (1-3) for scientific confidence in trait results.
High-level user flow showing the screen breakdown, DNA types, and actions.
Low-Fi Wireframes
During my low-fi prototyping, one of the areas I looked at was the user actions when exploring DNA. We wanted an environment where information was given more gently but engaging. What we called “My DNA” was made to feel like you were looking at all these DNA cells that make up you as a person.
When “My DNA” was in the first rapid prototyping stage, I initiated a feasibility discovery with our development team. I wanted to confirm my assumption that we could create and execute the specific cell bubble effect. This ended up being feasible allowing the design to continue.
I also wanted to give users another list view to make sure we could accommodate many different accessibility needs. Descriptive plain text lists function better with accessibility tools such as screen readers.
Athletigen low-fidelity wireframes showing interactions for discovering results and filtering information down to the genetic level.
Building on the flow charts and low-fidelity wireframes, I designed the high-fidelity prototype using a colour palette that blended calming medical hues with vibrant tones to convey both a clinical feel and the energetic spirit of fitness. The font was chosen for its readability, accommodating the longer complex terminology commonly found in the health field. Additionally, icons were kept simple to avoid overwhelming users with visual clutter, given the already substantial amount of information presented.
Design
Athletigen high-fidelity wireframes showing interactions for discovering results and filtering information down to the genetic level.
usability testing
Comparative Testing
In one of our experiments we compared two mobile screens for our new scientific confidence system, we evaluated if users from our different groups could answer a question prompt about the results. The goal of the testing was to determine which was more beneficial an icon-based score system or a textual score system.
The results revealed that a higher percentage of users found the textual score system easier to understand as they were able to accurately respond to our question prompt. This underscored that functionality often outweighs aesthetic appeal when conveying critical information.
I decided to change to textual score before launch as it provided a clearer understanding which should significantly enhance user comprehension compared to more previous visually stylized icons.
Question Posed to Our Respondents:
What is the level of certainty the scientific community has regarding this gene?
Visual Score Responses
Textual Score Responses
Implementation
Development Handoff
I collaborated closely with developers to ensure that the design was implemented as intended by meticulously managing various aspects of the development process. This included providing precise hex codes to guarantee colour accuracy, overseeing the exportation of assets to ensure they were optimized for performance and clarity, and contributing to GitHub documentation to maintain clear and consistent communication.
Additionally, I created a comprehensive design library to ensure consistency within the team in sizing and spacing across various devices and screen resolutions, preserving the visual integrity of the design.
Example of assets for the Athletigen iOS app library.
Launch Metrics
When the project launched the initial feedback was positive, highlighting improved discovery of DNA traits and better connection to recommended improvements.
Launch metrics showed a 30% increase in the click-through rate for DNA traits after release, reflecting enhanced user engagement. Additionally, user feedback indicated higher satisfaction with the clarity of the scientific evidence presented, suggesting improved understanding and confidence.
Reflection
Problems & Solutions
Problem 1: The Discoverability of High-Value Offerings
Solution: Created a results summary and DNA trait exploration that made complex insights easily digestible and enhanced user understanding.Problem 2: Communicating the Confidence Level of Scientific Evidence.
Solution: Implemented a textual scale to represent confidence, improving user trust in the data.Problem 3: Making Complex DNA Data Actionable for Users
Solution: Designed personalized fitness and health recommendations based directly on DNA insights.
Lessons Learned
Providing clear simple textual indicators of scientific confidence is crucial in emerging fields like DNA analysis as technology is consistently changing. Users need to be kept informed about limitations, and ground-breaking discoveries.
Allowing users to choose, which of their traits affect their personalized recommendations significantly enhances long-term retention as the following quarters we reduced our churned rate percentage by 13%.
Future Improvements
After the project was launched we determined the following areas for improvement in the upcoming releases and roadmap:
Suggestion 1: Integrate more health and fitness tracking features within personalized programs to increase general user’s daily interactions. We recognized that there is only so much information about DNA results that can be explored so now that discoverability is improved we need to expand elsewhere to keep our more general users returning.
Suggestion 2: Develop a feature that allows our Fitness Enthusiasts & Professional Athletes to share their personalized programs with coaches and trainers to further integrate Athletigen into existing communities.
CONCLUSION
This case study showcases the Athletigen DNA Insights project, highlighting the design process and outcomes. Through research, iterative design, and testing, we successfully created a platform that helps users understand their DNA results and make informed health decisions.