Close

Let's Create Next Big Thing

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Well Track
UX Case Study

Project
Overview

Descritpion:
Welcome to Well Track. Join us as we explore how our fitness app brings friends and family closer through shared workouts, messages, and posts. Discover how easy it is to stay motivated and connected, transforming your fitness journey into a fun and supportive experience. Let’s dive into our case study, showcasing how Well Track can make exercising a shared adventure without any hassle.
Date:
27 May, 2024
Service:
UX Case Study
Deliverable
No,

Problem Definition & Research

Problem statement highlighting user challenges, User personas and pain points, Competitor analysis and user insights
01

Ideation & Initial Sketches

02
Brainstorming notes and key ideas, Initial solution sketches or wireframes, Selection of main ideas based on user research.

Low-Fidelity Designs & Prototype

03
Low-fidelity wireframes of key screens, User flow diagram for the prototype, Interactive prototype

Usability Testing

04
Usability testing plan (participants, tasks, methodology), Feedback and insights gathered from test participants.

High-Fidelity Designs & Final Review

05
Refined high-fidelity designs with final UI components, Summary of design choices and final recommendations.

Problem Statement

Fashion embodies both expression and challenges. Meet Sarah, a modern professional grappling with the daily struggle of curating an outfit that truly mirrors her style amid the chaos of her closet. Each morning, she confronts the overwhelming task of navigating through clutter, desperately seeking the perfect ensemble. Despite her efforts, the process leaves her feeling disheartened and uncertain about her fashion decisions.

Sarah's closet resembles more of a battlefield than a sanctuary of self-expression. Garments are haphazardly piled, shoes litter the floor, and accessories vanish amidst the chaos. As minutes pass, her frustration mounts, eroding her confidence as she struggles to piece together an outfit that authentically reflects her personality. Compounding Sarah's frustration is the perpetual disarray of her closet. Unable to locate desired items, she often resorts to purchasing duplicates of items she already owns. Despite recognizing the sufficiency of her wardrobe, Sarah struggles to pair items effectively, perpetuating a cycle of clutter and confusion with each new purchase.decisions.

Possible Solution

A potential solution to Sarah's wardrobe chaos is a digital closet management tool with AI capabilities. This innovative app would allow users to capture images of their clothing items, creating a digital inventory of their wardrobe. Utilizing AI algorithms, the app would analyzes the user's clothing preferences and provides personalized outfit recommendations based on their existing wardrobe. By streamlining closet organization and offering tailored styling suggestions, this solution can empowers users to make the most of their current wardrobe, fostering confidence and creativity in their fashion choices.

Discover Phase

Before embarking on the development of ClosetStyle, an extensive discovery phase was conducted to gain a deep understanding of users' dressing challenges and preferences. This phase involved:

User Research: User Interviews and surveys were conducted to gather insights into the diverse dressing challenges users encountered, such as lack of visibility, disorganized storage, and styling difficulties. These findings formed the foundation for identifying key pain pointsand opportunities for improvement.

Competitive Analysis: A comprehensive analysis of existing wardrobe management solutions and fashion platforms was undertaken to identify gaps in the market and areas for innovation. This analysis informed the strategic positioning of ClosetStyle as a solution that combines wardrobe organization with personalized styling assistance.

I interviewed 5 users over Zoom to understand their challenges and pain points while getting dressed and curating outfits.

I asked them question related to the following:

-About their daily routine of getting dressed
‍-Shopping habits
-Strategies and practices they use

Key Insight

-Participants prioritize comfort and affordability over fashion trends.
-Facing challenges with wardrobe organization and sizing.
-Convenience drives preference for online shopping despite issues with fit and returns, while in-person shopping is less favored due to fitting frustrations.
-Overwhelm with closet clutter.

Brain Storming

Based on the surveys and the user interviews conducted I started brainstorming some ideas that I could implement into an app.

User Persona

Emma is a 26 year old Interior designer. She battles her closet chaos everyday while deciding what to wear. Balancing her work and social life. She strives to stay trendy but faces diversity of challenges. Seeking stylish solutions within budget and time constraints defines her fashion journey.

Goals

Establish and maintain a highly organized closet for efficiency and aesthetic appeal.
‍
-Streamline the wardrobe to reduce clutter and make getting ready a seamless process.
‍
-Invest in storage solutions and organizational tools to optimize closet space.

Motivations

-Motivated by the desire of an efficiently organized closet that mirror her expertise in design.
‍
-Strives for a visually harmonious closet that not only reduces stress but also reflects her design sensibilities

Pain Points

-Her busy schedule limits the time availability for maintaining a well organized closet.
‍
-She struggles to find storage solutions that match her design aesthetic.
‍
-Constant disarray and clutter in the closet cause frustration and sense of chaos

Empathy Maps

After thorough research, I spearheaded the development of an AI-powered virtual stylist iOS app named "ClosetStyle." It offers users personalized outfit suggestions by analyzing their wardrobe, style preferences, and current trends. With a focus on encouraging creativity and maximizing wardrobe potential, users can easily capture closet items for assistance on their mobile devices.

IDEATE PHASE

I created 3 user flows to illustrate how the user will navigate though the application for the red routes.

Login/ Signup Route:
Adding Clothing Items to Virtual Closet:
Receiving AI Outfit Reccomendations:

SKETCHES

The design process began by mapping out primary user pathways, including account creation, sign-in, virtual closet image uploads, and AI recommendations. Sketching wireframes proved invaluable, allowing me to visualize the design and spark continuous ideation. As I immersed myself in sketching, ideas flowed effortlessly, and time seemed to fly by, propelling the design process forward.

WIREFRAMES

Once I had a clear idea of what I wanted to create based on the sketches, I translated those concepts into low-fidelity wireframes outlining the primary user pathways, also known as red routes. These wireframes provided a basic framework for the user interactions and functionalities, allowing for further refinement and iteration as the design process progressed. The following are the screens I created:

Login/ Sigh in Lo-i Wireframe
Sigh up & Adding Clothes to Digital Wardrobe Lo-Fi Wireframe
Getting an AI Outfit Recommendation

Moodboard

Style Guide

After gathering all the necessary inspiration, I moved on to create a style guide. This guide encapsulated the chosen color palette, typography selections, including the height of each typography element, icons and the type of common elements I intended to use throughout the design. Below are snapshots of my style guide, serving as reference points for maintaining consistency and coherence throughout the design process.

High Fidelity Mockups

After the style guide was created  the next step was to hop onto Figma  and start creating the designs.  I created a the three  red routes.

Login/ Sigh in Lo-i Wireframe
Sigh up & Adding Clothes to Digital Wardrobe Lo-Fi Wireframe
Getting an AI Outfit Recommendation

Testing Phase

To test the prototype, I selected five participants and provided them with minimal background information about my app. I instructed them to navigate through the following tasks:
‍
-Sign Up/ Sign In
-Forgot password
-Getting AI recommendations

By observing their interactions and gathering feedback, I aimed to evaluate the usability and effectiveness of the prototype in meeting user needs and expectations.

Results

During the usability test a lot of valuable feedback was provided by the users which was very helpful in making a surrey changes. Some of the valuable feedback that they provided is listed below:

Low Contrast Logo and Background:
The white logo on light background colors lacks sufficient contrast, making it difficult for users with visual impairments to perceive.

Typography Issues on Home Screen:
The font used on the home screen doesn't stand out and may take users some time to understand, indicating potential typography issues.

Learnings

Receiving valuable feedback has greatly influenced my design for the better. Although I couldn't implement all the suggestions from the second round of testing due to time constraints, every insight has been invaluable. It was a valuable learning experience, highlighting areas for improvement and reinforcing the iterative nature of the design process. Moving forward, I'll incorporate these insights into future iterations, ensuring continued enhancement of the design.Reflecting on my first project as a designer, I've learned a great deal. I realized that I spent too much time in the initial stage and didn't manage my time effectively, resulting in delays. Moving forward, I plan to set stricter deadlines to streamline the design process, understanding that perfection isn't always attainable and it's crucial to start somewhere.Exploring Figma was enlightening, especially discovering features like the prototyping section, which was new to me. Conducting user interviews was a highlight, providing invaluable feedback that I wouldn't have considered on my own. The research phase proved to be essential, which I hadn't fully appreciated until now.Overall, this was an incredible first project, and I'm grateful for the guidance of my mentor throughout. Looking back, I would aim for a more structured timeline and dedicate time to learning Figma more comprehensively.

Welcome to Well Track.  Join us as we explore how our fitness app brings friends and family closer through shared workouts, messages, and posts. Discover how easy it is to stay motivated and connected, transforming your fitness journey into a fun and supportive experience. Let’s dive into our case study, showcasing how Well Track can make exercising a shared adventure without any hassle.

The Problem

A well established company’s health tracking app, launched three years ago, currently enables users to monitor their health and fitness progress within a family or friend group. Despite its initial popularity, user engagement significantly drops after three weeks, leading to frequent app deletions. Currently, the app lacks a messaging feature, hindering users from communicating their fitness goals and achievements. To address this issue, the challenge is to design a feature that enhances user interaction and motivation, aligns with the app’s existing functionalities, and reflects the company’s contemporary, trustworthy, and motivational brand personality. The solution should also cater to the needs of tech savvy, budget conscious users who prioritize communication with their social circles.

The Solution

A well established company’s health tracking app, launched three years ago, currently enables users to monitor their health and fitness progress within a family or friend group. Despite its initial popularity, user engagement significantly drops after three weeks, leading to frequent app deletions. Currently, the app lacks a messaging feature, hindering users from communicating their fitness goals and achievements. To address this issue, the challenge is to design a feature that enhances user interaction and motivation, aligns with the app’s existing functionalities, and reflects the company’s contemporary, trustworthy, and motivational brand personality. The solution should also cater to the needs of tech savvy, budget conscious users who prioritize communication with their social circles.

My Role as a Designers

  1. Designing the App Interface: Crafting a user friendly and visually appealing interface that seamlessly integrates new messaging features and enhances overall user experience.
    ‍
  2. Developing Interaction Features: Creating and implementing the Feed, Direct Messages, and Stories sections to foster engagement and communication among users.
    ‍
  3. Conducting Usability Testing: Evaluating the new features through usability testing to ensure they meet user needs, drive engagement, and align with the app’s brand personality.

Process Overview

Step 1

To begin addressing the challenge, I studied other successful apps in the fitness and wellness market to understand their strengths and weaknesses. I analyzed three popular apps: Productive Habit Tracker, Fitlist , Gym Workout Log, and Nike Run Club.

Findings:

Productive Habit Tracker
‍

  1. Highly interactive due to its variety of challenges and thoughtful design elements, like the Promise to complete signature.
    ‍
  2. Keeps users motivated with daily prompts.

  3. However, it lacks messaging features, and its dark UI feels congested, which can hinder longterm engagement.
‍

Nike Run Club
‍

  1. Offers strong group workout capabilities, a comprehensive activity tracking system.
    ‍
  2. Achievement badges.
    ‍
  3. Despite these strengths, it lacks direct messaging and has a rather blank landing page.
‍

Fitlist
‍

  1. Excels in practical functionality and detailed workout logging.
    ‍
  2. Providing users with a progress dashboard and group workout features.

  3. However, its dull UI and lack of direct messaging limit user engagement.
‍

Step 2:

Creating a Name for the App, Visual and UI Style

To begin addressing the challenge, I studied other successful apps in the fitness and wellness market to understand their strengths and weaknesses. I analyzed three popular apps: Productive Habit Tracker, Fitlist , Gym Workout Log, and Nike Run Club.

Step 3:

Creating a Project Plan with Deadlines and Submission Details

To ensure a structured and timely development process, I created a comprehensive project plan outlining key milestones, deadlines, and deliverables for each stage of the app design and implementation.

Creating a Research Plan

To gather the necessary insights for designing effectively, a comprehensive research plan was developed. The main interview questions of the research plan are as follows:

  • How do users currently interact with health and fitness tracking apps?
  • What motivates users to engage with health and fitness apps regularly?
  • How can messaging features be integrated into the app to enhance user engagement and retention?
  • What types of messages e.g., goal achievements, motivational messages are most likely to encourage sustained usage?
  • How do users prefer to receive notifications and messages within a health and fitness app?
  • What are the potential challenges users might face with the new messaging feature?

Step 5:

Research Insights

Understanding How Users Interact and Stay Motivated:

  • How do users currently interact with health and fitness tracking apps?Users track various health aspects: daily steps, workouts, sleep patterns, running routes, cycling routes, food intake, hydration levels.
  • Motivations include:
    • Seeing progress and reaching personal goals.
    • Being part of a community and participating in challenges.
    • Earning badges and achievements.
    • Receiving personalized feedback and suggestions.

User Preferences for Messaging Features:

  • Prefer messages that recognize achievements and provide motivation.
  • Valued message types:
    • Goal achievement messages.
    • Motivational quotes and wellness tips.
    • Reminders to log activities and personalized tips.

Step 6: Creating User Flows

1. Messaging Friends or Family Post Workout:

  • This flow outlines the process for users to send motivational messages to friends or family after completing a workout.

2. Engaging in Community:

  • This flow illustrates how users interact with community features, such as joining challenges, participating in discussions, and tracking progress.
‍

Low Fidelity designs

Findings:

Confusion Between Activity and My Progress:

  • Users were unclear about the distinction between the Activity and My Progress sections. They found it difficult to understand what content or features were unique to each section.

Messaging Feature Placement:

  • There was confusion about the presence of messaging options on both the friends activity feed and the bottom menu. Users were unsure why the messaging feature was duplicated in these areas.

Notification Section Expectations:

  • Users expressed a desire to click on the notification section to see recent activities, such as who sent messages and who completed which workouts. They felt this feature would enhance their ability to stay informed and engaged with their friends activities.

Redundant Information Across Sections:

  • Users noted that the content on the homepage appeared to be replicated across other sections like Activity, Friends Activity and Workouts. This redundancy made navigation and understanding the apps structure more challenging.

Homepage Focus Suggestion:

  • Users suggested that the homepage should focus exclusively on workouts. They believed this would make the app more streamlined and intuitive, providing a clear starting point for their fitness activities.

1st Round of Testing on High Fidelity Designs

Findings:

Understanding of the Stories Feature:

  • Confusion: Multiple participants did not understand the purpose of the stories feature on both the home page and in the messages section. They mistakenly thought it was a feature to add friends.
  • Profile Picture Background Color: Participants commented that the color behind the profile picture does not stand out enough. This lack of visual prominence contributed to their failure to recognize it as a stories option.

Auto Populated Messages:

  • Removal of Feature: Participants noticed that the auto populated messages had been removed.
  • User Preference: Some users mentioned that having the auto populated messages made it easier to send a motivational message to a friend without engaging in a full conversation.

High Fidelity Design

Conclusion

Working on enhancing the messaging features in the health tracking app taught me a lot about user engagement and motivation. By researching other apps and understanding user needs, I realized how crucial personalized and community features are for keeping users interested. Creating user flows helped me see the importance of easy and intuitive design. I learned the need for flexible notifications and maintaining a balance between engagement and privacy. Overall, this project showed me how to design features that better meet user needs, making the app more interactive and supportive.

Introduction

Decorating a small studio apartment to reflect personal taste and personality without overspending or creating clutter can be a daunting task. Ally, a young professional with a keen eye for aesthetics, faced this very challenge. With budget constraints and uncertainty about how to achieve a cohesive look, Ally’s decorating journey was filled with frustrations. To address these issues, I embarked on a project using a modified Google Ventures design sprint methodology to develop a solution that would help Ally and others like her decorate their spaces effortlessly.

Ally’s primary challenges included:

  • Uncertainty about what decor items to purchase to achieve her desired aesthetic.
  • Budget constraints limiting her ability to buy high-end items.
  • Fear of cluttering her small apartment with mismatched decorations.

The Solution

To tackle these challenges, I created a furniture and decor website tailored to provide curated, affordable options that align with users tastes. The website includes a questionnaire section where users can answer a few questions to better understand their decor preferences. Based on the results, the site recommends products that suit their style, helping streamline the shopping process and reduce decision fatigue.

Process Overview

Day 1: Understand and Map

The first phase involved understanding Ally’s specific needs and frustrations. After analyzing the interviews and surveys, I gathered insights into her style preferences, and budget constraints.
map of the possible end to end user experience:

Sketch Your Solution

Using a modified GV design sprint process, I focused on rapid ideation, prototyping, and testing over a condensed timeline:

  1. Mapping: I mapped out the user journey, identifying key pain points and opportunities for intervention.
  2. Sketching: I created rough sketches of potential website layouts and questionnaire designs. I spent some time looking at competitor’s products and related products for inspiration. Conducted lightning demos and did crazy 8s sketch exercise.
  3. Deciding: After evaluating the sketches, I selected the most promising concepts to develop further.
  4. Prototyping: I built a high fidelity prototype of the website, including the questionnaire.
  5. Testing: I conducted usability testing with a group of potential users, to gather feedback and identify areas for improvement.

Day 3: Decide and Create a Storyboard

I opted for a questionnaire as the best solution for House2Home, providing an interactive experience for users while gathering valuable data. This approach allows for immediate product recommendations tailored to users preferences, enhancing both the user experience and conversion potential for House2Home. Overall, it aligns with our goal of creating a personalized and efficient shopping journey
Story Board
3 panel board

Day 5: Validate

During the development process, I interviewed five participants to gather insights and refine the platform. The feedback revealed that users wished for more detailed questions, such as specific types of items they were looking for, but overall users found it rather easy to navigate the website. Based on the feedback from the usability testing, I made iterative improvements to the website. This included refining the questionnaire to ensure it accurately captured user preferences and enhancing the website interface to provide a more realistic preview. This project not only addressed Ally’s immediate challenges but also provided a scalable solution that can benefit a broader audience seeking affordable and personalized home decor options.

High Fidelity Design

Conclusion

I created a solution that empowers users like Ally to decorate their homes with confidence and ease. The website’s personalized recommendations tool simplifies the decision making process, ensuring that even those with budget constraints can achieve a cohesive and stylish look for their living spaces. This project not only addressed Ally’s immediate needs but also provided a scalable solution that can benefit a broader audience seeking affordable and personalized home decor options and a way to understand their personal home decor style better.
Evolutio, a Canadian start-up, needed a UI/UX redesign for their physical therapy booking app to improve user engagement and satisfaction. The app's current design made it difficult for clients to find essential features, such as the feedback section, and the exercise video layout lacked visual appeal. Additionally, button visibility was an issue, often causing navigation problems.


This case study focuses on revamping Evolutio’s app by enhancing the visual design, making buttons more prominent, exploring gamification options. The goal was to create a more intuitive, engaging, and visually appealing user experience. 
Given that Evolutio was a startup with limited existing data, we conducted secondary research to gain insights into the needs and preferences of our target audience. Here are some highlights from our research, organized into different categories.
We performed SWOT competitive analysis with similar apps, including Zocdoc, Jane, Kaia Health, and others, to gain insights and best practices that could be leveraged in the redesign.

User Persona

​​To delve deeper into user needs, we conducted user interviews with four participants. These interviews helped us identify key pain points and motivations, providing valuable insights that informed our design decisions and ensured the app would meet user expectations.

After collecting all this data, we developed user personas, empathy maps, and affinity maps. These tools allowed us to visualize user behavior, emotions, and preferences, which guided us in creating a user-centric design that truly resonates with Evolutio's clients.

Empathy Map

Affinity maps played a crucial role in this process by allowing us to organize and synthesize the diverse insights we gathered during our research. By grouping related information into categories, we could identify patterns, trends, and key themes that aligned with our target audience's needs and preferences. This visual organization helped us prioritize features and design elements, ensuring that the final product was user-centered and effectively addressed the core issues identified.
The next step involved creating user flows. This process helped us identify gaps and pain points in the existing app and highlighted areas that needed improvement. Mapping out user flows and conducting GAP analysis provided a clearer understanding of how users navigated the app, enabling us to prioritize features and design elements that would enhance the overall user experience. Attached are just a couple of flows.
The next step was to create a design system, as the client didn't have one in place. The Figma file we received from the client for the existing app contained many images instead of components, making this process even more challenging. We had to recreate all the screens from scratch, implement our new style guide, and ensure consistency across the app. Additionally, we adhered to WCAG contrast requirements to improve accessibility and readability, ensuring that the design was inclusive and user-friendly for all users.
Below are some of the low-fidelity sketches we created, which illustrate our initial ideas and the proposed changes to Evolutio’s app:
We then created the high-fidelity design, addressing most of the issues, considering the time constraints and the upcoming deadline to deliver it to the client. After thorough testing, we finalized the screens and delivered them to the client, who was very pleased with our work.

High Fidelity Design

Learnings

Working on the Evolutio project was an invaluable learning experience for me. It provided me with the opportunity to collaborate closely with a team of designers and engage directly with clients, which was crucial in honing my communication and teamwork skills. I learned how to create intuitive user interfaces that cater to the specific needs of health practitioners and their clients.
The project taught me the importance of balancing user feedback with design best practices, ensuring that the final product is both user-friendly and visually appealing. I also gained insights into the significance of time management and prioritizing features, especially when facing tight deadlines.
Overall, the Evolutio project enhanced my ability to problem-solve creatively, adapt to real-world constraints, and deliver designs that not only meet but exceed client expectations

Related
Work

Check out some of the great projects I've recently done for my glourius clients.
Brief me

Evolutio

UX Case Study
Evolutio, a Canadian start-up
See Full Case

House 2 Home

UX Case Study
Welcome to House 2 Home.
See Full Case