* Client: Side Project

* Role: UX/UI Designer

* Team: Solo

* Timeline: 3 weeks (spread across 6 months)

## **Project Overview**

Mood and thoughts are deeply personal.  For most, mood tracking and journaling are pathways 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.

As a take home design challenge, I redesigned the app “Me” to explore how I could learn to increase engagement through addressing user feedback.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2Fbf20dd7c-5164-4354-91f2-2e7a7c749cba.jpg?alt=media&token=92000809-c908-415b-b95d-af85eecaa6d4","id":"bf20dd7c-5164-4354-91f2-2e7a7c749cba","width":5760,"height":4096,"filename":"Hero_Imageee.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **>>> [Link to Prototype](https://www.figma.com/proto/tV3lodIp1Vvok8pIiZWPBZ/Me-App-Prototype?node-id=1-7815&t=MU3IhYRpe3vRWsEK-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=1%3A7745&show-proto-sidebar=1) <<<**

## **Current Interface (Week 1)**

In order to understand the next steps, here are a couple of screens of the current app:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2Faf8e2552-0a0a-46c7-a37a-4d416803f574.jpg?alt=media&token=f6ab0e4d-11bb-407b-b824-cc7140e49969","id":"af8e2552-0a0a-46c7-a37a-4d416803f574","width":5760,"height":4096,"filename":"Current Interface-4.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Redesign Process**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2F401b5823-fe9d-4657-9467-8d645d2b2a74.jpg?alt=media&token=6c4f9dde-89df-4c00-be2e-48a95687f578","id":"401b5823-fe9d-4657-9467-8d645d2b2a74","width":7008,"height":992,"filename":"Design Process-2.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Problem**

The app is facing significant challenges that hinder its performance and user satisfaction. These challenges include:

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 Research**

### **Interview Research Goals:**

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?

### **User Interview Debrief:**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2Fb3c29fe8-a397-48be-808e-101eecd5c2cb.jpg?alt=media&token=f2f53837-33b7-404f-b060-cbe5d20b2a51","id":"b3c29fe8-a397-48be-808e-101eecd5c2cb","width":7008,"height":4704,"filename":"NWDOs-3.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **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.

## **User Flow**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2F41ad829e-f7db-443f-95f6-cddf4b8bf83d.jpg?alt=media&token=30eaf6fe-98cc-4019-b8ca-47fe019d467b","id":"41ad829e-f7db-443f-95f6-cddf4b8bf83d","width":7008,"height":1696,"filename":"User Flow-3.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **First Design**

I designed the first mockup screens believing to have fulfilled the user's needs, that I gathered and objectives that I had set. The goal was to create high-fidelity mockup so that I could conduct successful user tests.\
\
These are a few screens from the initial design:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2F942dbaef-929e-492f-96f5-8c6246cd5989.jpg?alt=media&token=5852e932-4bc6-46f8-ab0b-c913965b9be3","id":"942dbaef-929e-492f-96f5-8c6246cd5989","width":5760,"height":4096,"filename":"First Design-2.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **User Testing (Week 2 & 3)**

I then conducted multiple usability tests with my mockups to gather user feedback and refine the design.

### **User Test Questions:**

* On first impression, is this recognisable to you as the Me App?

* Does the new home screen feel easy to navigate?

* Does anything feel complicated or overwhelming?

### **User Test Debrief:**

The users found two main issues with the new design:

1. Too cluttered with too many elements & colours, making it hard to focus on key functions.

2. Lacking an emotional connection to the app.

## **Iterations (Challenges)**

The initial user research was not well thought out. The feedback that was in the "needs" category were topics that I had no influence over, making it difficult to prioritise changes.

The user test questions resulted in a better understanding of the needs, and essentially redefined them for the scope of this project.

This resulted in multiple rounds of iterations:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2F01b57de4-f825-4e7d-b2f0-f4fb5ad414b4.jpg?alt=media&token=9bf1ad02-9af9-4dc5-9b17-7363b7030b06","id":"01b57de4-f825-4e7d-b2f0-f4fb5ad414b4","width":5760,"height":4096,"filename":"Iteration Home Screen-2.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **Final Design**

## **>>> [Link to Prototype](https://www.figma.com/proto/tV3lodIp1Vvok8pIiZWPBZ/Me-App-Prototype?node-id=1-7815&t=MU3IhYRpe3vRWsEK-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=1%3A7745&show-proto-sidebar=1) <<<**

### **Onboarding & Login:**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2F4dcb1123-f8e3-4859-8672-7e1d2eefb2a9.jpg?alt=media&token=3c3f47ec-854f-426d-b2bc-7be31b7fd681","id":"4dcb1123-f8e3-4859-8672-7e1d2eefb2a9","width":5500,"height":4096,"filename":"O&L_11.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2F188126ad-ce2d-4a25-bb34-c9a2fb7df830.jpg?alt=media&token=4b3c10d1-8ebf-472a-ae56-bb6776aea293","id":"188126ad-ce2d-4a25-bb34-c9a2fb7df830","width":5260,"height":4096,"filename":"O&L_22.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2F270725f4-ff23-4e70-8cab-f13f08c4643a.jpg?alt=media&token=441f8d04-8c8f-4d25-8635-829b353c16f4","id":"270725f4-ff23-4e70-8cab-f13f08c4643a","width":3596,"height":4096,"filename":"O&L_33.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## 

### **Home, Log Emotions & Mindspace:**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2Feb4934be-52df-47ef-b412-7938ed130e48.jpg?alt=media&token=5c02e996-f7df-4bd3-8a66-cffc68b61ae7","id":"eb4934be-52df-47ef-b412-7938ed130e48","width":5500,"height":4096,"filename":"Rest_11.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2F0072eb27-e4c8-4a19-9d1d-95965adab9b2.jpg?alt=media&token=03de753e-6ada-4f24-825b-4c97e0203a87","id":"0072eb27-e4c8-4a19-9d1d-95965adab9b2","width":5260,"height":4096,"filename":"Rest_22.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2Fca75a8d9-28aa-4d73-88f8-b9593e930771.jpg?alt=media&token=72b430c1-60ae-4ba2-bb90-61144ca0c8f2","id":"ca75a8d9-28aa-4d73-88f8-b9593e930771","width":1744,"height":4096,"filename":"Rest_33.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **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.

### **Before & After:**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2Ff254b7e0-e52b-47f1-94bc-c03dec842b28.jpg?alt=media&token=c2fef935-9cbc-4725-aad7-190d547be25d","id":"f254b7e0-e52b-47f1-94bc-c03dec842b28","width":5760,"height":4096,"filename":"Before & After-2.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2F2ae41aa3-e99e-4fe9-9dda-16d4cac08e8e.jpg?alt=media&token=c0b7733c-85ad-4491-87da-88bae7b33521","id":"2ae41aa3-e99e-4fe9-9dda-16d4cac08e8e","width":5760,"height":4096,"filename":"Before & After_2.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FAqKKFPzP1mfNw3T2OBQsXhvlaG13%2Fme-app-case-study%2Fc5263d3b-44a6-43d6-a21b-474063dfae13.jpg?alt=media&token=2fea9dd1-4408-43d7-b5ed-e790d6ba1200","id":"c5263d3b-44a6-43d6-a21b-474063dfae13","width":5760,"height":4096,"filename":"Before & After_3.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## **>>> [Link to Prototype](https://www.figma.com/proto/tV3lodIp1Vvok8pIiZWPBZ/Me-App-Prototype?node-id=1-7815&t=MU3IhYRpe3vRWsEK-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=1%3A7745&show-proto-sidebar=1) <<<**

Me App: A Redesign Case Study

UX/UI Designer

Google Foundations of User Experience (UX) Design

Design Psychology: Master the Art and Science of UX Design

Webflow 101

Development of visual design, branding, and UX initiatives for the SaaS product to ensure a consistent brand identity and intuitive user experience.

Erica Wangari

2024