biocoach
The world’s first gps for your health
biocoach
Application to support people with metabolic health, which has already caused or is now causing obesity, diabetes, prediabetes, and other chronic health problems.
Headquarters
Minnesota, US
Services I provided
- Art Direction
- Visual identity
- UX Research
- Product Design
- Design System
Company Size
11-50 employees
Timeline
2021 - Ongoing
Industry
Healthcare
The client
BioCoach aims to support the many people whose poor metabolic health has already caused or is now causing obesity, diabetes, prediabetes, and other chronic health concerns. To analyze one's health, take charge of it, and never look back, BioCoach offers practical solutions.
The challenge
In tackling BioCoach's assignment, our primary goal was to refine their digital presence comprehensively. This involved meticulous research, strategic planning, creative design, and iterative prototyping. We aimed to position BioCoach as a leader in metabolic health while ensuring accessibility for all users, including those with visual impairments. Through in-depth user research and persona development, we gained insights into the needs of individuals managing conditions like obesity and diabetes. Our user-centric design prioritized inclusivity, intuitive navigation, and accessibility features. By incorporating feedback from diverse user groups and conducting usability testing, we created a seamless and empowering experience for all BioCoach users.
The solution
Our solution for BioCoach centered on a mobile app to revolutionize metabolic health management, emphasizing simplicity, clarity, and innovation. Through iterative design, we prioritized functionality and usability, integrating gamification elements for enhanced engagement and motivation. Concurrently, we collaborated on brand identity to create a cohesive user experience, empowering BioCoach to transform lives and promote holistic well-being.
Highlights
Our collaboration with BioCoach led to the launch of a groundbreaking mobile app for metabolic health management featuring innovative gamification and personalized recommendations. With a focus on inclusivity, the app ensured accessibility for all users, including those with visual impairments. We also established a compelling brand identity, positioning BioCoach as a forward-thinking leader in metabolic health, setting the stage for future growth.
Research
During the research phase, we conducted market research and user interviews to understand metabolic health management, uncovering user preferences and pain points. This informed our feature development, leading to a mobile app addressing immediate concerns with innovative solutions. We also performed a competitive analysis to benchmark BioCoach against market solutions and created a customer journey map to streamline workflows and enhance usability, ensuring a seamless user experience from onboarding to ongoing engagement.
Business Problem
Challenges hindering the company's ability to achieve its goals or objectives.
Issues related to revenue generation, market competitiveness, or operational efficiency.
Obstacles impacting customer retention, brand reputation, or market expansion.
Problems requiring strategic solutions to drive business success and growth.
Design Problem
Specific challenges related to the design and user experience of a product or service.
Issues with usability, accessibility, aesthetics, functionality, or overall user satisfaction.
Problems requiring innovative design solutions to enhance the user experience.
Opportunities to improve the design and usability of the product or service to better align with user needs and business objectives.
Customer Journey
In our analysis of the customer journey, we meticulously mapped out the various touchpoints and interactions from initial awareness to engagement and retention. By immersing ourselves in the user experience, we identified key moments of truth and delight, allowing us to tailor the user experience to meet users' needs and expectations effectively.
Layout
In designing the layout, we prioritized simplicity, clarity, and accessibility by using a hierarchy to guide users through the app. We focused on essential information and actions, optimizing content presentation and minimizing visual clutter to create a visually appealing and intuitive interface that enhances user engagement and usability.
Information architecture
BioCoach's information architecture emphasized simplicity and intuitiveness, creating a logical hierarchy for easy navigation. Through thorough analysis, we ensured clear pathways to relevant information, focusing on streamlined labeling and scalability for future growth.
Wireframes
In the wireframing phase, we translated our research findings and information architecture into skeletal outlines of the app's key screens and functionalities. These wireframes served as blueprints for the app's layout and interactions, providing a visual representation of the user interface elements and content hierarchy. By focusing on functionality over aesthetics, we refined the user flow and interaction design, ensuring that each screen effectively fulfills its intended purpose in guiding users through their metabolic health management journey.
Visual Design
With Visual Design, we created an aesthetic aligned with BioCoach's brand, focusing on simplicity, clarity, and modernity. Using vibrant colors, intuitive icons, and spacious layouts, we enhanced usability while adhering to accessibility standards. Through iterative refinement and user feedback, we achieved a visually engaging and user-friendly mobile interface.
Octalysis framework
Incorporating the Octalysis framework enriched our understanding of human behavior and motivation by exploring eight core drives. By strategically implementing gamification elements like progress tracking and achievements, we tapped into users' desires for accomplishment and social interaction. Balancing challenge and reward, we created an engaging experience that motivated users to actively participate in their metabolic health journey.
Final Design
The BioCoach application's final design reflects thorough research and user-centric principles, boasting intuitive navigation and a calming color palette for accessibility. Gamification elements, including progress tracking and social sharing, enhance engagement, while a consistent design system ensures scalability and collaboration efficiency. With a responsive layout for seamless performance, BioCoach epitomizes our dedication to exceptional user experience, poised to positively impact users' health journey.
Apple Store Screenshots
For BioCoach's onboarding process, we developed a personalized journey that begins with a series of questions aimed at understanding the user's health goals, lifestyle, and preferences. Leveraging this data, our system dynamically places users into tailored programs designed to prevent type and how to deal with diabetes. This approach ensures that each user receives a customized experience aligned with their individual needs and maximizes the effectiveness of BioCoach's intervention programs.
For BioCoach's Home tab, we used gamification and the Octalysis framework to prompt users to complete daily milestones. The Coach feature provides personalized guidance, while the Shop directs users to BioCoach's webshop for health products. The Activity Log serves as a progress tracker, showing past activities and milestones.
In the Learn tab, users receive education and guidance on managing pre-diabetes and diabetes, adhering to CDC of United States government guidelines. Additionally, users can access the Bonus Collection feature to complete additional tasks and challenges. The design aligns with the CDC's recommendations, ensuring comprehensive support and adherence to established standards for diabetes management.
In the Track, users can monitor their health metrics, integrating with popular health services like Apple Health or Samsung Health for seamless data synchronization. Users can input various readings manually, including glucose levels, weight, mood, ketones, and A1C, and visualize their progress over customizable timelines. This data serves as valuable insights for the coaches, who utilize it to provide personalized recommendations and support. Additionally, users have access to a comprehensive view of their data to enhance their health journey effectively.
In the Food tab, users can customize their meal plans according to their dietary preferences, weight goals, and budget through a questionnaire. They receive personalized meal suggestions for at least a week, complete with recipes tailored to their needs. As a convenience, users can opt for instant delivery through Instacart, BioCoach's partner, ensuring groceries are delivered straight to their doorstep.
In the Community section of BioCoach, users can join groups based on their health interests to connect, discuss, and support each other. This section encourages participation in challenges, sharing progress, and celebrating milestones together. It's a welcoming space dedicated to fostering well-being and motivating users on their health journey.
The result
The BioCoach app's design played a key role in attracting users and securing a $12.5M CDC Cooperative Agreement. Our user-centric approach created an intuitive interface, enhancing user adoption and satisfaction, and positioning BioCoach as a leader in metabolic health. The app continuously evolves, integrating user feedback and advanced technologies to support diabetes prevention and management. Addressing the needs of over 34 million Americans with diabetes and 88 million with pre-diabetes, BioCoach offers a holistic solution focused on healthy habits and personalized feedback. Unlike pharmaceutical interventions, BioCoach emphasizes sustainable lifestyle changes and community support, helping millions lead healthier lives.
Web Guidelines
Color Exploration
Design System Guidelines
Visual Language + Art Direction
Human Experience Design
Product Design
Prototype
Components
Development
Developer Handoff
Developer QA
Prototype Evaluation
QA Testing
Deliverables
Information Architecture
Competitive Analysis
Wireframes
Design System and UI Kit