You

YOU is a health and wellness app aimed at providing a space for users to improve their overall health. This app includes features intended to keep people motivated to complete activities aimed at their mental and physical health.

My Role

UX Researcher, UX/UI Designer

Duration

80 hours

People ages 20-45 across all activity levels would like a resource for muscle injury prevention or treatment.

Original Problem

We want to know what health related challenges people face in their day to day lives so that we understand what preventative health measures are needed most.

Research goal

“Hectic schedules can affect motivation to take care of one’s self” stood out a key insight and shifted the focus of this project.

Using this information I wanted to move forward in the general direction using the design and product as the motivator and the content would incorporate healthy habits the user’s mentioned in their interviews such as healthy eating, journaling, exercise and yoga.

Heads up: Redirection upon completing research

Prototype (will open in in separate tab)

01 Research

02 Define

03 Design

04 Test

05 Conclusion

01 Research

Methodology

There were no direct competitors pertaining to the problem I wanted to research so I had to take a step back and I compared 4 websites that would give insight on the resources users have for gathering health information on the web. I was able to have a deeper understanding of the information user’s currently have access to as well as a general idea for a user’s process in obtaining health information.

Competitor analysis

User Interviews

Next, I used the data I gathered above to form and draft a direction for the user Interviews. I conducted 5 remote user interviews where ages ranged 25-63 and the interview lasted 20-30 minutes.

Sample Interview Questions:

  1. Where do you find your health information?

  2. What are your feelings on utilizing alternative health measures to prevent illness in order to avoid going to the doctor? ie. yoga, meditation

  3. What activities do you do to take care of yourself on a daily basis?

Key Insights:

  1. People have a general mistrust of medication information found online but is still a universally used resource

  2. There is general regret that preventative measures for exercise related injuries weren’t taken seriously when a person was younger

  3. Less emphasis is put on prevention of muscle injuries so it happens frequently across many demographics leaving people to treat injuries

  4. Hectic schedules can affect motivation to take care of one’s self

After transcribing the raw data, it was sorted into specific categories showing general themes for further analysis. Click on the figma link below to view affinity mapping (Will open new tab).

Synthesizing the data

Redirection: Change in problem and Focus

The insights derived from observations in the sorted data showed a more pertinent problem users faced in their daily lives. “Hectic schedules can affect motivation to take care of one’s self” stood out a key insight and shifted the focus of this project.

From there I thought of a Point-of-view statement:

I’d like to explore ways to help busy, young professionals stay motivated to take care of themselves because hectic schedules can decrease available time and increase stress.

How might we ?’s

  • How might we help a busy user prioritize their health more often?

  • How might we make a new habit easier to incorporate into a user’s current lifestyle?

  • How might we utilize already existing motivators to benefit the user?

Using this information I wanted to move forward in the general direction using the design and product as the motivator and the content would incorporate healthy habits the user’s mentioned in their interviews such as healthy eating, journaling, exercise and yoga.

02 Define

User’s goals, motivations, pain points, behaviors are extrapolated and sorted, guiding formation of the personas. Personas are an important reference point that is referred back to during several point for this design process.

After personas were created, I completed storyboards, feature sets and card sorting then led to a site map. The sitemap sorted the different flows and mental roadmaps that were forming throughout this project. The main focus when creating the sitemap was keeping the flow and pages clear and concise for the ease of the user. Click the link below to view site map (link will open in separate tab).

I created user flows using information provided by the personas to brainstorm key features the app could provide to the user. Three main user and task flows were explored including login, writing/adding a new journal entry and searching for a new workout.

The task flows confirmed a users journey throughout the app checking the user flows had all necessary details for app use. Click on the figma file below to see detailed flows mapping out a users journey through the You app (Will open in a new tab).

03 Design

Sketches served as blueprints for the design and key screens were brainstormed based on User and Task flows. I explored the different dashboard configurations the most at this step because importance of the dashboard for the MVP as well as user experience. The app is a motivation tool for the user and with a lackluster dashboard would prevent the user from returning.

Low Fidelity wireframes were then built in figma where a column grid system was applied along with design principles. Mid-fidelity wireframes included more design and content details where new frames were added to complete a more complete overview of the product. While expanding and imputing content into the wireframes, the content in which would included was narrowed down and organized in a more effective manner. For example the dashboard, journal and exercise pages became the focal points for optimal user experience.

The UI design was based on the brand values:

Calm motivated Growth Potential

One of the main challenges during the design process was the color palette. The original palettes chosen did not work with the app content once applied to the wireframes. There was a trail and error process until the final design was created in part due to peer and user feedback.

There were several versions of the high fidelity wireframes as peer and mentor feedback were supplied. Since there would be a substantial amount of photos on the wireframes, finding similar photography and creating a cohesive look was prioritized. Darker backgrounds were placed behind many photos to enhance the readability of the text. Emojis used for in the mood tracker module were originally supplied from a third party plug-in but did not evalate the design so I started a emoji library original to You.

High fidelity Wireframes

Sign in/up Screen

Homepage Dashboard

Exercise Dashboard

Mood Tracker

Journal Dashboard

Prototype (Will open in a new tab)

04 Test

Once an initial prototype was completed, I had 5 participants use a maze or figma for the usability testing. Users completed 3 tasks and gave feedback regarding specific flows as well as general design.

Recommendations based on feedback and prioritization:

Homepage layout

  • Users thought the “Recently Explored” section should not have priority on the top of the page

  • “Daily Mood” should be relocated at the top of the page under the quote of the day in order to draw users attention and promote user interaction

Journal dashboard

  • Users were confused if the journal section was for public viewing or for private use which led to the feedback, pin feature should be made optional

  • Date column in past entries were unclear

  • Users did not know what they would view when mood tracker was clicked

Before

After

Search bar relocation

  • most confusion in the testing exposed the size and placement of search bar was inadequate for proper use

  • user's relied on cards on page versus locating search bar

05 Conclusion

Due to constraints of the design, time was a major contributing factor throughout this process. The major iterations upon user feedback were able to be completed allowing for a well thought out prototype to be finished . The UI portion accurately showcased the brand values to users while only needing minor updates in the future.

After user feedback there are prioritized iterations that require more time to complete and test out. One area that held the most interest during usability testing was the community food blog. The pages dedicated to this area would be built out to accommodate users for posting and sharing food related articles, mainly food recipes. User’s could comment on recipes and share them on their own feed.

Expansion of the “journal” section would also be explored. During usability testing, users had differing opinions on the privacy settings they initially thought their journal would have. For example one user thought the material entered into the journal would be private due to the pin feature required in order access the journal while another user thought the journal entry would be public because “it resembles how you post on instagram”. The clear distinction of privacy settings would be explored as well the ability to post publicly in the community setting if the user chose to do so.

Lastly the “mood tracker”, a feature that was added after a few rounds of iterations, would be concentrated on specifically the Emoji library. Upon prototype completion there are 5 custom emoji’s available to the user in this feature. More emojis would be added on and the concept of an emotion scale would be added on to each emoji as well. For example once the user clicked the emoji for ‘mad’, the next screen would have the user indicate on a scale of 1 -5 how ‘mad’ the user was.

Overall the current prototype is a clear example how to make an empathetic design based on user’s wants and needs.

Next
Next

Petful