SoulSync
Balance

SoulSync
Balance

SoulSync
Balance

Health Tracking App with AI Generated Insights

Health Tracking App with AI Generated Insights

Process: Ideation, Prototyping, Animations and Interactions

Process: Ideation, Prototyping, Animations and Interactions

Tools: Figma

Tools: Figma

The Problem

Design Inconsistencies and Lack of Visual Hierarchy

The initial design of the SoulSync Balance app featured a limited and inconsistent colour scheme with a cluttered interface that overwhelmed users. The app’s lack of a cohesive design language and basic navigation made it difficult for users to engage effectively, detracting from the overall user experience and usability. This resulted in a challenging interface that hindered routine use for comprehensive health tracking.

The initial design of the SoulSync Balance app featured a limited and inconsistent colour scheme with a cluttered interface that overwhelmed users. The app’s lack of a cohesive design language and basic navigation made it difficult for users to engage effectively, detracting from the overall user experience and usability. This resulted in a challenging interface that hindered routine use for comprehensive health tracking.

The initial design of the SoulSync Balance app featured a limited and inconsistent colour scheme with a cluttered interface that overwhelmed users. The app’s lack of a cohesive design language and basic navigation made it difficult for users to engage effectively, detracting from the overall user experience and usability. This resulted in a challenging interface that hindered routine use for comprehensive health tracking.

The Solution

Transforming User Engagement

Recognising the app’s design shortcomings, my role grew as I led a major design overhaul to boost functionality and user engagement. I implemented a lean design system to ensure consistency, scalability, and cohesion across the app. Additionally, I introduced fundamental design principles to improve layout, interaction, and visual hierarchy, making the app more intuitive and reducing user frustration. I also expanded the user interface, designing over 40 screens to enhance detailed health tracking across various user flows, from setup to daily use and long-term trend analysis.

User Research: Identifying Pain Points

Understanding the limitations with the current app interface.

1

Lack of Coherence

The app's cluttered interface with its scattered features and lack of unified design overwhelmed users, making navigation confusing and the health tracking experience inconsistent and frustrating.

2

Over Stimulation

The app's vibrant color scheme, meant to be engaging, actually muddled the visual hierarchy, making it difficult to distinguish important elements from less critical information. The bold colors were more distracting than helpful, reducing the app's overall usability.

3

Basic Navigation

The basic navigation failed to support the app's extensive features. The navigation tools were not intuitive, complicating the process of switching between various health metrics and tools.

4

Increased Learning Curve

The app could not accommodate its complex features, significantly increasing the learning curve. This made it challenging to efficiently access different functionalities and truly leverage the app’s capabilities.

1

Lack of Coherence

The app's cluttered interface with its scattered features and lack of unified design overwhelmed users, making navigation confusing and the health tracking experience inconsistent and frustrating.

2

Over Stimulation

The app's vibrant color scheme, meant to be engaging, actually muddled the visual hierarchy, making it difficult to distinguish important elements from less critical information. The bold colors were more distracting than helpful, reducing the app's overall usability.

3

Basic Navigation

The basic navigation failed to support the app's extensive features. The navigation tools were not intuitive, complicating the process of switching between various health metrics and tools.

4

Increased Learning Curve

The app could not accommodate its complex features, significantly increasing the learning curve. This made it challenging to efficiently access different functionalities and truly leverage the app’s capabilities.

1

Lack of Coherence

The app's cluttered interface with its scattered features and lack of unified design overwhelmed users, making navigation confusing and the health tracking experience inconsistent and frustrating.

2

Over Stimulation

The app's vibrant color scheme, meant to be engaging, actually muddled the visual hierarchy, making it difficult to distinguish important elements from less critical information. The bold colors were more distracting than helpful, reducing the app's overall usability.

3

Basic Navigation

The basic navigation failed to support the app's extensive features. The navigation tools were not intuitive, complicating the process of switching between various health metrics and tools.

4

Increased Learning Curve

The app could not accommodate its complex features, significantly increasing the learning curve. This made it challenging to efficiently access different functionalities and truly leverage the app’s capabilities.

1

Starting the Design

1

Starting the Design

1

Starting the Design

Initial Information Architecture structuring key modules like Dashboard, Analysis, Sessions, Experiments, Behavioral Tracking, and Profile, to optimize user flows and enhance navigational efficiency across the platform.

The app's core functionality integrates with a heart rate monitor to effectively display user health statistics through intuitive visuals like graphs and interactive animations. I initially developed paper wireframes to refine these displays and the navigation structure, ensuring crucial data like LF% was easily accessible and understandable. This foundational work helped create a user-friendly app that provides a seamless experience from device connection to detailed data interaction.

The app's core functionality integrates with a heart rate monitor to effectively display user health statistics through intuitive visuals like graphs and interactive animations. I initially developed paper wireframes to refine these displays and the navigation structure, ensuring crucial data like LF% was easily accessible and understandable. This foundational work helped create a user-friendly app that provides a seamless experience from device connection to detailed data interaction.

The app's core functionality integrates with a heart rate monitor to effectively display user health statistics through intuitive visuals like graphs and interactive animations. I initially developed paper wireframes to refine these displays and the navigation structure, ensuring crucial data like LF% was easily accessible and understandable. This foundational work helped create a user-friendly app that provides a seamless experience from device connection to detailed data interaction.

Paper Wireframes

Paper Wireframes

Paper Wireframes

2

Refining the Design

2

Refining the Design

2

Refining the Design

SoulSync Balance is designed to feel modern with professional and calm colours. The colours dynamically shift in night mode, adding a subtle touch of adaptability. I chose Inter as the main font across the app for professionalism and a polished look. A palette of blues and teals underpins the app's design, embodying calm and relaxation. These colours are not only pleasing to the eye but are also often associated with tranquility and stability, making them ideal for an app focused on mental well-being.

SoulSync Balance is designed to feel modern with professional and calm colours. The colours dynamically shift in night mode, adding a subtle touch of adaptability. I chose Inter as the main font across the app for professionalism and a polished look. A palette of blues and teals underpins the app's design, embodying calm and relaxation. These colours are not only pleasing to the eye but are also often associated with tranquility and stability, making them ideal for an app focused on mental well-being.

Animations and Mico-Interactions

Objective: To develop engaging and intuitive animations that seamlessly integrate with the app’s design, enhancing usability and specifically improving the breathing countdown and pacer activities.

Objective: To develop engaging and intuitive animations that seamlessly integrate with the app’s design, enhancing usability and specifically improving the breathing countdown and pacer activities.

Box Breathing Animation: Directly mirrored the box breathing technique to visually guide users through the exercise, enhancing understanding and engagement.

Box Breathing Animation: Directly mirrored the box breathing technique to visually guide users through the exercise, enhancing understanding and engagement.

Box Breathing Animation: Directly mirrored the box breathing technique to visually guide users through the exercise, enhancing understanding and engagement.

Box Breathing Animation: Directly mirrored the box breathing technique to visually guide users through the exercise, enhancing understanding and engagement.

Dynamic Animations: Incorporated growing, expanding, and pulsating animations to visually represent inhaling, exhaling, and breath-holding phases.

Dynamic Animations: Incorporated growing, expanding, and pulsating animations to visually represent inhaling, exhaling, and breath-holding phases.

Dynamic Animations: Incorporated growing, expanding, and pulsating animations to visually represent inhaling, exhaling, and breath-holding phases.

Dynamic Animations: Incorporated growing, expanding, and pulsating animations to visually represent inhaling, exhaling, and breath-holding phases.

I experimented with various colors to create a calming and relaxing environment aimed at stabilizing heart rate (HR) and heart rate variability (HRV) levels.

I experimented with various colors to create a calming and relaxing environment aimed at stabilizing heart rate (HR) and heart rate variability (HRV) levels.

I experimented with various colors to create a calming and relaxing environment aimed at stabilizing heart rate (HR) and heart rate variability (HRV) levels.

I experimented with various colors to create a calming and relaxing environment aimed at stabilizing heart rate (HR) and heart rate variability (HRV) levels.

Creating micro-interactions to maintain the user's focus and continuity as they moved throughout different sections of the app.

Creating micro-interactions to maintain the user's focus and continuity as they moved throughout different sections of the app.

Creating micro-interactions to maintain the user's focus and continuity as they moved throughout different sections of the app.

Creating micro-interactions to maintain the user's focus and continuity as they moved throughout different sections of the app.

More micro-animations implemented to ensure fluidity throughout the user journey. To minimize wait times and enrich user engagement, I designed loading states that are visually dynamic yet calming.

More micro-animations implemented to ensure fluidity throughout the user journey. To minimize wait times and enrich user engagement, I designed loading states that are visually dynamic yet calming.

More micro-animations implemented to ensure fluidity throughout the user journey. To minimize wait times and enrich user engagement, I designed loading states that are visually dynamic yet calming.

More micro-animations implemented to ensure fluidity throughout the user journey. To minimize wait times and enrich user engagement, I designed loading states that are visually dynamic yet calming.

3

Revisions and Improvements

3

Revisions and Improvements

3

Revisions and Improvements

3

Revisions and Improvements

1

A colour-coded live feed display—green indicating calm and red indicating stress—complemented by dynamic tooltips that guide users to continue breathing or reduce stress based on their current state.

Before

After

Before

After

2

Number of breathing cycles remaining displayed.

3

A more detailed view of past sessions with mean HR and HRV stats in each session along with time, date and duration of session.

Before

After

App Icon

I iterated on designs that creatively merged the elements of a heart and a brain, symbolising the harmonious balance between emotional health and mental clarity, while also incorporating additional vector elements that evoke peace, security, and tranquility.

Final App Icon

Final Design

Real-time feedback

Post revisions: A real-time visual feedback system. Designed to instantly inform users about their current emotional state, encouraging immediate awareness and mindfulness. Promotes effective stress management by suggesting actionable steps in critical moments.

Custom Time Period and Detailed Analysis

This feature supports a greater depth of engagement by letting users explore their progress in detail. For the interactive calendar, I crafted a design that allows users to navigate smoothly through past entries and view detailed analysis of any session.

Take Aways

Take Aways

Take Aways

Hover to reveal!

Impact

Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.

Impact

Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.

Impact

Impact

What I Learned

What I Learned

I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.

What I Learned

I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.

What I Learned

Next Steps

Now that the core UI design for the health tracking app is complete, the next phase focuses on continuously improving the user experience through strategic iteration and user-centered refinement. We'll conduct usability testing sessions with real users to observe how they interact with the app in real scenarios. Gathering qualitative and quantitative feedback will help us identify areas of friction, confusing interactions, or gaps that weren’t apparent during initial design. As the app grows, refining the onboarding flow will be essential. Clearer tutorials, contextual tooltips, and personalized introductions can help new users feel confident navigating the app and understanding key features. Future updates may include customization options based on user goals, such as tailoring insights, reminders, and dashboard components to reflect individual health objectives.

View More From My Portfolio

Isabella Moreau

SmartPocket

Isabella Moreau

SmartPocket

Budgeting App and Website

Isabella Moreau

SmartPocket

Budgeting App and Website

Isabella Moreau

SmartPocket

Isabella Moreau

Mealify

Isabella Moreau

Mealify

AI-Powered Meal Planning App

Isabella Moreau

Mealify

AI-Powered Meal Planning App

Isabella Moreau

Mealify

Pooja Sambare

Pooja Sambare

Pooja Sambare

Pooja Sambare