1 Project Overview
Worked with stakeholders and conducted user research to update the watch app focusing on user-centric navigation in the latest Healy library brand style.
Challenges
The Healy Watch app’s navigation was designed from a development perspective containing all functions and features but lacking in a User first approach. In many cases certain features remain hidden and screens are crowded with information.
First Goal
To improve the onboarding user journey in order to easily connect the app with the device. Ensure all screens in particular Dashboard, Stats and Settings have a clear visual hierarchy.
Second Goal
To create a consistent design language throughout the app so it is both aligned closer with user expectations and that of fitness app competitors. In addition maintaining consistency in the visual style of the Healy global library.
2 Watch App Review
We reviewed the current watch app status making notes on navigation errors and listing potential improvements to the UI. In addition, made notes of key functions to be featured.
1. Screenshot Watch app 1.
2. Highlight errors and hidden features.
3. Present findings via user flows to stakeholders.
Key Takeaways
-
Navigation overly long and text heavy.
-
Screens bland and not visually engaging.
-
Key features hidden or not highlighted clearly.
-
Inconsistent design style.
-
Limited trouble shooting.
3 Benchmarking
Reviewed competitors to establish consistency to meet the user’s expectation for the product more effectively, resulting in a low learning curve for the user. This involved:
1. Search on app store and play store about related apps.
2. Check apps navigation, features and screen layout.
3. Check Ul style for design inspiration.
Related apps
Most of the apps maintain a minimal style to clearly define each feature and stats. The most notable competitor is Fitbit with strong visuals and a user centric navigation and dashboard.
4 Personas
Below are two of the personas to help clearly define the users requirements.
5 User Flow
Created more detailed user flows to incorporate a comprehensive guide for the development team. Below is a section of the user journey to the dashboard. We utilised Miro boards for more collaborative input from stakeholders.
6 Design System
Working closely with the Creative Director and Head of Product a Global Library for the Healy Apps was developed using an Atomic design framework. This design style was then applied to the Healy Watch app.
7 Wireframes
Low fidelity sketches to mid and high fidelity wireframes were used to test each design. These designs were then tested via prototypes with both users and stakeholders.
8 Final Designs
Includes updated icon and illustration style. Additional feedback via animations (JSON) improved both the onboarding user journey and features such as heart rate measurements. Finally, an extra Info centre section was added so users can access help and stay updated with all Healy news.
