Project Overview
About CreateSC
CreateSC is the annual UI/UX designathon hosted by Innovative Design at USC, students team up in a group of 2-3 and compete to design the best solution to a prompt provided.
The Prompt
Design a mobile app that promotes and reflects the principles of wellness in design.
The Challenge
-
To create a product from conception to delivery within 24 hours.
-
To work with a team that I just met and to work together remotely.
My Role
Evelyn Brokering: UX Designer
Britney Le: UX Designer
Tiffany Tran: UX Designere
Duration
2022 April 16 - 17 (24 hours)
The Problem
There are not enough reliable and accessible resources for the mental health community.
Today, when users want resources for mental health, they have to search aimlessly through multiple mobile and web platforms. This is unacceptable; users need convenience. We envision a world where mental wellness communities are accessible, and we want to help bring this world about by creating a mobile app that allows users to find a community to connect with.
Solution
Comfort Health: Forming a community based on mental and physical wellness
This app provides users with access to reliable resources for mental and physical health. We offer online communities to foster conversation in a safe place. No one is alone. Comfort Health is a go-to app for mental health.
​
​
.png)
Find events happening near you, in your community.
Find a community to connect and engage with.
.png)
.png)
Accessibility settings to reflect users' wellness in design.
Offering 24-hour specialists and ratings that users can trust.
Our Design Sprint Process
Since we had only 24 hours from when the prompt was released at 1pm, we discussed what we needed to accomplish to stay on track with our timetable.
​
👇 Click on a process below to skip👇
1. Ideate (1-3pm)
-
Understand the prompt
-
Generate Ideas
-
Vote on the ideas
-
Develop problem statement
2. Research and Analysis (3-6pm)
-
Competitive Analysis
-
User Interviews
-
Affinity Map
-
Empathy Map
3. Define (6-8pm)
-
User Needs and Insights
-
Defining the Problem
-
User Persona
-
POV & HMW
-
Task Flow
4. Design (8-1pm)
-
Ideation Board
-
Low-Fidelity Wireframes
-
UI Design
-
High-Fidelity Wireframes
Ideate
Understanding the prompt to pinpoint our ideas
Design a mobile app that promotes and reflects the principles of wellness in design.
Our team began brainstorming ideas on how we could approach the prompt. We decided to form a community based on mental and physical wellness. The app will provide resources for mental health (descriptions, therapy, treatment, support groups) while also tying in physical health (workout activities, classes, fitness events).
Research & Analysis
Competitive Analysis
Our competitors
We created a list of mental-health competitors and social-gathering competitors in order to understand the market design trends in the mental-health community. Some of the social-gathering competitors included the Meetup and Mindbody apps, and for mental health competitors included Betterhelp and Calm.
User Research
Understanding common challenges users face when looking for mental-health resources and communities.
In order to identify common behaviors and experiences users have when looking for mental-health resources, we interviewed five target participants, ages 16 to 25 (Gen Z), who wanted mental-health resources.
Affinity Mapping
Using users’ answers to generate insights
After gathering 50-plus data points, we sorted and grouped common categories so we could generate insights.
The four major insights we generated were:
100% of users are looking for a community for support and to do activities with.
80% of users want easy access to mental health resources.
80% of users notice that physical and mental health is connected.
80% of users have struggled to find reliable resources.
Define
Defining the Problem
Identifying and prioritising pain points
From the insights, we were able to pinpoint three major problems users were facing.
Users struggle to find reliable resources
It was observed that users don't know where to look for reliable mental-health resources.
Users want easy access to mental health resources
Users are overwhelmed with all the information online and don't know where to start.
Users have trouble looking for a community for support and to do activities with.
All interviewees mentioned how they want to find a community near them to do physical activities with, but they don't know where to find these resources.
User Persona
Meet Lindsey!
With our user interviews, we created our user persona, named Lindsey.
From Lindsey’s goals and needs, I created her point of view (POV). With her POV, I was able to identify how we can help Lindsey by creating a “how might we” statement.
How Might We
HMW 1:
How might we provide Lindsey with resources that are reliable?
​
​
​
HMW 2:
How might we provide Lindsey with a community that is supportive of her mental health?
HMW 3:
How might we provide Lindsey with easy access to mental-health resources?
Possible Solutions
Solution 1:
-
Having reviews of events and resources for credibility
-
Chat room
-
24-hour specialist
Solution 2:
Providing a community to talk to, like a Discussion Board
Solution 3:
-
Resources
-
Search for events near me
Task Flow
Mapping out Lindsey's experience
I created a main user flow for Lindsey. Since we only have 24 hours for this project, this will be used in our wireframing process to narrow down the users’ tasks.
Scenario: Lindsey was recently diagnosed with Generalized Anxiety. Since she doesn't know anyone who has Generalized Anxiety, she can’t find anyone to ask for advice on where to get therapy. So she starts googling to see if there is any information online, and she finds the Comfort Health App and created an account.
Task: Find the Generalized Anxiety community.
Design
Low-Fidelity Wireframes
Wireframing the main user flow
We each took charge of specific pages and created low-fidelity wireframes. I was in charge of creating the login process, community discussion board, account and activities pages.
Implementing Accessibility settings
Users wellness in design comes from accessibility
Of course since I am part of the team I needed to advocate for a accessibility settings. As CreateSC says, design that promotes and reflects “wellness in design” includes tools such as time limits, brightness levels, and accessibility consideration. So I talked to my team about adding these settings to answer the prompt and to really address the users wellness in design. And my team agreed to my idea.
Different color themes to adjust brightness levels.
Text to speech for those who have difficulty reading.
Style guide
Creating a style guide that represents the brand attribute
As a team we created the brand's color and fonts to make the site more visually appealing. Each color represents a brand attribute: blue for control and trust, orange for energy and warmth. We also implemented color theme settings on the accessibility settings so users can choose the tone of the screen they prefer.
High-Fidelity Mockups
High-fidelity mockups and Prototype
We used the low-fidelity wireframes to create our high-fidelity mockups.
Takeaways
We did it! We created a product from conception to delivery in 24 hours!
This was my first design sprint, so it was challenging to create a product from conception to delivery with the time limit we had. Overall I am proud of what our team created and how well we answered the prompt “user wellness in design.” Despite teaming up just before the sprint and working remotely, we did an amazing job!
Next Steps
What could have been improved?
Reflecting on our design, I think it was likely that the accessibility settings were not even noticed by the judges, since the icon was small and didn't stand out enough. I could have made the accessibility icon blue and made it bigger to make it stand out more. I reached out to the majority of the judges to receive feedback in order to understand how we could have improved our designs.