SoulSync Balance
Health tracking app with animations
Health tracking app with animations
Disclaimer: The project name has been changed in this document to protect the confidentiality of both the company and the client involved.
Disclaimer: The project name has been changed in this document to protect the confidentiality of both the company and the client involved.
Process
Process
Ideation, Prototyping, Animations, Interactions
Ideation,
Animations,
Interactions
Type
Type
Health Tracking App
Health
Tracking App
My Role
My Role
UX/UI Design
UX/UI Design
Tools
Tools
Figma
Figma
Project Overview
Revitalising User Experience through UI Trasnformation
SoulSync Balance stands as a prime example of my role as a UI Designer in transforming and elevating user interactions within a health tracking app. The early version showcased an array of metrics, a lively color scheme, and basic navigation. While functional, it lacked the coherence and streamlined flow essential for optimal user engagement.
By integrating thoughtful UI design principles, the transformation catered to both the aesthetic and functional expectations of the user base. The final design encourages prolonged engagement due to its ease of use and visually engaging interface that aligns with the modern user's expectations for sophisticated technology.
SoulSync Balance stands as a prime example of my role as a UI Designer in transforming and elevating user interactions within a health tracking app. The early version showcased an array of metrics, a lively color scheme, and basic navigation. While functional, it lacked the coherence and streamlined flow essential for optimal user engagement.
40+
40+
Screens
Screens
6
6
Main User Flows
Main User
Flows
100%
100%
End-to-end UI Design
End-to-end
UI Design
By integrating thoughtful UI design principles, the transformation catered to both the aesthetic and functional expectations of the user base. The final design encourages prolonged engagement due to its ease of use and visually engaging interface that aligns with the modern user's expectations for sophisticated technology.
The Problem
Design Inconsistencies & Lack of Visual Hierarchy
Design Inconsistencies & Lack of Visual Hierarchy
In the initial design phase of the SoulSync Balance app, the interface included only a few screens, which, while functional, lacked the depth required for comprehensive health tracking. The initial app showcased an array of metrics and featured a lively yet inconsistent colour scheme. It was evident that this early version did not offer a coherent user experience and suffered from a lack of streamlined navigation, making it challenging for users to engage efficiently. Despite some strengths, the design had significant room for improvement in terms of usability and user experience.
Lack of Coherence: The numerous features and metrics, while useful, were presented without a unified design language. This resulted in a cluttered interface that could overwhelm users rather than guide them through their health tracking journey. Each section of the app felt disjointed from others, making the user experience feel inconsistent and, at times, confusing.
Visual Overstimulation: The lively colour scheme, intended to make the app engaging, instead contributed to a lack of visual hierarchy. Important elements didn't stand out enough from less critical information, making it hard for users to quickly locate the data needed. The bold colors, instead of guiding users, became a distraction, detracting from the app's usability.
Basic Navigation: The navigation was fundamental and did not support the depth of features offered, making it difficult for users to maneuver through the app efficiently. With basic navigation tools, users found it challenging to make full use of the app’s capabilities, as navigating between different health metrics and tools was not intuitive.
Streamlined Flow Issues: Without a streamlined flow, users encountered friction when attempting to use the app for routine health monitoring. Optimal user engagement hinges on the ability to interact with the app seamlessly, but the original design required excessive effort and interaction, which could deter regular use.
In the initial design phase of the SoulSync Balance app, the interface included only a few screens, which, while functional, lacked the depth required for comprehensive health tracking. The initial app showcased an array of metrics and featured a lively yet inconsistent colour scheme. It was evident that this early version did not offer a coherent user experience and suffered from a lack of streamlined navigation, making it challenging for users to engage efficiently. Despite some strengths, the design had significant room for improvement in terms of usability and user experience.
Lack of Coherence: The numerous features and metrics, while useful, were presented without a unified design language. This resulted in a cluttered interface that could overwhelm users rather than guide them through their health tracking journey. Each section of the app felt disjointed from others, making the user experience feel inconsistent and, at times, confusing.
Visual Overstimulation: The lively colour scheme, intended to make the app engaging, instead contributed to a lack of visual hierarchy. Important elements didn't stand out enough from less critical information, making it hard for users to quickly locate the data needed. The bold colors, instead of guiding users, became a distraction, detracting from the app's usability.
Basic Navigation: The navigation was fundamental and did not support the depth of features offered, making it difficult for users to maneuver through the app efficiently. With basic navigation tools, users found it challenging to make full use of the app’s capabilities, as navigating between different health metrics and tools was not intuitive.
Streamlined Flow Issues: Without a streamlined flow, users encountered friction when attempting to use the app for routine health monitoring. Optimal user engagement hinges on the ability to interact with the app seamlessly, but the original design required excessive effort and interaction, which could deter regular use.
The Solution
A Lean, Mean, Optimised Machine!
A Lean, Mean, Optimised Machine!
Recognizing these limitations, my role expanded significantly as I was tasked with creating a comprehensive design overhaul to enhance functionality and user interaction. To address these challenges, I implemented several key strategies:
Development of a Lean Design System: I established a lean design system that served as the backbone for all design-related decisions. This system ensured that all elements on the app were consistent, reusable, and scalable, supporting a cohesive visual and operational harmony across the app.
Introduction of Design Laws: To further streamline the user experience, I introduced fundamental design laws that guided the layout, interactions, and visual hierarchy of the app. These principles helped in making the app not only aesthetically pleasing but also intuitively navigable, significantly reducing learning curves and user frustration.
Expansion of User Interface: I was responsible for significantly expanding the scope of the user interface by designing over 40 screens encompassing more than 6 main user flows. This expansion allowed the app to cover all necessary aspects of health tracking in detail, from initial setup to daily usage and review of long-term trends.
1
Starting the Design
Information Architecture
Paper Wireframes
Information Architecture
Paper Wireframes
2
Refining the Design
Brand Style Guide
Animations & Micro-interactions
Visual Representation of Data
Revisions & Improvements
App Icon
Brand Style Guide
Animations & Micro-interactions
Visual Representation of Data
Revisions & Improvements
App Icon
Starting the design
Information Architecture
Information Architecture
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.
Paper Wireframes
Paper Wireframes
The central feature of the app focuses on seamlessly connecting to a heart rate monitor to gather and display the user's health statistics effectively. The primary user flow I developed was centered around showcasing these metrics in intuitive and visually engaging ways, including column graphs, line charts, and interactive animations. This was crucial to ensure that users could easily access and interpret their data.
Initially, I tackled this core functionality by crafting paper wireframes. This foundational work was instrumental in iterating the main display area, particularly for how we could best present vital statistics such as LF% among other key information. These early wireframes not only assisted in visualising the data presentation but were pivotal in shaping the main navigation structure of the app. By working through these designs, I was able to explore various layouts for tabs and grouped items, optimising the navigation to enhance each user’s flow effectively. Through this process, we ensured that the app was not only functional but also user-friendly, providing a seamless experience from the initial connection to the detailed data engagement.
The central feature of the app focuses on seamlessly connecting to a heart rate monitor to gather and display the user's health statistics effectively. The primary user flow I developed was centered around showcasing these metrics in intuitive and visually engaging ways, including column graphs, line charts, and interactive animations. This was crucial to ensure that users could easily access and interpret their data.
Initially, I tackled this core functionality by crafting paper wireframes. This foundational work was instrumental in iterating the main display area, particularly for how we could best present vital statistics such as LF% among other key information. These early wireframes not only assisted in visualising the data presentation but were pivotal in shaping the main navigation structure of the app. By working through these designs, I was able to explore various layouts for tabs and grouped items, optimizing the navigation to enhance each user’s flow effectively. Through this process, we ensured that the app was not only functional but also user-friendly, providing a seamless experience from the initial connection to the detailed data engagement.
The central feature of the app focuses on seamlessly connecting to a heart rate monitor to gather and display the user's health statistics effectively. The primary user flow I developed was centered around showcasing these metrics in intuitive and visually engaging ways, including column graphs, line charts, and interactive animations. This was crucial to ensure that users could easily access and interpret their data.
Initially, I tackled this core functionality by crafting paper wireframes. This foundational work was instrumental in iterating the main display area, particularly for how we could best present vital statistics such as LF% among other key information. These early wireframes not only assisted in visualising the data presentation but were pivotal in shaping the main navigation structure of the app. By working through these designs, I was able to explore various layouts for tabs and grouped items, optimizing the navigation to enhance each user’s flow effectively. Through this process, we ensured that the app was not only functional but also user-friendly, providing a seamless experience from the initial connection to the detailed data engagement.
The central feature of the app focuses on seamlessly connecting to a heart rate monitor to gather and display the user's health statistics effectively. The primary user flow I developed was centered around showcasing these metrics in intuitive and visually engaging ways, including column graphs, line charts, and interactive animations. This was crucial to ensure that users could easily access and interpret their data.
Initially, I tackled this core functionality by crafting paper wireframes. This foundational work was instrumental in iterating the main display area, particularly for how we could best present vital statistics such as LF% among other key information. These early wireframes not only assisted in visualising the data presentation but were pivotal in shaping the main navigation structure of the app. By working through these designs, I was able to explore various layouts for tabs and grouped items, optimizing the navigation to enhance each user’s flow effectively. Through this process, we ensured that the app was not only functional but also user-friendly, providing a seamless experience from the initial connection to the detailed data engagement.
Refining the design
Refining the design
Brand Style Guide
Brand Style Guide
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 & Micro-interactions
Objective: The primary objective was to develop a set of animations that would seamlessly integrate with the app’s existing design and enhance usability. The animations needed to be engaging, intuitive, and closely tied to the functional aspects of the app, particularly the breathing countdown and pacer activities.
Objective: The primary objective was to develop a set of animations that would seamlessly integrate with the app’s existing design and enhance usability. The animations needed to be engaging, intuitive, and closely tied to the functional aspects of the app, particularly the breathing countdown and pacer activities.
Process:
Conceptualisation: Began by brainstorming various design elements such as shapes, colours, and thematic concepts that could align with the wellness theme of the app.
Design Variations: Created multiple animation variations, experimenting with different aesthetic approaches and interacting elements to discover which best suited the app’s user interface and core functionalities.
Detailed Animation: Each animation version was carefully crafted, focusing on the precision of motion and its synchronisation with the app's breathing countdown feature.
User Flow Integration: Focused particularly on the pacer screen, designing specific animations (e.g., heart animations in multiple styles, box animations for box breathing techniques) to guide users effectively through their breathing exercises.
Process:
Conceptualisation: Began by brainstorming various design elements such as shapes, colours, and thematic concepts that could align with the wellness theme of the app.
Design Variations: Created multiple animation variations, experimenting with different aesthetic approaches and interacting elements to discover which best suited the app’s user interface and core functionalities.
Detailed Animation: Each animation version was carefully crafted, focusing on the precision of motion and its synchronisation with the app's breathing countdown feature.
User Flow Integration: Focused particularly on the pacer screen, designing specific animations (e.g., heart animations in multiple styles, box animations for box breathing techniques) to guide users effectively through their breathing exercises.
Key Features:
Heart Animations: Multiple designs timed to reflect different breathing rhythms, aiding users in following along with various breathing exercises.
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.
Process:
Figma - Component Design
Prototyping
Key Features:
Heart Animations: Multiple designs timed to reflect different breathing rhythms, aiding users in following along with various breathing exercises.
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.
Process:
Figma - Component Design
Prototyping
Micro-interactions:
I focused on crafting micro-interactions that contribute to a seamless and intuitive user experience. By animating tooltips, I provided users with gentle guidance and immediate feedback that helps them navigate the app more efficiently without breaking the interaction flow. These tooltips appear contextually to aid understanding without being intrusive.
Another key aspect of the app’s interactivity is its charts and calendar. I developed animated, interactive charts that provide real-time data visualization, allowing users to interact with their personal health metrics dynamically.
Micro-interactions:
I focused on crafting micro-interactions that contribute to a seamless and intuitive user experience. By animating tooltips, I provided users with gentle guidance and immediate feedback that helps them navigate the app more efficiently without breaking the interaction flow. These tooltips appear contextually to aid understanding without being intrusive.
Another key aspect of the app’s interactivity is its charts and calendar. I developed animated, interactive charts that provide real-time data visualization, allowing users to interact with their personal health metrics dynamically.
Additionally, I enhanced the interface fluidity with animations for switching between tabs. This not only made the transitions aesthetically pleasing but also helped to maintain the user's focus and continuity as they moved throughout different sections of the app. To minimize wait times and enrich user engagement, I designed intricate loading states that are visually dynamic yet calming, ensuring users remain entertained even as they wait.
These carefully considered micro-interactions enhance not just the aesthetics of the app but also its functionality, making SoulSync Balance both a pleasure to use and highly effective in helping users manage their well-being.
Additionally, I enhanced the interface fluidity with animations for switching between tabs. This not only made the transitions aesthetically pleasing but also helped to maintain the user's focus and continuity as they moved throughout different sections of the app. To minimize wait times and enrich user engagement, I designed intricate loading states that are visually dynamic yet calming, ensuring users remain entertained even as they wait.
These carefully considered micro-interactions enhance not just the aesthetics of the app but also its functionality, making SoulSync Balance both a pleasure to use and highly effective in helping users manage their well-being.
Visual Representation of Data
In addressing the data-intensive nature of the app, I designed a comprehensive suite of charts to aid in the clear and efficient representation of complex information. I iterated different chart types on paper before implementing the right one on Figma. Each chart type was selected and tailored to ensure that users can quickly grasp their health metrics and derive meaningful insights without feeling overwhelmed.
In addressing the data-intensive nature of the app, I designed a comprehensive suite of charts to aid in the clear and efficient representation of complex information. I iterated different chart types on paper before implementing the right one on Figma. Each chart type was selected and tailored to ensure that users can quickly grasp their health metrics and derive meaningful insights without feeling overwhelmed.
Refining the Data
Revisions & Improvements
Revisions & 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.
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 App Icon
Final Design
Real-time feedback
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. This feature not only enhances user engagement by providing continuous feedback but also promotes effective stress management by suggesting actionable steps in critical moments.
Post revisions: A real-time visual feedback system. Designed to instantly inform users about their current emotional state, encouraging immediate awareness and mindfulness. This feature not only enhances user engagement by providing continuous feedback but also promotes effective stress management by suggesting actionable steps in critical moments.
Custom Time Period & Detailed Analysis
Custom Time Period & 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.
Result
Result
The SoulSync Balance Experience
The SoulSync Balance Experience
Interactive Prototype
Interactive Prototype
Shortcut: Click on the hamburger menu to navigate to any page.
Shortcut: Click on the hamburger menu to navigate to any page.
Going Forward
Take Aways
Impact
The design was intuitive to navigate through and more engaging with graphic representation of heavy data. The animations and micro-interactions ensure the experience feels fluid and responsive.
The design was intuitive to navigate through and more engaging with graphic representation of heavy data. The animations and micro-interactions ensure the experience feels fluid and responsive.
What I learned
One valuable lesson I learned was how to simplify complex health data into clear, engaging visuals that users can easily understand and act on. Translating technical information into intuitive charts, indicators, and flows pushed me to think critically about hierarchy, accessibility, and emotional design.
One valuable lesson I learned was how to simplify complex health data into clear, engaging visuals that users can easily understand and act on. Translating technical information into intuitive charts, indicators, and flows pushed me to think critically about hierarchy, accessibility, and emotional design.
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.
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.
More From My Portfolio
SmartPocket
Budgeting App Case Study & UXD
See Project
Mealify
AI-Powered Meal Planning App
See Project
Graphic Illustrations
See Project
SmartPocket
Budgeting Product Case Study & UXD
See Project
See Project
See Project
Mealify
AI-Powered Meal Planning App
See Project
See Project
See Project
Graphic Illustrations
See Project
See Project
See Project