MyAtlas

MyAtlas

How Might We…reimagine the mental health care space by providing personalized, passive, and proactive care?
SKILLS USED
SKILLS USED

Branding & Identity

UI/UX

Prototyping

TIMELINE
TIMELINE

3 months

MyAtlas is an innovative digital health application that provides evidence-based personalized mental wellness support to college students and their wellness care team. My Atlas has developed a novel 3P (PPP) model to inform their application, with the 3 Ps standing for personalized, passive, and proactive. By passively monitoring mental health digital biomarkers collected from wearable health devices, My Atlas will proactively provide personalized mental health tips and treatment options to users.

Goal: Create a functional MVP with a consistent and unique brand identity, ensuring the application is inviting yet clean, and structuring the UI to be intuitive for first-time users.
My Role

As a UI/UX Designer at Generate Product Development, I collaborated as part of a cross-functional design team to execute the complete end-to-end design process, including user research, wireframing, prototyping, and branding.

This project took one semester to complete.

Background Research

Our research for this project consisted of:

  • Benchmarking existing products focusing on their onboarding process due to the complex onboarding aspect of MyAtlas

  • Moodboarding to gain visual inspiration for the UI

  • Creating user personas to better understand the needs of the user

User Personas

MyAtlas is designed for individuals looking to improve their mental wellness through personalized mental health insights. The typical MyAtlas user that we established is a college-aged young adult who is tech-savvy and invested in their personal well-being. They are open to using digital solutions and may have varying levels of familiarity with mental health services and wellness care.

Key Features

Home Screen

Purpose

The Home page is the hub of MyAtlas.

Design Process

In designing the Home page, we moved away from a tile-like layout to a vertically split format with increased white space, ensuring clarity for text-heavy content. We resized the profile section to only include essential information, conserving space. Bold colors were reserved for icons and small elements to guide the eye, while neutral backgrounds were used to maintain visual hierarchy, with the Terra background on the Daily Wellness Check emphasized to remind users to complete it.

Daily Wellness

Purpose

The Daily Wellness Check allows users to check in with their mental wellness on a daily basis.

Design Process

To ensure the Daily Wellness Check was straightforward and minimized cognitive load, we designed it with just 5 simple steps. The process includes easy-to-press buttons and slider options to streamline user interaction and make daily use effortless.

Onboarding

Purpose

To gather user preferences for a personalized experience.

Design Process

We shortened the onboarding process by splitting the questions into two parts, allowing users to reach the home screen more quickly and finish setting up their profile later. Based on user testing, we also streamlined navigation by eliminating the need for a next button on simple yes/no questions, reducing cognitive load. A back button was added to every page, giving users the option to change their answers easily.

Big Five Personality Test

Purpose

To encourage users to reflect on their personality and mental wellness. The self-report test measures the big five personality traits using the IPIP Big-Five Factor Markers.

Design Process

To reduce cognitive load during the onboarding process, the Big Five test was separated from the initial onboarding setup. After completing the test, users receive insights through numbers, graphs, and descriptive analysis, helping them understand their personality traits based on the test results.

Activity

Purpose

The Activity page shows biomarkers from the user's linked devices and their activity history.

Design Process

To enhance the Activity page, we introduced a daily, weekly, and monthly accordion for viewing metrics over different time periods. User testing revealed that horizontal scrolling was cumbersome, so we added a calendar pop-up for easier date selection.

Goals

Purpose

The My Goals section lets users manage existing goals and set new ones.

Design Process

The My Goals page evolved through several iterations to improve goal management and sorting. We initially used a simple list, then organized goals into "active" and "archived" categories, and further refined it with sections for "Today" and "All Active" to distinguish between daily and recurring goals. We introduced a "Select" button for easier management and added an icon feature for personalization, enhancing user engagement.

Branding

Our goal was to craft a brand that embodies MyAtlas's core values of innovation, vibrancy, and approachability. With these principles at the forefront, and considering the app's mission to support mental wellness, we developed a brand identity that not only reflects MyAtlas's forward-thinking nature but also resonates with users on an emotional level. This identity was designed to tell the story of MyAtlas—a story of empowerment, accessibility, and a commitment to enhancing the well-being of its users.

Color

Given the application's focus on mental health, we aimed for a color palette that is simple, clean, and inviting. We chose mostly warm-toned neutrals with bold accents to create a comforting and welcoming atmosphere.

Type

Our choice of typography for MyAtlas was guided by the app's core values, aiming to create a distinctive yet accessible feel. We selected Fenwick and Quasimoda for their clean, legible design and unique, playful details, making the app both easy to read and visually engaging. By adhering to a clear hierarchy, we ensured the app remains user-friendly and easy to navigate. Additionally, we used Inter for larger letterforms to enhance simplicity and legibility.

Full Brand Book
Wins:
  • Designed a high-fidelity prototype that accurately reflects the product’s user experience and essential functionalities, serving as a realistic model for testing and validation.
  • Developed a cohesive brand identity encompassing logo design, typography, color palette, and visual elements, creating a distinctive and memorable look that aligns with the brand’s values and resonates with the target audience.
  • Built a component library designed to maximize reusability, streamlining design and development efforts and enhancing efficiency.

Wins:

  • Designed a high-fidelity prototype that accurately reflects the product’s user experience and essential functionalities, serving as a realistic model for testing and validation.

  • Developed a cohesive brand identity encompassing logo design, typography, color palette, and visual elements, creating a distinctive and memorable look that aligns with the brand’s values and resonates with the target audience.

  • Built a component library designed to maximize reusability, streamlining design and development efforts and enhancing efficiency.

Next Steps

Acknowledging that the onboarding process for this app is detailed and may request sensitive information, we could include brief explanations alongside each question to clarify how the data will be used within the app. This approach helps build user trust and ensures they feel informed and comfortable sharing their information.

Due to time constraints, we were unable to conduct user testing. However, testing the screens with actual users would help identify any areas in the flow that may require further refinement.