Harmoni

Redesigning an app to help people manage negative emotions and stress responses.

Role:

UX Design Freelance

Work:

Redesign app

Duration:

May - ongoing

Tools:

Figma | Miro | Lookback

Activities:

This project is somewhat of a passion project as I got to work on an app that aims to help people live healthier and happier lives.

Our mental and physical wellness is deeply connected to our emotions. Harmoni aims to help users understand how emotions impact our lives, how important it is to become aware of our behavioural patterns, how to overcome negative emotions and physical discomfort.

Let me take you through the project ↓

Project Overview

The challenge for this project was clear: redesign the app to deliver an intuitive, user-centred experience.

My focus was to enhance the user journey, improve overall usability, as well as the look and feel of the app.

Understanding the Landscape

To begin, I immersed myself in the app's current design and structure.

I mapped out the current Information Architecture, getting an overview of the content and visualising the user journey to pinpoint any flow disruptions.
This groundwork helped me understand how users were currently navigating the app—and where they might be encountering roadblocks. Here are a few things I uncovered:

The user journey to most of the content consisted of 3 taps or more.
Flat structure with little prioritisation.
Content was duplicated multiple times.

My focus was to build an intuitive information architecture, prioritising content based on what users want and need.

I coordinated meetings with team members to clarify our core use cases and overarching objectives.

This collaboration provided great insight into priority features, helping me align content hierarchy and restructure the app's layout with clear, goal-oriented priorities.

Competitor Analysis & Heuristic Evaluation

With a solid understanding of our objectives, I started analysing competitors.

Through competitor analysis, I identified industry best practices that would inspire our new approach. Key findings included:

Personalised Content: Tailoring content based on use patterns.
Information and Clarity: Offering users information about each feature, such as estimated time to complete, for quick value assessment.
Actionable CTAs: CTA buttons with explanatory text to guide users effortlessly.

These insights provided a benchmark and foundation for the app's redesigned framework.

I conducted a heuristic evaluation to analyse the app’s usability at a granular level.

This exercise highlighted areas that needed refinement, particularly:

Consistency and Standards: Standardising design elements and adhering to best practices to create a cohesive visual language.
Flexibility and Efficiency of Use: Refining user journeys for clarity and ease of navigation.
User Control and Freedom: Establishing intuitive navigation paths to improve overall accessibility.

Validating Through User Testing

To validate hypotheses that emerged through research, I led a round of user testing.

This enabled me to gather direct feedback on usability and visual clarity. Notable insights included:

Text Readability: Users flagged concerns around text length and colour contrast.
Information and Guidance Deficits: Users expressed confusion over initial steps, indicating a need for clearer guidance and instructional cues.

“Hvis folk skal bruke denne appen tror jeg de skal ha veldig god tid. For meg så virker det som mye skrift”

“If people are going to use this app I think they will need a lot of time. This seems like a lot of text to me”

"Savner å se hva jeg skal lære om, skjønner hva kurset er om, hva denne intro delen er om”

”I’d want to see what I’ll learn, to understand what this course is about, what this intro section is about”

“

“Jeg må innrømme, jeg kommer til å glemme alle disse skrittene før jeg har kommet meg igjennom dem”

“I have to admit, I’ll forget all these steps before I manage to complete them all”

Key Focus Areas

Synthesising insights from research and testing, I defined five primary areas for improvement:

Text Readability: Ensuring optimal readability through balanced colour contrast and font size.
Information and Guidance: Providing a clear starting point, instructional cues and information about each feature.
Consistent Design and Navigation: Establishing a cohesive, user-friendly structure across all screens and standardising design elements.
Instructive CTAs: Incorporating actionable and informative CTAs to guide users.
Content Structure and Personalisation: Restructuring and customising content to align with user needs.

Designing the Solution

With these objectives in mind, I crafted a new Information Architecture, refining the content layout to support intuitive exploration and quick accessibility.

To map out seamless user journeys, I developed a detailed Flow Diagram that charted each screen state and action.

Building the Prototype

Once the structure was solidified, I sketched out wireframes, iterating on layout possibilities that best matched our design goals. These wireframes then evolved into a high-fidelity, interactive prototype in Figma.

The copy explaining the feature was moved out of the textbox, to not disappear when the user started writing in the textbox.
Redesigned screens with more text to solid coloured background. This would ensure good readability through contrast.
The courses were edited into chapters, resulting in shorter screens and less overwhelming text.

Below are examples of how I approached the 5 key areas of focus

1. Text Readability

2. Information and Guidance

Copy added to explain the tasks and exercises to inform user of purpose, content and time to complete, as well as consistent navigation for ease of use.
A screen was added to the user journey, providing an overview of all the chapters, with a small description and time to complete.

Consistent navigation and design elements were added for ease og use and accessibility, where before there was inconsistency or lack of navigation elements.
Progress indicators were added for visibility, informing the user of how many screens/steps are left

3. Consistent Design and Navigation

Copy on CTA’s were modified and made more relevant, additionally they were placed consistently on all screens for ease.
Explanatory text on CTA’s for exercises was added for clarity and to inform the user of what is to come

4. instructive CTA’s

Added a feature for users to save a course chapter or exercise as “favourite”, any favourites will show up on the home screen. Additionally these is a separate screen with all saved favourites as the home screen has a limit of three.
A greeting including the username was added to the home screen for personalisation
The 12 step course was restructured into chapters, providing a better overview of content and making it less overwhelming

5. Content Structure and Personalisation

Want to see more?
Click here to open file in Figma

Evaluation

This project allowed me to blend strategic planning with hands-on design, ultimately creating an experience that’s not only visually cohesive but purposefully centred around the user.

This is an ongoing project where testing and iterations are still taking place.