My Atlas
My Atlas is an innovative digital health app aimed to provide personalized mental wellness support to college students. By passively monitoring biomarkers collected from wearable health devices, it provides users with their statistics and wellness tips.
Process
As a Design Lead at Generate Product Development, I led a team of designers through the UI design process from start to finish. My design process for My Atlas was efficient yet thorough. I was tasked by the client with designing an onboarding flow, home page, user profile, and a brand identity all from the ground up in one semester. While leading all design decisions, I also directed weekly critiques and educated the team on technical skills. It was my goal as the Design Lead to maximize efficiency without cutting any corners in our process, so I did this with a component based design system.
Research & User Personas
We started off with research, moodboarding, benchmarking other applications, and creating user personas. Building these personas allowed us to get a better idea of the needs and motivations of the user. We established that the My Atlas user is likely a college-aged young adult who is interested in their personal wellbeing. They are likely tech-savvy and interested in utilizing digital solutions. They may be familiar or unfamiliar with mental health services and their prior knowledge about wellness and mental healthcare can vary.
Color Palette
The color palette for My Atlas is bold and uplifting yet clean. It was important to us that the brand identity felt not only simple and modern, but warm and welcoming, so we chose mostly warm-toned neutrals with the occasional pop of bold color.
Throughout the UI, we used the color palette strategically in order to enhance the user experience. The non-neutral colors are reserved for accents to create a visual hierarchy. The darker colors are never be used as backgrounds, with the exception of the daily wellness check notification.
Low-Fidelity Wires
Typography
The typography for My Atlas was chosen with the intention of bringing a distinctive feel to the application. Fenwick and Quasimoda are clean-looking and easy to read, yet funky with unique details on some of the letterforms. The type styles were selected with hierarchy in mind so that the app is easy to understand and navigate. We chose to use Inter for only the larger letterforms to maximize simplicity and legibility.
Typefaces + Usage
Final UI
Brand Book
