Health app: Research & Design
Overview
Users need a tool that helps them balance their busy lives and health, that is also inclusive of their diverse needs. This is my goal with Healthly, a conceptual health-focused responsive web app.
Goal
Healthly serves as a personal assistant for its users, empowering them to actively manage and achieve their goals in every step of their health and wellness journey.
Duration
2/2023-11/2023, 9 months
The Process
Identify the Problem
Users are reluctant to log their health and wellness information because they feel discouraged from having to continuously open their app.
​​They dislike recording their progress because of a non-engaging and sometimes confusing layout.
With these in mind, I conducted a competitive analysis of Healthly's main competitors, MyChart and FitOn, popular health and wellness apps that are already on the market. This helped me develop a plan to address the problem, which I put together in a business requirements document (BRD) for Healthly.
From my findings, I narrowed down my target audience to:
Next, to learn more about our users, I conducted three user interviews* with my target audience.​
( *This sample size was set by my program and met the requirements for the project. )
I organized my findings into an affinity map to understand how our users act and how they feel.
User Interviews: Key Insights​
​
I also highlighted the quotes that stood out.
Then I isolated common issues and themes that I saw within my affinity map.
Now how can I translate these findings into realistic profiles?
Based on these findings, I created two personas, each representing a different target user group.
Adriana represents my target female age group. She's a student on a tight budget.
Kyle represents my target male age group. He has a busy work schedule.
Add More Depth to our Users
I continued to dig deeper to understand how our users approach tasks. To do this, I developed scenarios for each persona.
In this scenario, we see how Kyle uses Healthly to learn something new.
Thoughts
​
Visualizing user actions deepened my understanding of our users' thoughts and feelings. This helped me to further empathize with them and revealed new opportunities for me to personalize Healthly to meet user needs.
With these insights, I outlined a site map and tested how users would respond to it in a remote card sort.
This helped me understand how our users think and connect concepts with one another, which helped me to organize my app in the most user-friendly way.
How can I uncover how our users think through a card sort?
Card Sort: Collect Data​
​
Users were asked to group cards into categories.
​
(Each line of text shown on the right side of the graph represents a separate card)
​
Similarity Matrix showing results from the card sort
I looked at the darkly shaded clusters to effectively identify the most common card groupings that were made.
Transform our Navigation Experience with a Proven Layout
Using my findings from these clusters, I made revisions to my sitemap.
Site Map (Before Card Sort)
Revised Site Map (After Card Sort)
I also put my attention to the Social cluster and moved it up the hierarchy. As we learned from our user interviews, the social aspect of our app is essential to encouraging user motivation and improving overall user mood and wellness.
Begin designing
Now with our foundation in place, I began drafting low-fidelity wireframes for mobile and desktop. I selected from the furthest left of the updated site map so I could focus on the top features in these wireframes.
​
Low-fidelity wireframes
View Social Posts (mobile)
View Social Posts (desktop)
Log an Activity (mobile)
Log an activity (desktop)
I combined my wireframes to create a low-fidelity prototype, then developed a usability test plan to gather feedback from others. Through this process, I learned how new users navigate and interact with our app.
Usablity Test Report
After this, I organized the feedback from the usability test into a rainbow spreadsheet.
This helped me easily visualize the frequency of responses from users.
Usablity Test Report: Findings
From our first round of testing, participants' responses demonstrated that they understood our app's purpose and saw potential in its versatility.
1/2 participants
mentioned Healthly is like a combination of Google Calendar, a fitness app, and a mental health app.
5/6 participants
noted that they liked being able to do many different things in Healthly
​
Participants completed their tasks fairly smoothly. Most participants quickly figured out where to go next when they made an error, but this was a user pain point for some.
1/3 participants
noted they disliked clicking on the menu bar to return to the homepage
How do I approach my design from here?
Primarily, adding to and altering the wording to make actions in the app more clear to users could improve the user experience.
Making navigation options more accessible and more noticeably clickable could also effectively decrease user error when completing tasks.
Some issues found during usability testing
I continued to iterate on the design, incorporating more and more detail and feedback from additional rounds of testing to continually improve the user experience of our app.
Add style
With each revision to the prototype, I enhanced the UI design of Healthly.
Once this was done, I incorporated more design principles and all the details needed for a polished high-fidelity prototype. I decided on a warm and trusting color palette with rounded elements to help users feel at ease.
Mid-Fidelity Wireframe
High-Fidelity Prototype
Thoughts
​
Throughout this project, I gained an immense amount of hands-on experience conducting various types of research, analyzing my findings effectively by applying research methods and data visualization, and implementing design to bring Healthly to life!
By spending time getting to know my users and continuously improving my designs, I've strengthened my critical thinking, communication skills, and understanding of design principles.
Navigation Bar: Redesign
Overview
For this case study, I wanted to tackle issues faced by a population that designers can often overlook: the elderly
​
With this purpose in mind, I found a workshop directed at improving the accessibility of a website designed for seniors called SeniorTix. This site helps senior citizens discover discounts on different outings and activities.
Goal
The problem I wanted to solve was: How can I make it easier for senior citizens to navigate the site by effectively targeting the navigation challenges they are having?
​
To achieve this, I observed the persona, which led me to select the navigation bar as my focus.
Duration
6/2023, 48 hours
​
Here is what the original SeniorTix homepage looks like:​
The Process
Observe Our Persona
​
​
Here are a few accessibility issues I identified after watching her navigate the SeniorTix site:
01
Janice has to zoom in to be able to read the small font size.
02
The dropdown navigation bar is hard to use for someone with motor disabilities. With shaky hands, it's hard to stay in one place to be able to make a selection from the menu.
03
The lack of distinctiveness in the white space between menu items makes it hard to determine the exact boundaries between each menu item.
Thoughts
​
After watching this simulation, I found myself taking a pause during the workshop. Seeing this had a powerful impact on me. I think seeing the simulation helped me to really see the challenges Janice encounters from her point of view. My mindset moving forward at this point was set on figuring out how I can help those who share impairments like Janice's.
Rapid Sketches​
​
I proceeded to sketch out 4 possible solutions to improve the design and accessibility of the navigation bar.​
​
​
Detailed Sketches​
Then I made a few more adjustments and created a more detailed version of the design.
​
Move the navigation buttons above the menu for better visibility and access.
​
Increase navigation bar height and font size.
Alternate colors between menu items and increase font size.
(Shown: User clicks on the Next button )
As the user clicks the navigation buttons, the button and the corresponding menu item get highlighted. This lets the user knows where they are in the menu.
​
High Fidelity Design
Lastly, I took my design into Figma to create a more detailed version of the screen.
Large navigation buttons above the menu
Navigation bar is larger and shadows are added to make it more defined and the information easier to see
Alternating colors between menu items and increased font size
​
Navigation button and corresponding menu item get highlighted during navigation
Thoughts
​
This case study was a great learning experience. It was my first time using Figma and I learned a great deal by diving right in. I also learned to strengthen my design skills. From empathizing with my target users, I was able to look at the problem and prioritize the solutions that I believed would result in the most user-friendly experience for them.