Responsive Web Design
Introduction​
Many hospital and recovery patients struggle with chronic health issues such as sleeplessness, tiredness, and numbness. While medication often helps, many individuals seek safer, natural alternatives to improve their overall wellbeing.
I designed the Natural Remedy App to help these patients explore evidence-based natural remedies, connect with trusted medical advice, and make informed choices about their health.
I designed the Natural Remedy App to help these patients explore evidence-based natural remedies, connect with trusted medical advice, and make informed choices about their health.
What:
Empower patients to manage symptoms naturally through trusted health education and doctor collaboration.
Why:
Natural remedies are affordable, historically proven, and offer a holistic complement to conventional healthcare.
Project duration: 3 months
Research
The project began with a competitor analysis, exploring existing health and wellness apps to identify gaps in usability, credibility, and depth of information.
I reviewed well-known medical apps and wellness platforms, noting the absence of clear natural-remedy education or quick doctor contact:​​
To broaden inspiration, I also explored Dribbble and other design platforms to study effective UI patterns for wellness and medical apps:
​
​​​
Next, I conducted interviews with five participants — people who had experienced hospital stays or ongoing health challenges. I asked about their frustrations, needs, and expectations when searching for health-related information:
8) What has been your challenges or frustrations or pain points when it comes to obtaining answers to your health questions online or through an app?
10) Opinions and values: What is your opinion of an app for hospital patients that teaches them about various conditions and natural remedies for them?
Common pain points included:
​
-
Confusion due to inconsistent medical advice online
​
-
Limited access to trusted natural-remedy information
​
-
A desire for human connection and reassurance from medical professionals
Using their feedback, I created an Affinity Map to synthesize recurring insights:
​
Key Findings:
​
-
Users wanted detailed, reliable explanations about remedies
​
-
They struggled to find consistent guidance online
​
-
There was a strong need for an app that combined education + clinical credibility
These insights helped shape the app’s focus: a reliable educational tool that bridges natural remedies with patient–doctor communication.
Define
To bring the problem into sharper focus, I created a user persona — Parker, a 39-year-old hospital patient from New York City who struggles with sleeplessness and other chronic symptoms.
From this, I developed a Value Proposition
Diagram, User Flow, and HMW/POV statements to align the design direction with Parker’s needs.
Value Proposition Diagram, click here to view:
​
​
User Flow, click here to view:
​
​
Point Of View and HMW Statements
​
POV
I'd like to explore ways to provide the sick and hospital patients ages 25 to 70 years old (user) to be able to learn about natural remedies to solve various medical conditions (need), because conventional medicine tends to focus on getting rid of symptoms and not the underlying cause of the illness (insight).
​​
HMW
How might we enable the sick and hospital patients ages 25 to 70 years old to be able to learn about natural remedies to solve their medical conditions?
Key design decisions made: The Venn diagram, user flow, and POV/HMW statements helped me to further see the need for detailed clarification of natural remedies and doctor contact.
Translated to specific UX choices:
​
I decided to make much room for detailed medical remedy pages in the upcoming low fidelity and high fidelity prototypes. I would also include a page to schedule appoints, message, and call the doctor.
Design
The design process began with low-fidelity sketches to explore the core layout and navigation.
Early wireframes focused on presenting information clearly, minimizing cognitive load, and allowing patients to easily access remedy details, articles, and communication tools.
Low Fidelity
After iterating on initial sketches, I developed mid-fidelity wireframes in Figma, refining key flows such as:
-
Exploring remedy categories
​
-
Viewing educational articles
​
-
Scheduling doctor check-ins
​
-
Managing personalized health notes
Once the structure felt intuitive, I moved on to high-fidelity prototypes, applying a soft, calming color palette and modern, legible typography to support a sense of trust and wellness.
The visual design aimed to feel both clinical and approachable, bridging the gap between hospital professionalism and holistic care aesthetics.
Test
With the prototypes ready, I conducted usability testing with several participants.
What I did: I asked 5 participants now test the low fidelity prototype.​
​
They gave me various insights some of which included:
​
-
Top arrows on frames should move the user back to the main home page.
​​
-
Camera, call button, and general app should be spaced farther apart.
​
-
Consider removing the specific unnessesary buttons.
​
I turned the low fidelity into a mid/ high fidelity prototype in Figma. To view it, click here:
I then had another 5 participants test the low fidelity prototype and they gave me feedback:​
​​​
​​​
-
Corrections to word choice and context. For example, change “ General specialist” to “Naturopath”. ​​
​
-
Corrections in terms of accuracy and logic. For example, add 2 major causes for numbness in feet. Explain how someone would know if they have a B1 deficiency or calcium deficiency.​​​​​
Numerous effective corrections from my mentor:
-
Typography
-
Alignment
-
Hierarchy
-
Consistency color/size​
-
Make spacing equal
-
​Default iOS pattern for keyboard
-
Nav bar color change to grey and clarity
-
Increasing visibility of facetime elements​
Through the feedback, I designed my app consistently with auto layout:​
​
-
Between sections maintained spacing: 40 pixels
-
Between titles to sections: 16 pixels
-
From header to main text: 40 pixels
-
From main text to navigation bar: 40 pixels.
-
Margin padding left and right of the text: 20 pixels
-
All measurements multiples of: 4.​
-
Well thought out themes and ideas throughout the frames of the app
Conclusion
After iterations and mentor feedback/ support, the final polished app looked like this:
Final lessons learned during the process:
​
Having a minimalistic look with a main color and white space in an app is imperative to creating a professional look and appeal. Instead of using numerous colors, one central color creates a sense of organization and seriousness.
​
​
Applying auto layout and spacing is vital to the app.
​
Auto layout allows elements to each live within their own “house” or buffer zone, preventing clutter and disorder for the user.
​
​
Features should be relevant and fit the goals of the app. The messaging, facetime, and calendar pages all accomplish this.
To view the full animation prototype, click here:
​
Finished product is a app that will empower people to use natural remedies, achieve doctor care, and live better lives!