Shine

End-to-end Mobile App

View Prototype

background

As a part of the Designlab curriculum, I was tasked to create an end-to-end mobile app. I decided to create an app that would have mental health and wellness resources in one platform, along with the ability for the users to track their mood.

problem

Although there are plenty of resources that can be found all over online or on other social media platforms, based on research, users would like to see it consolidated into one space.

goal

My goal was to understand how people currently consider the topic of mental health along with their own personal wellbeing and if they feel that having an app dedicated to that would help to improve their life in general.

ROLE

UX/UI Designer

timeline

3 weeks

Process

1. Empathize
Understand how user's thoughts about mental health has changed over time
2. Define
Design an app that would have mental health and wellness resources in one place
3. Ideate
Create sketches and wireframes of a user's first-time experience of signing up for the app, logging their mood, and getting relevant resources
4. Prototype
Create high-fidelity wireframes and prototypes to test task flows
5. Test
Test prototypes to confirm usability and sense of the task flows

1. Empathize

To better understand how the topic of mental health has changed over time in society and hear from users, I conducted market research, competitive analysis, and user interviews.
Market Research
Although there has been increased willingness to recognize mental health as an essential part of one's well being in the past decade, there is still much to be done. Mental healthcare is still largely a response to problems rather than something that is recommended for everyone as a way to improve life in general.
Competitive Analysis
User Interviews

"Mental health is something important to have a daily check on, like how is my mental health? What are the things that are causing anxiety and stress?"

Goals

  • See more resources/stories regarding mental health and wellness and find a sense of community

Needs

  • More quality resources made available
  • Sense of support and community that is nonjudgmental and open
  • Tips and guidance

Frustrations

  • Not enough resources and still much learning to be done
  • Factors beyond a user's control that can play a role

Motivations

  • More understanding, less stigma, ability to help
  • More people suffer from mental health and wellness than we may think
Key Findings
  • 1 participant said mental health was always an important matter to her but has been made even more important over the last few years through her studies
  • 3 participants said they didn’t really understand the topic before and just didn’t know much about it and how prevalent it was
  • 3 participants felt that their major and studies have helped to shed more light on this topic
  • All participants said when they don’t feel their mental health is optimal, they do things that make them happy and calm them down
  • All participants find their sense of support and community through friends, family, and colleagues
  • 1 participant actively looks at resources related to the topic through social media
  • All participants feel that having an app would be helpful but needs some more interactions and guidance than just tracking how someone is doing
Possible Solutions
  1. An app that allows for tracking personal progress but also provides some interaction and guidance to a user with resources

2. Define

From the empathizing phase, I created an empathy map and persona for Katie, a recently graduated grad student who is looking for a job. She has a great support system around her by way of family and friends but would like to see more resources about mental health and wellness in one space. This would not be a substitute for professional help if needed, but a place where she could find resources and a community.
empathy map
persona
task flow
The task flows that I created were to see if a user could go through the sign up/first time experience of the app by taking a screening quiz before a user would be "admitted" to the app to create an account. Then, the user could start their first mood quiz, which would be tracked and logged for the user to see how they are doing over a period of time and see what moods they typically have. For purposes of the project, after this step, the app would appear as if the user had been using the app for a month already. Based on the moods submitted, the user would get some articles/blog posts suggested for them to view. They could also save the articles/blog posts to their account for future use.

3. ideate

I sketched out some ideas of the different pages of the app based on the task flow and created low-fidelity wireframes based on my sketches.
low-fidelity wireframes
logo designs
I had a few names for the app that I was considering and asked the participants in my user interviews which names would be more fitting for the app and which ones they liked the best. Based on their responses, I designed some logos for the ones that were most popular from my user interviews.
UI KIt

4. prototype

I used the high-fidelity wireframes to create a prototype that would be used for usability testing.
high-fidelity wireframes
I created screens for a user's first time experience with the app, beginning with the homepage and then a quick about page. In order to make sure people are using the app for the right reasons, I included an example of a screening question. If a user were to "pass" the screening quiz, they would come upon the confirmation page that they were eligible to use the app. They would be directed to a tutorial of how the app works before actually creating an account.
Once a user has created an account, they would be prompted to take their first mood quiz, which would also appear every time they opened the app. I ended up creating a relatively extensive mood list that followed a gradient in color to show a spectrum of moods, from best to worst. This added a nice touch of color to my design and also would be a good way to engage the user to recall their mood with colors and be more visually appealing.

When selecting a mood, the app would tell them how many other app users also selected that mood. They could also add a mood from the app's list or create their own, as well as put notes to their mood. Once the moods are submitted, they would be taken to the homepage, which shows all the moods for that day as well as a week view and suggested articles/blog posts based upon their quiz. The user could then bookmark the article/blog posts and it would be saved onto their account. The user could also view their moods of the month as a way to track their mood over a period of time.

5. testing

After building the prototype, I conducted usability testing to gain user feedback on the task flow and the overall experience with the design elements.
Usability Testing
  • 3 participants
  • Ages 21-28 years old
Findings
  • All participants were able to get through the task flow with minimal help, mostly due to errors in my prototype creation
  • I might have had too many instructions for the task flow which caused to forget what action they were supposed to do
  • All participants liked the overall look of the design (colors, pictures, etc)
Affinity Map
ITERATIONS

UI Element Fixes
‍
In the prototype for my usability testing, although I created extra screens to show an action had happened, I did not include disabled buttons on the first screen to show that a user could not go to the next step unless they responded to a question or filled something out. I also failed to include an active button to show that something had been selected. These changes would help users be aware that an action needs to be done before moving on to the next step and that an action had taken place. It would also inform them visually that something has occurred.

Design Fixes
‍
I originally created the home page to show a random day of the month as if that day was today. After some consideration, I decided to show a full month as the home page and have the last day of the month be "today" so the user could see a full month at a glance. I updated the calendar to show the last day of the month as "today," which also shows the week view.

I also updated the bottom navigation icons so the "Moods" wouldn't get mistaken for a menu. Instead, I used the sun from the app name as the icon to see the moods as a legend.

FINAL PROTOTYPE
The task flow: Go through a user's first time experience with the app by taking a screening quiz then creating an account. Then, take and submit their mood quiz for the day and navigate to the current day. From there, view the first article and save it to the "Bookmarks" tab.

next steps

Due to time and project constraints, there were a few things that I did not get to include from my original project brief. I wanted to incorporate a sleep tracker along with the mood tracker. In addition, I wanted to incorporate the community and support aspect within the app, along with how a user could possibly get professional help through the app. Those would be some features and designs I would work on next to build a fuller app.

Overall, building an end-to-end app presented more challenges than I was expecting at the start of the project. I had no idea how it would turn out in terms of design, content, and flow. However, I received great feedback on all aspects of this project and am happy with how it turned out.

Other Projects

AccessTeam
SaaS Web App
Apple Messages
Added Feature to Existing Product
Rose Donuts
Responsive Web Design
Kaus Insurance
Responsive Web Design
© Copyright 2024 Tina Yip