Me - Know Yourself

A redesign project for a self-help coaching
and mood journaling app.

View prototype
View prototype
Title mockup image showing the onboarding screen and home screen of the 'Me' app.
Year

2023 (3 weeks)

Tools

Figma

Team

Solo

Role

UX/UI Designer

Overview

As a take home design challenge, I redesigned the mental health app “Me” to explore how I could help reduce the competitive disadvantages and increase engagement through addressing user feedback.

Mood and thoughts are deeply personal. For many, journaling is a form of expression. For others, it's a pathway to clarity and well-being. "Me" is a comprehensive self-help coach and mood journal designed to support mental health, self-reflection, and personal development.

Redesign Process & Intentions

By following a clear design process, I was able to iteratively test and refine ideas, ensuring the final product met user expectations. Each phase was driven by key questions to maintain focus and purpose.

Flowchart of the design process for the 'Me' app redesign, illustrating each phase: problem identification, user research, defining objectives, initial design, concept testing, iteration, and final design, along with corresponding questions guiding each step.

Problem

“Me [is] a mobile app that helps people understand their minds in order to increase mental wellbeing. 
[...] It is built to be an engaging app that makes self reflection fun and interesting.”
- Yannick Schmid (Co-Founder)

The app is facing significant challenges that hinder user satisfaction and also do not reflect the mission statement of the brand.

  1. Poor Visual Hierarchy: Important elements do not stand out due to a poor choices in contrast or size differentiation.
  2. Visually Unappealing Design: The app's visual design is unattractive and fails to engage users.
  3. Unclear Instructions: Labels and instructions are unclear, leading to user confusion.

User Interviews

What was I trying to find out?

  1. What do users expect from a mental health app?
  2. What do users like and dislike about the current flow and appearance of the app?
  3. How could the app be engaging and encourage users to use it regularly in order to keep track of their mental wellness?
List of user needs, wants, desires, and opportunities identified from interviews, including functional requirements, design preferences, emotional goals, and potential improvements for the 'Me' app.

Definition of Objectives

  1. Determine Hierarchy: Make important elements stand out clearly and guide users through the app seamlessly.
  2. Modernise Visual Design: Update the visual design to align with current trends and brand identity.
  3. Improve Navigation: Provide clear, concise, and easily understandable labels and instructions to reduce user confusion and improve task completion rates.

Design

In this first stage I mainly focussed on visual design, I was determined to create a new visual identity of the brand that was in alignment with the target group (age: 18-35).

The goal was to create high-fidelity mockups for concept testing in oder to gauge whether I was moving in the right direction and addressing user needs, specifically on the home screen.

Five screens of the initial visual design for the 'Me' app, showcasing the redesigned home screen, emotion log, navigation menu, list of lessons, and a specific lesson screen.

Concept Testing

Why did I test this early in the process?

By validating initial ideas and understanding user needs, I aimed to ensure that the design direction aligns with user expectations, ultimately saving time and resources by identifying potential issues early in the process.

What was I trying to find out?

  1. On first impression, is this recognisable to you as the Me App?
  2. Does the new home screen feel easy to navigate?
  3. Does anything feel complicated or overwhelming?
Concept test debrief summary, highlighting what went well during testing, such as improved navigation and visual appeal, alongside opportunities for further improvement, like reducing clutter and enhancing emotional connection.

Iterations

After concept testing, I moved into the iteration phase, where I refined my designs based on user feedback. This phase focused on building an creating an emotional connection to the users, and making the design accessible. Through cycles of designing, testing, and refining, I ensured that each version improved, aligning the product more closely with user needs.

Illustrations

Humans are visual creatures. When illustrations are relevant to the accompanying content and add value to the user experience.

Before and after comparison of the home screen of the 'Me' app, showing the initial design without illustrations and the redesigned version featuring engaging illustrations related to the lessons displayed.

Simplicity

Simple interfaces are generally more accessible to users, as they often require less interaction complexity and cognitive effort.

Before and after view of the navigation menu in the 'Me' app, highlighting the initial cluttered design and the updated version with simpler, more intuitive buttons that are clearly distinguishable and not obscured by text.

Readability

Some screens needed higher contrast between text and background to improve readability for the users.

Comparison of the list of lessons in the 'Me' app, showing the original design with an ombre background and the redesigned version with a clean layout and illustrations placed beside the text for enhanced readability.

High-Fidelity Design

Integrated visual elements such as colors, typography, and imagery into the wireframes to create a polished prototype that accurately reflects the brand identity and user interface.

Here are some selected designs:

Before and after comparison of the home screen of the 'Me' app, showing the initial design without illustrations and the redesigned version featuring engaging illustrations related to the lessons displayed.
New High-Fidelity Screens of Redesign Project

Final Prototype

This interactive prototype allows you to explore the "Me" app's design and features. Click through to experience the user journey and functionality firsthand.

Conclusion

By addressing the key issues of visual appeal, improving navigation, and creating a more engaging experience, the final result tested to have met and exceeded user expectations.

I personally learned a lot in embracing an iterative design process where designs are continuously refined based on user feedback and testing results.

My biggest take home was that it is imperative to properly prepare user research questions that are focused on the scope of the project while leaving room for further ideas instead of generalising the questions.