KindMind

UX RESEARCH | UX DESIGN | UI DESIGN | KEY TAKEAWAYS

Overview: Design an iOS-based mobile platform tailored for University of Sydney students to monitor and track their mental well-being during the semester.

Role: UX Researcher, UX/UI Designer

Toolkit: Figma, Balsamiq, Pencil and paper

View Project Prototype

UX Research

Overview

Background

KindMind is an iOS-based mobile platform tailored for university students, enabling them to monitor and track their mental well-being during the semester by:

A daily mental health check-in, structured as a diary entry
Mood tracking over time through a visual calendar
A mood fluctuation graph, allowing users to observe changes and patterns

Research Goals

We want to investigate how university students currently track and manage their mental well-being so that we can design a platform that effectively supports regular self-check-ins and fosters greater mental health awareness.

Methodologies

Competitive analysis
User interviews

Competitive Analysis

User Interviews

Overview

Five students were interviewed: All from the University of Sydney. All interviews have been conducted in person.

Affinity Mapping

Motivation for Tracking

"Keeping track of my feelings helps me stay organised and focused."

"I sometimes feel out of control with my emotions, so tracking helps me feel more stable."

"I like seeing my progress to stay motivated."

"I want to track my mood to better understand my stress patterns."

2. Preferred Features

"A calendar view would be helpful to see mood changes over time."

"A simple mood graph would be great for spotting ups and downs."

"Daily reminders would help me keep up with it."

"I like quick, easy check-ins rather than long questionnaires."

3. Barriers to Consistent Use

"I usually stop tracking after a few days because it feels like a chore."

"Sometimes I'm too busy to remember to track."

"When I'm stressed, I actually avoid tracking because it feels overwhelming."

"Apps that feel too complex make it hard to stay consistent."

4. Privacy Concerns

"I don’t want my data being shared or misused."

"A private, secure diary is essential."

"I’d feel uncomfortable sharing my mental health data, even anonymously."

Research Findings

Need for Simplicity

Quick, easy to use features

Privacy is Essential

Strong data security

Motivation via Tracking

Feel more in control

Barriers to Consistency

Busy schedules and overwhelm

Persona

Emily Chen

21 year old student at the University of Sydney

Age: 21
Education: 3rd-year Biology student
Hobbies: Reading, yoga, volunteering, photography
Personality: Empathetic, self-aware, organised

Skills

Tech saviness

Goal setting

Bio

Emily is a dedicated Biology student. Balancing her academic responsibilities, part-time job, and social life often leads to stress, especially during exams. She wants to stay mindful of her mental health but finds it challenging to keep up with self-care routines during busy times. Emily has tried using various mental wellness apps but struggles to stay consistent due to the apps’ complexity and time demands. She is looking for an intuitive, easy-to-use tool that helps her track her mood without taking too much time.

Goals

Maintain awareness of her mental health, especially during stressful times.
Build resilience and recognise patterns in her emotions to prevent burnout.
Find an efficient tool that supports her routine without adding to her stress.

Frustrations

Inconsistent tracking due to a busy schedule and demanding workload.
Overwhelmed by overly complex or lengthy self-care tasks in existing apps.
Concerned about privacy and data sharing with mental health applications.

UX Design

Prioritisation

Project Goals

While University business goals were mainly focused in gaining as much users as possible for student support, I had a deeper vision of what users wanted and I was able to identify where the two of them aligned.

PROJECT GOALS

BUSINESS GOALS

USER GOALS

Features Roadmap

I created a features roadmap to inform the development timeline, prioritise user needs, and ensure a clear strategy for implementing key functionalities. I categorised features into priority buckets of Must Have, Nice to Have, Surprising Bonus and Can Come Later.

Information Architecture

I created a sitemap by organising primary, secondary, and tertiary navigation. To start, I defined the primary navigation based on the main actions users would likely take: Mood Graph, Mood Calendar, Daily Check-in and Activities. Next, I expanded on each of these sections to develop the secondary and tertiary navigation.

User Flows

I've created user flows for the key user experiences on the application to illustrate how users navigate through the app to achieve their goals effectively. These flows highlight the primary interactions, touch points, and decision-making pathways, ensuring a seamless and intuitive experience for the target audience.

Legend

START /

END

USER DECISION

PAGE

USER INPUT

User Flow #1 - Entering Daily Mood. The user logs their daily mood by completing a brief survey within the app.

Home

Track mood today

Mood Tracker

Happiness Level

Emotions felt

Sleep amount

Exercise amount

Submit

entry

User Flow #2 - Viewing & Editing Mood Entry in Calendar. The user can review their past moods on a calendar and update their entries as needed.

Home

View calendar

Calendar page

View today's entry

Select today's date

Today's entry

Submit edit

Edit note

User Flow #3 - Viewing & Editing Mood Entry in Graph. Users can view a graph of their mood trends over a week, month, or year and update their entries if needed.

Home

View graph

Graph page

Week view

Month view

Year view

View today's entry

Select today's date

Today's entry

Submit edit

Edit note

Wireframes

I began by designing the key screens: Homepage, Mood Tracker, Calendar, Graph, and Activities pages.

Low-fidelity wireframes allowed me to map out each step, screen, and action in greater detail. This process also helped me start evaluating the hierarchy of elements that make up each page.

In the mid-fidelity phase, I refined and improved each screen while envisioning the platform's potential final design. This stage also allowed me to establish layouts and grids to optimise certain screens for a desktop viewport.

UI Design

Brand Identity

First of all, I’ve explored potential naming solutions and marks for my logo. Eventually, I’ve decided to go for a woman meditating, as it symbolises calmness, inner peace, and mental clarity—qualities that resonate with the purpose of the KindMind app.

UI Components

At this stage, I defined the elements for my high-fidelity wireframes. I began with the color palette and typography, then designed buttons, cards, modal templates, and developed a custom set of icons.

Colours

Using these colours evoke a sense of calmness, positivity, and balance, which are essential elements in promoting mental well-being.

PRIMARY

SECONDARY

BACKGROUND

#517F8D

#75A1AF

#BDD2D9

#EDDE89

#BAD689

#63AE75

#2F2F2F

#0B131A

#FFFFFF

Typography

Buttons

Input

Headline 1

Headline 2

Headline 3

Body

Subtitle

High-fidelity key screens

Prototype

Key Takeaways

Challenge

Balancing simplicity with functionality for a stress-free user experience.
Ensuring strong privacy measures for sensitive mental health data.
Engaging university students consistently with the app's features.

Lessons Learned

Aligning user, project, and business goals is crucial for effective design.
User feedback guided us to prioritise privacy, simplicity, and usability.
The value of a well-structured UI library built with reusable components, variants, and frames.