Overview
Health provides a holistic program developed and personalized just for you, based on the way you eat, your physical activity, and your genetics. While the program was working very well and users were increasing, the application interface looked outdated. In addition to looking a bit old visually, there were usability and user experience problems.
My role
I worked hand in hand with UX designers on the new mobile app version. I participated in flows and wireframes creation for then translate this into user-friendly prototypes and final Hi-Fi designs.
The project had many changes, so it was essential to have a good predisposition to receive feedback and communicate progress. To achieve a better reception and interpretation of our design decisions we develop interactive prototypes that provided easy navigation and collaboration with all team members.
Tasks
• Wireframing
• User flows
• Prototyping
• UI Design
• Interaction
Tools
Sketch
Invision
Photoshop
Slack
Illustrator
Jira
Principle
Zeplin
Approach
With Health you can schedule appointments, submit food pictures, perform surveys and exercises, chat with your provider, sync your steps and heart rate.
All the features of the previous version of the app were questioned, rethought and redesigned.
Wireframes
Wireframes were created to define the underlaying structure and key functionalities of the app, before moving on to interface design.
Login / Registration Flow
Minimum amount of information was used during the whole process in order to make it comfortable and understandable.
Onboarding
Hi-fi Designs
The aesthetics of the new version were worked in parallel with a redesign of the brand’s identity in general. With defined institutional guidelines, there were taken as the basis and to expand the UI according to the needs of the app. The creation of a library of reusable components boosted visual design work.
Appointments interaction
Animations were performed to best represent the interactions with certain functions of the app. The client could visually see how the app would work and at the same time it helped developers to carry out these functionalities.
Timeline Cards transition
In your dashboard you can find different kind of content: cards and food. You are able to save and organize them according to your preferences.
Here it was also important to show how the cards were going to work. Representing the type of animation added a lot of value.
Navigate the prototype
Connecting designs into clickable prototype is essential to provide to the client a navigable experience. Invision tool was used in order to recieve feedback and quickly iterate.
Prototyping is also a good way to find logical mistakes and misassumptions.