Heal – Injury Recovery App
Role
UX/UI Designer – Research, Wireframing, Prototyping
Platform
Mobile App
Tools used
Figma, Adobe InDesign, Miro
Duration
1 week
Heal is designed to help users track their recovery process, manage exercises, and stay engaged through features like pain check-ins, exercise plans, and daily reflections. The goal was to create a clear, user-friendly interface that supports injury recovery without overwhelming the user.
Designing for Recovery
Many users recovering from injuries struggle with consistency, tracking progress, and staying motivated. Existing solutions often lack an intuitive design or overwhelm users with unnecessary complexity. The goal was to design a simple, structured app that helps users:
-
Track their pain and progress effectively
-
Follow a personalized exercise plan
-
Stay motivated through reflection and mental well-being tools
Bringing the user to life
To ensure Heal effectively addresses user needs, I created the persona Chris Olsen, a 37-year-old former competitive swimmer who is navigating recovery from a shoulder injury. After undergoing surgery, Chris struggles with limited mobility, daily discomfort, and slow recovery.
Information Architecture
& User Flow
To ensure a structured and user-friendly experience I created an information architecture and a user flow that organizes the app’s layout, and guides how users will interact with it. The information architecture shows how different features are connected. The user flow shows the steps users will follow to complete important actions
Competitive research
To identify best practices and common pain points, I analyzed three relevant apps:
-
Habit Tracker
-
Strengths: Goal tracking, progress visualization
-
Weaknesses: Dated interface, functional but lacks modern aesthetics
-
-
Daylio
-
Strengths: Minimalist UI, intuitive tracking
-
Weaknesses: Low text contrast, potential readability issues
-
-
Moodfit
-
Strengths: Comprehensive wellness tracking, engaging visuals
-
Weaknesses: Color combinations may feel overwhelming
-
Key Takeaways
-
Clear, modern design improves engagement
-
Simple, guided user flows prevent cognitive overload
-
Balanced contrast and color use enhance accessibility
From Sketches to Wireframes
I began with hand-drawn sketches to quickly explore layout ideas and concepts. Once I had a clearer idea of the layout and flow, I moved on to creating mid-fidelity wireframes. This step helped me better understand the user experience
and make improvements before moving on to high-fidelity.
Color & Typography
I focused on creating a clean look for the app by using calm greens, greys and a touch of orange, together with a simple, highly readable font.
Color palette
The colors are used carefully to keep the app clean and easy to read. The mix of calm greens, greys and orange creates a balanced look that’s easy on the eyes.
Typography
The font, Roboto, is simple, modern, and easy to read. It works well for both titles and body text, and ensures a good and consistent reading experience.
Accessible Color Contrast
To ensure that the text and background colors meet accessibility standards, I used the Contrast Checker tool from Coolors. This helped verify that the contrast between text and background colors meet the WCAG (Web Content Accessibility Guidelines) requirements, and ensured that all text is accessible, making the content easier to read for users with visual impairments or those who may have difficulty reading low-contrast text.
High-Fidelity Prototype
The high-fidelity prototype has a modern, user-friendly design. I focused on creating a clean and simple layout, making it easy for users to navigate and access key features without feeling overwhelmed. The design has clear typography and a calming, minimalistic color palette.
Design principles
When designing the dashboard, I had several design principles in mind to create a clear, easy to use, and accessible interface. To learn more about my design choices, you can view annotations in Figma.
Reflections & Next Steps
Designing Heal has been a rewarding process, focusing on building an intuitive and simple app to help users recovering from injuries track their progress, follow personalized exercise plans, and stay motivated throughout their recovery. Balancing functionality and ease of use has been key in ensuring the app can support users during their healing process.
The next step would be to conduct usability testing with real users. Gathering feedback will help assess how well the app meets their needs, especially regarding navigation, user experience, and the effectiveness of key features. This will help identify any pain points and areas for improvement. Based on user insights, further iterations will refine the design, making Heal even more user-friendly and better suited to support injury recovery.
