INDUSTRY: FITNESS TECHNOLOGY
| TIMELINE: DEC 2023 -MAR 2024
Designing integrated wellness solution for Hubo One
Enabling more meaningful user flows for a holistic health management application, improved workflow by 67% by implementing and integrating design systems
Role:
User Research, Business Analysis, User Interface Design, User Experience Design, Visual Design, Information Architecture, Usability Testing, Wire-framing, UX Writing, Accessibility, Prototyping, Design Systems
Team:
1 Designer (Me)
1 Product Manager
1 Lead Developer
2 Developers
Skills:
Client: Hubo Fit
Context:
Hubo fit is expanding their application by introducing a new product called Hubo One, aiming to grow their commitment to health and fitness by providing a comprehensive solution for all wellness needs. From tracking and managing fitness goals to optimising health and nutrition, Hubo One offers seamless support from industry experts, empowering users to achieve their wellness aspirations.
Note: Hubo One is currently under development and beta testing, scheduled to launch early 2025
Problem Breakdown
Understanding the current landscape
We conducted user research, through a survey and two semi-structured interviews, with members of four highly-rated local gyms and current Hubo Fit users. The interviews were semi-structured to allow for open-ended discussions and to explore the participants' experiences with health management apps in depth. Based on the data we identified the following areas of improvement.
34%
Lack of Personalisation
users reported feeling limited by the lack of personalised workout routines & diet
48%
Limited availability of equipments
users found it difficult to rent workout equipment due to limited availability and options.
22%
Information Overload
users found it overwhelming to track and manage multiple metrics related to fitness and health.
43%
Integration Challenges
users experienced integration issues with other wearable devices.
COMpetitor analysis
How does health management differentiate?
I conducted observational research to better understand the mechanics health management on 5 popular fitness technology applications.
INformation architecture
Improving Discovery and Information Overload
Using the insights from the research, we identified key areas for enhancement: discovery, fitness metric tracking & management, personalised experiences, and wearable integration.
Next step was to explore ways to simplify user flow, enabling seamless navigation within the app. To streamline the user experience and avoid feature overload, we categorised 15 new features into four primary areas and metrics that can be integrated with wearables. We redesigned the information architecture to introduce these features gradually, providing multiple access points for core functionalities.
VISUAL DESIGN
Evolving visual language of Hubo One
Tracking and managing biometric and physiological metrics are crucial for understanding and improving your overall health. To simplify complex health data and enhance user comprehension, I refined the colour palette. Inspired by Hubo's original tone, I selected a range of distinct colours to visually represent quantitative, sequential, and categorical data. Also ensuring to avoid visual overload. I explored ways to minimise visual clutter and maximise readability, while also ensuring high contrast ratios for accessibility.
Information DESIGN
Simplifying representation of complex metrics
I explored ways to apply the above visual language to represent data in a simplified and easy to consume manner. The goal was to help users easily digest the wide variety of health metrics and not get overloaded by the information. By strategically using colour, I aimed to reduce cognitive load and improve user understanding. Different colours were assigned to distinct categories, and applied gradients/ saturation to represent intensity levels.
IMProving uX writing
Building a More Empathetic Digital Experience
I collaborated with the product manager and lead developer to enhance the app's language and tone, aiming to create a more humanized and encouraging experience that would motivate users to adopt healthier habits. We began by breaking down each function and identifying key tone-of-voice keywords. We then crafted the copy to be clear, simple, and approachable, avoiding industry jargon and technical terms to ensure accessibility for users of all literacy levels.
Design Systems
A System of Design: Building a Scalable Framework
"We are not designing pages, we are designing system of components" - Stephen Hay
To enhance collaboration with developers and build a unified design language, I implemented an atomic design methodology to create a flexible and scalable design system. By breaking down components into their atomic parts, I constructed molecules and organisms, and identified reusable templates. Applying systematic approach enables the design system to evolve as a living ecosystem. Recognising the absence of an existing design system, I presented a compelling case for its development, highlighting the potential benefits and challenges. With a clean slate, we were able to fully embrace the design system's principles that can support both products.
WIREFRAMING & PROTOTYPE
Usability testing and analysis
I created wireframes, low-fidelity, and high-fidelity prototypes. We conducted three unmoderated usability tests with two focus groups: one with internal developers and testers, and another with gym members and Hubo Fit users. Usability testing was designed to access aspects like: overall usability, content, accessibility, and data analysis. I analysed and incorporated the feedback into the design.
ONBOARDING SCREENS
Improving discovery and reducing feature overload
User research revealed that users often felt overwhelmed by the number of features available in health management apps, many users were unaware of certain features. To address this, We introduced 15 features in a streamlined onboarding process. I divided these features into 8 screens, making it easier for users to digest the information.
To further enhance user engagement and expand Hubo Fit's reach, we've integrated a feature request option into the onboarding process. This allows users to express their interest in Hubo Fit services in regions where we are not currently available. To improve comprehension and create a visually appealing experience, we've incorporated simple illustrations, subtle gradients, and Lottie animations into the onboarding screens.
Dashboard & HEALTH METRICS
Building a seamless tracking and management system
Hubo Fit aims to be a one-stop health & wellbeing management application. Users can track and manage multiple health metrics, set personalised goals, connect with medical professionals, and easily schedule appointments. Integrated with simplified analytics and humanised content to improve comprehension. Introduced multiple entry points to important features to improve discovery.
IMproving personalisation
Simplifying diet & nutrition management journey
User research revealed that many users were overwhelmed by the frequent manual entry of meals. To address this, I collaborated with our lead developer and product manager to create a streamlined nutrition management system. Hubo one allows users to consult with expert dieticians to develop personalised diet plans. These plans, complete with detailed recipes and calorie breakdowns, are then pre-loaded into the app, significantly reducing manual input.
Integration with wearable
Enhancing Integration with other wearables
User research and usability studies revealed concerns about the reliability of data sync with external wearable devices. Users were eager to reduce manual data entry and sought accurate integration of data. We started by listing features that can be integrated with devices like steps, sleep, heart rate. I explored ways to improve integration with external wearable devices, I provided quick access points to connect devices and clear CTAs. I integrated real-time device connection status information to keep users informed and optimise the sync process for accurate and reliable data transfer.
Tracking & Managing Mental Health
Improving mental health management system
To streamline mental health management, we simplified data logging and explored the use of colour psychology to represent emotional states visually.
By partnering with certified therapists, Hubo one offers comprehensive mental health support. Extended the palette to incorporate a range of shades for each emotion. Integrated with subtle animations to represent feelings and emotions. To gain deeper insights, we condensed the mood options to five and included detailed description fields
Accessibility & Inclusivity
Accessibility enhancements and considerations
I focused on ensuring that the UI components are meeting the colour contrast ratio and touched target sizes of interactive components are larger than 24x24. I also integrated illustrations, Lottie animations and relevant photography to provide visual cues that complement text, making content more understandable and engaging.
REFLECTION
My Learnings & Key Takeaways
Learning and Implementing Design Systems for Improved Workflow
Developing a fresh visual and digital language for Hubo One provided the opportunity to implement a systematic design process and create a reusable design system of components that now supports two Hubo products. I started deep diving into understanding design systems, researching and learning from existing design systems brands like Airbnb, Material Design, and Atlassian. Collaborating closely with developers and engineers through continuous feedback and review loops also enabled me to effectively integrate the design system into the development workflow and improve handovers.
Leading and managing as a solo-freelance design lead:
As a solo freelance design lead, I was grateful for the team's trust in a newcomer. This experience presented a valuable opportunity to hone my project management skills, including tracking, managing stakeholder requirements, and refining user flows and journeys. Drawing on my expertise in brand and information design, I enhanced the app's visual language and effectively resolved design-related conflicts.
Challenges of Small-businesses:
I had the opportunity to collaborate with the team to gain insights into the unique constraints and challenges faced by small businesses, including limited resources, time, and manpower. To optimise the design and development process, we implemented extended feedback and review sessions to enhance both product quality and collaboration. We leveraged external tools like ClickUp for efficient product management and AI plugins to streamline content creation. Additionally, we built design systems to facilitate consistency, scalability, and reduce redundancy, streamlining handovers between design and development teams.