BIOSENSE App
The Biosense device is a medical grade, clinically validated, mobile-compatible breath ketone tracker that provides users with a full picture of how fat burn levels change throughout the day based on diet, activity, and fasting.
Duration
Aug 2021 - Aug 2024
Role
UI/UX Designer
Tools
Figma, Illustrator, Photoshop
Skills
Prototyping, Experience Design, Design Systems
Background
My role as the sole UI/UX designer was to modernize and redesign the app and website for Biosense, a medical-grade, clinically validated, mobile-compatible breath ketone tracker. The primary goal was to enhance the usability of the existing platform for the target audience, which consisted of middle-aged to elderly individuals, as well as stakeholders. I aimed to upgrade the current features of the app and website, with the potential to introduce new features that would educate users about their health. By improving the user experience and incorporating educational elements, the objective was to provide users with a comprehensive understanding of how fat burn levels change throughout the day based on factors such as diet, activity, and fasting. One feature I particularly want to share is the onboarding process which I believe was one of the most important parts of getting users familiar with the new app design.
Research
A combination of previous research and academic articles was utilized to gather insights. As the app was already in existence, the initial research involved reviewing existing studies and documentation related to mobile health technologies and their impact on user behavior. One notable academic article by Direito et al. (2017) highlighted the effectiveness of mobile health technologies, such as smartphone apps, in increasing physical activity levels and reducing sedentary behavior through behavior change techniques like goal setting, self-monitoring, and feedback.
"Mobile health technologies, such as smartphone apps, have been shown to significantly increase physical activity levels (SMD = 0.34, 95% CI: 0.20, 0.47) and reduce sedentary behavior (SMD = -0.29, 95% CI: -0.45, -0.13). The use of behavior change techniques, including goal setting, self-monitoring, and feedback, contributed to the effectiveness of these interventions." (Direito, A. et al. 2017)
By drawing upon previous research, I was able to gain valuable insights into the potential benefits and strategies for enhancing user engagement and behavior change within the Biosense app. This knowledge provided a foundation for further analysis and decision-making during the UI/UX design process.
Design Approach
While designing the Biosense app, the focus was on creating a seamless and intuitive onboarding experience. My approach prioritized a user-centric design, aiming to provide informative, engaging, and easy-to-navigate onboarding for new users. The design incorporated a visually appealing interface to establish trust, while clear instructions, icons, and concise messaging guided users through the process. Interactive elements and personalization options were utilized to enhance engagement and allow users to tailor their health goals. Throughout the process, user feedback and usability testing played a crucial role, leading to iterative design cycles and continuous improvements based on user insights and preferences.
Overall, the design process for the Biosense app's onboarding feature aimed to create a user-centric and intuitive experience. By emphasizing clarity, engagement, and personalization, the design sought to provide an enjoyable onboarding journey for users, while incorporating iterative design based on user feedback for continuous improvement.
Low-mid Fidelity Wireframes
To validate design choices for the Biosense app and website, user testing was conducted to assess the effectiveness and usability of the design. The testing process involved asking users a series of questions and noting down their feedback, both positive and negative. Through this iterative feedback loop, design refinements were made to address user concerns.
One common issue that emerged from the user testing was confusion with the simplified screens during the onboarding process. In response to this feedback, a higher fidelity prototype was created, incorporating actual screens users would encounter in the app. This helped to alleviate confusion and provided a clearer understanding of the onboarding process.
Our next user testing focused on other aspects of the onboarding experience, such as connecting the device to the application. By using icons and clear identifiers, users found the device connection process intuitive and straightforward. Additionally, users were required to answer a series of health-related questions as part of the onboarding process. Clear instructions were provided, and no issues were reported in completing this aspect of the onboarding.
Overall, user testing confirmed the streamlined nature of the onboarding process, with positive feedback received on various sections, including app familiarization, device connection, and the health survey. By incorporating user feedback and iteratively refining the design, the Biosense app and website were able to provide a user-friendly and intuitive onboarding experience.
Final Design
RESULTS & KEY TAKEAWAYS
The onboarding design for the Biosense app was positively received by users. They found the streamlined onboarding process to be intuitive, engaging, and easy to navigate.
As a result of the design changes, several measurable outcomes and metrics improved. User feedback and testing indicated an increase in user satisfaction, with users reporting higher levels of clarity and ease during the onboarding process. The refined design led to a reduction in user confusion and improved efficiency in connecting the Biosense device to the application. Additionally, the clear instructions provided during the health survey resulted in a smoother completion of the onboarding process.
Key Takeaways: The following key takeaways emerged from the app's design and implementation process:
The importance of incorporating user feedback and conducting iterative design cycles. User testing played a crucial role in identifying pain points and areas for improvement, leading to more effective design solutions.
The significance of personalized and intuitive experiences for different target audiences. In this case, we were focused on designing for middle-aged to elderly users. In future UI/UX projects, a more comprehensive research approach, including user interviews and surveys, could be considered to gain deeper insights into user preferences and needs.
The emphasis on collaboration and stakeholder involvement not only led to a successful outcome but also fostered a sense of ownership and investment in the project. Moving forward, it is essential to maintain open lines of communication with stakeholders, actively seek their input, and involve them in key design decisions to ensure that the UI/UX solutions align with their vision and objectives.
By leveraging the positive feedback, measurable improvements, and valuable lessons learned from this project, the UI/UX team can approach future projects with a stronger focus on user-centered design, iterative testing, and personalized experiences.
