BlueMind

Created the brand identity and design system for a student mental health app

3 mobile device mockups of bluemind app
2 mobile device mockups of bluemind app

  • COURSE

    Visual & Graphic Design

  • ROLE

    UI & Visual Designer

  • DURATION

    3 Weeks

BlueMind

Created the brand identity and design system for a student mental health app

3 mobile device mockups of bluemind app

  • COURSE

    Visual & Graphic Design

  • ROLE

    UI & Visual Designer

  • DURATION

    3 Weeks

Project brief

In my Visual & Graphic Design class, we were tasked with designing a Mood Tracker app for the University of Michigan Well-Being Collective for students to track their emotions and receive personalized recommendations. Since this project was focused on visual design, I focused on the design system and stlying

In my Visual & Graphic Design class, we were tasked with designing a Mood Tracker app for the University of Michigan Well-Being Collective for students to track their emotions and receive personalized recommendations. Since this project was focused on visual design, I focused on the design system and stlying

My role and contribution

I was responsible for designing:

I was responsible for designing:

  • Visual concept

  • Logo and its variants

  • Design system

  • Wireframes

  • Visual concept

  • Logo and its variants

  • Design system

  • Wireframes

Logo exploration

Based on the app's mental health focus, I brainstormed logo marks that are symbolic of objects and patterns found in nature, mirroring the app's intent of wellness

Based on the app's mental health focus, I brainstormed logo marks that are symbolic of objects and patterns found in nature, mirroring the app's intent of wellness

Initial Bluemind logo sketches symbolic of mental health

Identity guidelines

I created brand identity guidelines to define the visual concept. I focused on color story, logo variations, scalability, and apparel renditions

I created brand identity guidelines to define the visual concept. I focused on color story, logo variations, scalability, and apparel renditions

Final logo are 2 leaves with primary colors of teal, white, and black
Bluemind logo with 0.25 inches of free space on all sides
Bluemind logo against a shirt prototype with black and white logo color variations

Design system

I then created a design system of core atomic and molecular components. For layout, I used a 4-column grid for mobile design with 16px gutters and 24px margins to maintain visual consistency across all screens

I then created a design system of core atomic and molecular components. For layout, I used a 4-column grid for mobile design with 16px gutters and 24px margins to maintain visual consistency across all screens

Typography

Type system of Bluemind including headings, body, and button text

Color palette

#33B1B1

#FEFEFA

#1A1A1A

#D3EEEE

#F2F4F2

#879591

Core components

Collection of core UI components such as cards, buttons, and input fields

Wireframes

Information architecture

The IA of the app was pre-defined and required in the client brief. BlueMind uses a feature-based information architecture that is divided into 4 main categories, each representing a distinct capability

The IA of the app was pre-defined and required in the client brief. BlueMind uses a feature-based information architecture that is divided into 4 main categories, each representing a distinct capability

Mood tracking

Users record their mood and emotional state throughout the day. Emotional identification builds contextual understanding and self-awareness

Users record their mood and emotional state throughout the day. Emotional identification builds contextual understanding and self-awareness

3 screens of Bluemind's sign in page, mood tracking quiz, and results

Mood insights & recommendations

Users receive personalized suggestions based on mood tracking data to help them feel better and manage their stress effectively

Users receive personalized suggestions based on mood tracking data to help them feel better and manage their stress effectively

3 screens of Bluemind's homepage, report page, and learn page

Learnings

Following this project, I learned 3 valuable lessons

Visual balance

Applying the 60-30-10 color rule taught be how to create visually balanced and accessible interfaces

Root decisions in principles

Creating guidelines required me to ground design justification in core principles and theory

Structure in layout

Being my first visual design class, I gained a deeper understanding of grid systems for layout and rhythm

Back to top

More case studies

Check out another project

3 mobile device mockups of bookly app

Bivouac

Led redesign of an outdoor retailer, building a 60+ component design system with 100+ variables for developer handoff

UX Design

Design Systems

UI design panel displaying buttons, text, images, and chips

Accessible Design System

Increased WCAG 2.2 AA compliance of 12 most used components by 25%

Design Systems

A11y