BIOTUNE APP
February 8-17, 2024
Biotune App is DNA-Based Health & Traits Report Application who designed to provide users with personalized insights into their genetic health risks and unique traits based on DNA analysis.
👩💻 Stakeholders
This project involved close collaboration with various stakeholders. Input from medical geneticists and health experts ensured the scientific accuracy of the information presented. Clients provided insights into user needs and expectations. Feedback from internal teams helped define technical feasibility and implementation.
*During my time at OWW Studio, I worked on projects that I cannot disclose due to NDA restrictions.
Problem
People are increasingly curious about their genetic makeup and how it influences their health, wellness, and personal traits. However, interpreting raw DNA data is complex and often inaccessible to the average person. There's a need for a user-friendly application that translates DNA information into actionable insights, helping users understand their genetic predispositions and make informed lifestyle choices.
⚡️ The Challenge
How can we present complex DNA data in a clear and understandable way, empowering users to take charge of their health?
3 main screens of Biotune app each version
Design Process
📚 Research
Findings
Complexity of Information
Users find the genetic health risk and trait analysis reports overwhelming and difficult to interpret, hindering their ability to make informed decisions.
DESIGN
Homescreen
Early Low-fidelity experimented with modern-style layouts and visual-oriented designs. This phase focused on finding the right balance between visual appeal and intuitive organization of genetic insights. Low-fidelity prototypes were used for early usability testing. Feedback highlighted areas of potential confusion in data categorization or interpretation of health risk visualizations.
Based on feedback, the home screen design was iterated to include prioritized most actionable health insights while allowing easy navigation to deeper health and trait reports. Personalized Elements introduced spaces for user-tailored recommendations (cardiovascular, carrier status, etc.) based on their unique genetic profile.
DESIGN
Navigation
Navigation aimed for simplicity, predictability, and consistency across the app. Design prioritized clear labeling and a minimal number of top-level categories. Wireframe tested a combination of approaches. Top Tab Bar to house the most frequently used items and superior features. Bottom Tab Bar for persistent access to major sections (Home, Search, Health, Traits, and Account). Usability testing helped to refine the placement and visibility of key navigational elements. Observations pointed to potential confusion on specific icons or pathways.
DESIGN
Main Card
The main banner was designed as the focal point of the homescreen, showcasing the most important or timely health insight derived from the user's DNA. The primary function of the banner card is to adapt dynamically based on the user's current state and status within the app. This provides a tailored and immediately relevant experience.
Key States & Statuses:
Not Signed In: The banner prominently displays sign-in prompts, potentially highlighting the benefits of unlocking their genetic insights.
Signed In (No DNA Kit): Focus shifts to promoting the process of ordering a DNA kit. Contain educational tidbits about what Biotune analyzes.
Results Available: Features a key actionable health insight and a clear CTA to view reports.
Transitions & Interactions:
Default, Click, Press: Visual feedback with subtle animations reinforces when the banner can be interacted with for more information or to advance to the next state.
Balancing States: User testing is crucial to determine the right frequency and persistence of the banner for each state to avoid annoyance but ensure crucial information isn't overlooked.
Testing helped assess banner visibility and its effectiveness in guiding user focus. Some users found the rotating format distracting, while others appreciated the variety of information.
💎 Design Library System Component
Built components for the Biotune app by carefully composing atoms (basic UI elements like buttons, labels, icons) into molecules (functional units like search bars or form inputs). This aligns with atomic design principles and promotes consistency. Designed complex structures by assembling multiple molecules. This modular approach supports scalability and easy customization for future feature development. Detailed component documentation within the atomic design system. Provides clear specifications on atoms, molecules, and organisms – their usage, states, and potential variations. This reduces friction during development and minimizes design-related questions.
Outcome
🤝 Trust Tools
I collaborated with Biotune stakeholders to ensure design alignment with their vision, gathering feedback on critical user flows like onboarding and the home screen. Throughout the process, worked alongside developers to guarantee accurate implementation and to streamline the design-to-code translation. To maintain project momentum, I synchronized deliverables with overall timelines via communication with the project manager. Additionally, partnered with illustrators to create engaging and informative data visualizations, enhancing the clarity and impact of the health reports.
Takeaways
✨ Develop Design Craft
The Biotune project strengthened my human-centered design thinking. User feedback continuously challenged me to improve the clarity and helpfulness of presented information, from initial onboarding through exploring complex DNA reports.
Balancing Simplicity with Nuance: Designing an intuitive experience for a wide range of users demanded both attention to detail and a broad perspective. Crafting simple interfaces often came down to exploring nuanced variations in layout, wording, and interactions.
Pushing the Boundaries: While guided by research and best practices, I looked for opportunities to introduce subtle delight and innovation. This could be experimenting with ways to enhance data visualizations or gamification elements to increase engagement.
The Impact: Knowing that the Biotune app has the potential to empower individuals to understand their own bodies and make informed health choices is the most rewarding outcome of this project.
💛 Embrace the Adventure
The Biotune UX case study journey has been incredibly enriching. Through it, I connected with talented medical geneticists, passionate healthcare professionals, and dedicated developers. These interactions pushed me to expand my perspective to bridge different areas of expertise.
Taking Initiative, the project encouraged me to be proactive in seeking feedback, clarifying requirements, and proactively solving design challenges. This boosted my confidence and helped me understand the importance of being a self-driven contributor. I'm especially grateful for all the stakeholders who generously shared insights, challenged my thinking, and supported my growth as a UX designer. This project has been invaluable!