Jan 5
Sage — A UX Case Study
Background
This project was created during a 6-week design sprint at Davis Design Interactive, UC Davis’s first human-centered design group with a multidisciplinary community focused on creating impactful, innovative solutions.
Awarded Most Innovative UX and Best UX Research
Meet the Team!
Context
Our team was originally given the following prompt:
Everyone has struggles with mental health and the recent years have brought to light the many methods that we can use to help us. In addition to medical help, there are many supplemental therapies that can be explored including art, dance, written, and more.
We have all found ways that help us through times of struggle but how can we help others do the same?
However, we acknowledged that mental health is a very sensitive and significant topic, and we did not want to proclaim our app as a quick fix to serious mental illnesses. Thus, we pivoted our approach to the prompt to supplemental self-care strategies.
Problem
Current mindfulness apps don’t permit flexible goal setting, are not personable nor organic enough, and fail to balance the user’s screen time.
How might we effectively integrate technology into the user’s self-care journey?
Solution
Introducing Sage: a self-care hub that incorporates a diverse range of mindfulness activities in a variety of mediums. Personalized and inclusive experiences are at the forefront of helping users navigate the stressors of day-to-day life. Users can discover new self-care methods, set their own goals, have fun collecting plants for their personal garden, and balance their screen time all with the help of Sage.
Timeline
Project Goals
With the pivot in our approach to the prompt, we generated three overarching project goals:
- Make self-care goals more personal
- Be mindful of designing for social accessibility
- Bear in mind that our app is not a replacement for professional therapy
User Research
Research Goals
Accessibility: What was the biggest barrier to practicing self-care?
Preferred App Logistics: How do people prefer their apps to run? Would they enjoy statistics and other quantified data? How about rewards? Motivational quotes?
Understanding User Behavior: What makes particular self-care practices attractive?
Inclusivity: How do we make our app’s audience more inclusive and diverse? How can we target marginalized communities?
Security: How do we ensure that users feel safe and secure while using the app considering mental health is an important and sensitive topic?
Quantitative Data: Survey
We started off by gathering quantitative data through a QualtricsXM survey. We scoped out what methods people used to aid in maintaining their mental health and what they wanted out of a hypothetical self-care app.
We used a combination of frequency, Likert scale, multiple choice, and open-ended questions in our survey design. Additionally, we implemented a contingency question at the beginning of the survey to ensure that all respondents were over the age of 18.
Qualitative Data: Interviews
We used our survey questions and responses to help inform our interview questions. During our five one-on-one interviews, we took a deeper dive into the reasonings behind some of the data we saw from our survey such as what each participants’ self-care regimen looked like.
Literature Review
After conducting our interviews, we were interested in learning more about extrinsic vs. intrinsic motivation, in addition to how mental health is impacted by cultural diversity. A brief literature review was used to dive deeper into these topics.
Competitive Analysis
We conducted three competitive analyses with Calm, Headspace, and Balance which are existing mindfulness apps that would be direct competitiors to Sage.
We used the strengths and weaknesses of these existing apps as opportunities to implement specific features in our designs.
Ideation & Synthesis
User Personas
Since a majority of the demographic makeup of our quantitative and qualitative data respondents were college students, we decided to create two user personas who represented our target audience. We primarily focused on the goals, stressors, and mental health history of these personas.
Affinity Mapping
We utilized affinity mapping to organize our findings from the qualitative and quantitative research and categorized them into notifications, motivators, barriers/stressors, resources/strategies, technology, and consistency
Main Insights
From our affinity mapping, we concluded on four main insights:
- Time: Most people didn't practice self-care due to limited time.
- Device Usage: Many people wanted to balance screen time while practicing self-care
- Visibility: The self-care activities that were most well-known did not coincide with the activities that were used most often
- Motivation: Many people wanted to be both intrinsically and extrinsically motivated
Low-Fidelity Wireframes
We created sketches of three main screens: home page, explore page, and profile page.
The home page originally contained the user’s garden in addition to recents and favorites.
The explore page would introduce the user to new self-care methods with the ability to sort and filter.
The profile page would have a calendar that allowed the user to schedule times to practice self-care.
User Flows
We established user flows for our three main pages and onboarding to guide our mid-fi prototypes.
Mid-Fidelity Prototyping
Onboarding
We decided to include an onboarding flow because it was crucial in providing a more personalized experience for our user. We utilized storytelling to inform the user about what the app is and how it impacts the user. In the third frame, the user selects three self-care methods that they like or would want to try, and these would appear on the home page. The fourth frame encourages the user to select which communities they identify with in order to tailor special collections and playlists.
Home Page
Upon completing onboarding, the user is then brought to the home page where they can access their personal garden, in addition to their recents and personal playlists. There are two entry points from the home page in which a user can access an activity: either through recents by clicking on a card (frame 2) or by selecting an activity from a playlist (frame 3).
Explore Page
The explore page is where the user can discover new self-care methods. They can do so by selecting how they are feeling, by clicking on a specific method, or by viewing a special collection. From there, another frame would provide details about each activity such as the duration and a brief description of what the activity involves.
Profile Page
The profile page contains the settings, a daily affirmation, and the calendar. Users can schedule self-care practices for certain days and after it is completed, it will automatically be crossed off. The user has another entry point for starting an activity by simply clicking on the activity in the plan.
User Testing
Our mid-fidelity prototype was tested with 7 users, all of whom were given the following tasks to complete:
- Complete onboarding
- View favorite activities and unfavorite an activity
- Check on personal garden and plants
- Navigate to the explore page and save an activity for later
- Navigate to the profile page and complete one of the strategies scheduled for today
Positive Feedback
Users loved the personal garden and thought that it was a good extrinsic motivator. Users also reported feeling “happy, calm, and safe” while using the app. Additionally, users appreciated how the interface feels simple, easy to use, and has a nice hierarchy of information.
Onboarding Feedback
Home Page Feedback
Explore Page Feedback
Profile Page Feedback
Hi-Fidelity Prototyping
Design System
We utilized color psychology when choosing all of our colors. Sage green was designated as our primary color because it signifies growth and life, and it provokes a sense of comfort and relaxation. Similarly, light blue can be described as a calm and peaceful color. All of our colors are seen in nature, and we wanted the user to feel like they were immersed in a space that feels organic. All color combinations passed WCAG AAA contrast ratios.
Montserrat was our chosen typeface because sans serif fonts generally have better readability on the web. It also emanates simplicity and incorporates roundness.
We created variations of our buttons and input bars using the pine and cloud colors. Unselected states for tags are in the sage color and selected states turn into mesh gradient.
The three icons on the left represent what medium the activity is: writing, audio, or video. All buttons, input bars, tags, icons, cards, and nav bar have rounded corners to convey a more natural and soft feel.
Categories of activities are represented with circular cards, special collections use mesh gradient cards, and covers for activities and playlists consist of only the image, with additional info underneath.
Final Solution
Onboarding
Customize what content appears on the home page by choosing what practices appear interesting and which communities one identifies with. Control over notification settings prevents annoying spam. Affirmations can be selected or written to promote authenticity.
Recents & Favorites
Easily access recents and favorites at the top of the home page. Favorites are automatically sorted by type of activity and search bar for recents allows for quick navigation.
Your Playlists
Curate, name, and choose a cover for personal playlist. Journaling prompts are provided through the app at the beginning of activity and can be accessed anytime after. User’s phone can be shut off while the timer runs.
Explore Page
There are multiple ways to discover new activities including by feeling, duration, and method. Filter options include by time and feeling, as well as a myriad of sorting options.
Special Collections
Special collections are curated specifically for the user based on responses to the onboarding questions. Users can schedule activities for later and add them to the calendar. Art therapy activities are video tutorials (not shown).F
Personal Garden
Users can watch their plant grow in real time as well as view their personal garden. A gamified approach encourages users to earn a plant for every month self-care is practiced.
Calendar
View, remove, and add planned activities for each day. Users can directly access activities through the calendar, and upon completion, the activity is automatically crossed out.
Meditation Activity
Viewable lyrics for traditionally audio-only activities makes meditation more accessible for those with hearing impairments. Users can add the activity to a playlist, favorite and/or change narrator.
Conclusion
Challenges
Overall building a project from the ground up proved difficult with the challenge of needing to ideate every aspect of our app concept from scratch, as opposed to a redesign.
Additionally, collaboration and compromising on design choices within our team was something important we had to navigate considering there was no established brand standard.
Takeaways
One of the biggest lessons our team learned is that it’s okay to have an alternate approach to the original prompt, especially if it can better address the user’s needs. Early on in the project we decided that we wanted to restructure our approach to the prompt, going from “mental health therapies” to “supplemental self-care strategies.”
Next Steps
If our team was to proceed with this project, we would further explore features that would make the experience more customizable and personable for the user.
We also played around with the idea of a queue function for self-care strategies and wanted to make the UI specific to the current season, but unfortunately we didn’t have time for implementation.
Another addition we thought would be useful for users would be a mood tracker system or a check in feature for users to see how they’re feeling over time or at a given moment.
