Hero App Visual Redesign
Redesign the Hero app visual and design system to enhance clarity, ensure consistency, and establish future-proofing.
The Hero app has evolved significantly since its initial launch, with continuous improvements and the addition of new features and content aimed at enhancing user experience and safety. However, the existing design system is no longer aligned with the evolving needs of the app. In order to improve the visual experience, future-proof the app, and align with the second-generation device interface, a project has been initiated to redesign the app interface. This redesign project aims to create a more visually appealing, user-friendly interface that caters to the evolving requirements of the app and aligns seamlessly with the second-generation device interface.
My role
Conducted a thorough analysis of the current app screens, design system, and user feedback to identify areas for improvement.
Generated and finalized the redesigned app interface, incorporating innovative and user-centric design solutions.
Developed a comprehensive mobile design system using Figma, collaborating closely with engineers to facilitate smooth implementation.
Conducted user acceptance testing (UAT) to verify the accurate implementation of the visual redesign and ensure a seamless user experience.
App screen cleanup
Between the end of 2021 and 2022, Hero brought on contract board visual designer Tim Smith to focus on creating the device's visual design system, new illustrations, and animations. Concurrently, the app visual redesign project was initiated to ensure consistency across both platforms. During my tenure at Hero, I successfully completed the visual updates for FRE, Add Medications, Medication View & Details, and Dose Calendar with numerous significant improvements.
Previous header vs New header (Left to right)
Streamlined Header Design: Enhancing User Experience with Improved Space and Clarity
The previous header design occupied excessive space and exhibited inconsistent background color choices and spacing.
In the updated header design, the background color has been removed to emphasize the main content. Furthermore, the new header provides the opportunity to provide more descriptive titles, which is particularly beneficial during step-by-step processes. These changes enhance the overall user experience and improve clarity and functionality within the app.
Previous clickable item vs New clickable item (Left to right)
Clickable List Revamp: Clearer Distinction and Enhanced User Interaction
In the initial version of the clickable list, a chevron was placed on the right-hand side as a clickable indication. The chevron was removed to clean up the interface and accommodate the schedule and medication status badges. However, this resulted in the clickable list appearing similar to the non-clickable ones.
In the redesigned list, a light grey background has been implemented to visually distinguish it from non-clickable information. This separation enhances user interaction and improves the overall clarity of the interface.
Center pop up vs drawer pop up (Left to right)
Enhanced Pop-up Design: Promoting Variation and Consistency
To improve compatibility with keyboards and maintain consistent placement of CTA buttons, the center pop-up style has been replaced with a drawer pop-up design.
This intentional design change enables a wider range of pop-up variations and seamlessly accommodates different scenarios, ensuring convenient and consistent access to CTA buttons for users.
Different kinds of drawer
Previous layout vs New layout
Enhanced Mobile Readability: Adaptive Layout for Font Size Compatibility
Many users prefer to enlarge their mobile phone font size for improved readability. However, the previous layout, featuring text on both the left and right sides, often encountered layout issues when the font size was increased.
A new layout has been implemented to address this, placing the text at the center or left-hand side, while badges or icons are positioned on the right. This revised layout ensures a more consistent and visually pleasing user experience, accommodating various font sizes while maintaining proper alignment and avoiding layout problems.
Larger type sizes
App visual design system v2
Problem #1: Incomprehensive component library
The original design system for the Hero app lacked a comprehensive library of components and their variants, leading to inconsistencies in their usage and implementation.
Problem #2: Lack of guidance
The original design system lacked clear instructions regarding the appropriate use of different font styles for various cases, resulting in visual inconsistencies across screens. Furthermore, the absence of general spacing guidelines in the style guide contributed to further inconsistencies. Engineers faced challenges due to the lack of a reliable source of truth, leading to a cluttered and disorganized outcome. In addition, components suffered from inconsistent color schemes, while screens exhibited variations in text styles and spacing, further impacting the visual cohesiveness of the app.
Solution: A comprehensive design system library
The creation of a comprehensive design system library was initiated after finalizing the text, layout, and components for the Hero app. This library serves as a resource for both engineers and designers who will join Hero in the future, providing them with a definitive source of truth to craft the app's interface. Additionally, the design system library incorporates the contributions of contract designer Tim, encompassing various aspects such as color updates, icons, and illustrations. By centralizing design assets and guidelines, this library promotes consistency, efficiency, and a cohesive visual identity throughout the app's development and evolution.
interactive Figma components
Utilizing the prototyping capabilities of Figma, I ensured that components with different variants can be easily interchanged through the control panel.
Result
The implementation of a standardized app design system with clear instructions and reduced exceptions allowed engineers to create templates and update the rest of the screen visual, including the Home page, Insights, and Menu section.