top of page
Heavy Weights

UX Design / Research | Case Study

Free.png

Fittin

UX Design | Research | Case Study

Designed to help people working from home increase their physical activity and combat sedentary behavior. 

Project Overview
Project Type — Academic Solo Project at BrainStation

Role — UX/UI Designer 

Timeline — 10 Weeks

Platform — iOS Human Interface Guidelines 

Tools — Figma, Adobe Illustrator, Photoshop

Goal

Over the course of 10 weeks at BrainStation’s UX Bootcamp, I was challenged to create a capstone project that uses Human Centred Design thinking, principles, and methodologies to develop a digital intervention that solves a real-world problem. This project is an end-to-end UX design process.

figma logo

Why Sedentary Behaviour? 

People working from home are facing new challenges. Sedentary behavior, such as sitting for prolonged periods, has been linked to a number of health problems, including obesity, diabetes, and cardiovascular disease. This case study provides insight into how sedentary behavior affects an individual's health and well-being.

My Design Process 

My process for this design challenge was to leverage a non-linear design-thinking methodology. I used this as a guide to empathize with users, define my solution, develop, and ideate possible outcomes while delivering a final product. Additionally, this process allows me to set aside personal bias from the beginning and focus on the user's actual needs and desires. 

Empathize

Problem Space
Secondary Research
Primary Research

Define

Persona
Experience Map

 

Ideate

User Stories & Epic
Task Flow

Develop

Exploratory Sketches
Lo-Fi Wireframes

Test

Usability Testing
Incorporating Feedback

Refine

Brand Development
Hi-Fi Prototype

Discovery

Problem Space

According to Statistics Canada, 84% of Canadian adults are not getting the recommended amount of physical activity and there are growing concerns that working from home has increased sedentary behavior.

What is sedentary behavior?

Sedentary behavior refers to activities that we do while we are sitting, reclining, or lying down and expend very little energy. Some examples include watching television, using a computer or tablet, and sitting on a bus, car, or train. 

michael-soledad-B4GwdlgTh5Y-unsplash.jpg
Secondary Research

According to a review of studies published in the Canadian Journal of Preventive Medicine, adults who spent the most time sitting had a higher risk of dying from any cause, compared to those who spent the least time sitting. The study also found that the risk of dying from cardiovascular disease was 14% higher in adults who spent the most time sitting, compared to those who spent the least time sitting.

12%

Of adults, 18 to 79 achieved less than 8 hours of sedentary time per day.

50%

Of Canadians reported increased sitting and 62.8% reported increased use of screen-based devices for leisure.

60%

Of Canadians reported spending more time using the internet and watching TV during the pandemic, significantly increasing unhealthy sedentary behavior.

25%

Of Canadians reported no physical activity 

Primary Research

User Interviews

Methodology
A total of 3 interviews were conducted via video conference. Interviews were transcribed and detailed notes were recorded. Attention to verbal and physical responses was noted. Each interview lasted anywhere from 20 - 45 minutes. 

Interviews
I created an interview guide for collecting qualitative data to gather insightful and relevant information. The aim of conducting research interviews was to uncover the prevalent issues, motivations, and actions of the users, with the goal of identifying potential areas for design intervention. Once all the crucial data was collected, I intended to organize it on an affinity map, making it simple to identify patterns and themes among the data.

Participant Criteria

Ages  — 18+

Sex  — Male/Female 

Location  — Toronto 

Occupation  — Working from Home 

Technology  — iOS / Android User 

Participants
photo-handsome-teenage-boy-with-dark-skin-curly-hairstyle-wears-casual-green-t-shirt-looks

1

Name - Jordan 

Ages - 21

Occupation - Web Developer

Pain Point.

Laziness and procrastination are his biggest blockers to reaching his health goals. 

 

Behavior.

Tries to be active in his time off from work, and likes to weight lift, and play badminton.

 

Motivation.

Thinks physical activity is important and can relieve stress while giving him more energy.

photo-delighted-cheerful-afro-american-woman-with-crisp-hair-points-away-shows-blank-space

2

Name - Janice 

Ages - 25

Occupation - Collections Agent

Pain Point.

Feels like she is sitting down too long during the day which leads to muscle aches.

Behavior.

Does not use any apps to manage her time or track physical activity.

Motivation.

Wants to work out more but it's hard to find the time to do so while working from home.

smiling-lovely-female-model-enjoys-drinking-coffee-during-spare-time-has-good-mood-casual-

3

Name - Mira

Ages - 29

Occupation - Financial Advisor 

Pain Point.

Feels overwhelmed with her workload and doesn't have a good work-life balance. 

 

Behavior.

Likes to relax after work and watch TV 

or movies to get her mind off work.

 

Motivation.

Cares about her health and wants to incorporate physical activity into her day. 

Affinity Mapping

Synthesized Insights

I analyzed transcripts from interviews to identify important information such as pain points, motivations, and behaviors of participants. I grouped this information into categories for each individual and prepared it to be visualized using an affinity map in Figma. It's essential to recall the definitions of these terms as they formed the foundation of the entire project.

The affinity map is an essential part of generating "How Might We" statements. It allows me to quickly and easily visualize all the pain points, motivations, and behaviors gathered from the interviews. 

Themes

Poor work-life balance due to time management 

  • Physical activity varies based on the work schedule. 

  • Often feels overwhelmed with work tasks. 

  • Works over time as much as possible.

 

Enjoys working from home 

  • Work-from-home experience is great so far.

  • Likes not having to commute to work anymore. 

  • WFH has more positives than negatives.

 

Reduced physical activity 

  • Wants to disconnect and unplug from work.

  • Exercise is dependent on energy levels. 

  • No longer reaching recommended daily amount
    of physical activity since starting to work from home. 

Chosen Theme & Inisght 

Theme - Poor work-life balance due to a lack of time management 

Insight - Both poor time management and sedentary behavior can negatively impact an individual's overall quality of life, making it difficult to maintain relationships, succeed in the workplace, and enjoy leisure activities.

Insights

Poor time management can lead to stress and anxiety, as individuals may feel overwhelmed by the number of tasks they need to complete.

Enjoys the WFH experience but prolonged sitting and lack of physical activity can increase the risk of obesity, heart disease, and type 2 diabetes.

Workload may vary and more times than not, there's not enough energy at the end of a workday to do physical activities.

How might we help individuals working from home increase their physical activity in order to maintain a non-sedentary lifestyle?

Define

Persona

Once I completely synthesized the quantitative and qualitative data from my interview findings I then created a persona that closely reflected the demographic information of an average user. My digital solution was designed for the target audience represented by the persona Liam Smith. If you remember, this was based on the theme "poor work-life balance due to a lack of time management"

self-confident-serious-bearded-man-stands-with-arms-folded_edited.jpg

About

Liam is a young professional who lives with his wife. He recently started a new job, working for a very prominent bank. He is finding it difficult to maintain an active lifestyle because he feels exhausted and drained after work.

Goals

  • Believes physical activity is important. It relieves stress and gives him more energy.

  • Wants to have a more consistent workout routine.

  • Cares about his health and wants to incorporate physical activity into his day.

Pain Points

  • Feels overwhelmed with his workload and doesn't have a good work-life balance. 

  • Thinks he is sitting down too long during the day, which leads to muscle aches.

  • Feels exhausted after work and can’t seem to get into a workout routine.

Age  — 30 

Education  — Degree in Finance

Job Title — Software Engineer  

Social Media Usage  — Active

I feel like since working from home, I've just been even more exhausted than I ever was before.

Behavior

  • Likes to relax after work and watches TV/movies to get his mind off work. 

  • Tries to be active in his time off from work, and likes to weight lift and play badminton.

  • Works anywhere from 7 to 8 hours a day with regular breaks in between.

Liam Smith

Primary User Persona 

Experience Map

After defining my user persona I moved on to finding areas for a design intervention. I created a user experience map of Liam smith's typical workday and found there are many opportunities to do a workout, stretch, or activity to get him up and moving. It is used to identify inefficiencies, bottlenecks, and areas for improvement in the process.

Ideate

User Stories

Moving on to user stories I started to create statements from Liam’s point of view, taking into consideration his goals, behaviour, and frustrations. This is important because they help to define and prioritize the features and functionality of my digital solution from the perspective of Liam. 

Chosen Epic & User Story

Epic - Reminders to work out and increase movement.

Story -  As a person working from home, I want to be reminded to move and stretch, so that I can increase my physical activity while working

Task flow

With the assistance of the above epic and user stories that I selected, I determined that my goal is to enable my persona to find and schedule a workout, but also be encouraged to move via smart reminders. 

TaskFlow.jpg

Develop

Sketching

After determining my task flow, I began sketching various concepts. I used my Ui Board as a reference for UI components and features. 

 

To give myself more choices, I created three sketches for each screen. This approach allowed me to generate ideas without feeling constrained by the need for perfection. After evaluating different screens, I narrowed down my top ideas and created solution sketches that would later be converted into wireframes.

sketches1.png

Greyscale Wireframe

Prototype v1

This was my initial wire-framing of the task flow. To refresh your memory, the goal is for my user to schedule a workout for the end of his workday. I wanted to conduct user testing promptly, so I created a minimum viable product (MVP) prototype based on the task flow for testing purposes. An MVP is a design with only the essential elements needed for the user to interact with and use the app.

Midfidelity.png
Usability Testing 

With the prototype ready, it was time for testing. I began by creating a Usability Testing Plan to document my findings and keep everything organized. I drafted an introduction and scenario, outlining the goals and summary. I then wrote a test script to use during my user sessions, which ensured a smooth testing process by guiding both the user and me.

I carried out two rounds of usability testing on ten participants to gather feedback. The users were asked to complete a series of five tasks to help me observe their interaction with the app.

.

I recorded several insights from the feedback and observations, which I used to further improve the app. These insights were recorded in a Design Prioritization Matrix, enabling me to determine which changes would require the least effort and bring the most value to the user.

Prototype v2

The task flow was generally usable, but the prototype lacked context and relevance for remote workers. I made some crucial changes to enhance the tasks and the user's navigation between screens. The following are some of the key improvements made:

  1. A pop-up card appeared when the user accessed a new screen for the first time

  2. Chips/quick searches were added under the search bar

  3. The ability to filter the results page was added

  4. The workout-specific screen now has video player controls

prototype v2.png

Implementing Feedback 

Major Changes 
Group 2.png

Adding Value - Popup Modal

Improved User Interaction: When employed correctly, pop-up modals can enhance the user's interaction by delivering relevant information at the appropriate moment. This allow's me to provide more context to the user as the move through the app for the first time. 

Quick Search

Improved navigation: Chips can be used as filters or categories, making it easier for users to navigate and find what they are looking for. Secondly, chips can help to organize information and provide a visual representation of different categories

User Controls 

In the initial release, there were no options to initiate a workout session. Many users found this confusing and difficult to use. In response, I added playback controls to allow users to start the workout, share it, add music, and personalize the experience.

Filter & Sort

Customized results: Filters and sorting options allow users to customize their search results based on their personal preferences, leading to more relevant and personalized results.

Hi-Fidelity 

Visual Identity 

Following two rounds of user testing with the gray-scale wireframes, it was time to infuse color and character into the design. I considered the brand's identity and what emotions and values I wanted it to evoke. This section demonstrates my process of establishing the brand through the creation of a color Pallette, typography, and logo design. 

 

Additionally, I contrasted the brand with comparative adjectives to clearly define its goals and distinguish it from others.

More A than B list 

More energetic than sluggish 

More movement than lethargic

More dynamic than typical 

More powerful than impotent 

More minimal than cluttered 

More Modern than Classic

More attitude than passive 

Moodboard

To start the color process, I created a mood board and selected colors from it. My initial choices included energetic hues like lime green and orange and some cool neutral tones. This marked the beginning of building a color palette to add vibrancy to the mobile app.

Moodboard.png
UI Colour Palette 

With the brand identity defined and a color palette set, it was time to add color to the app and determine the UI elements to style. I employed a minimal approach and followed a 60/30/10 rule for color application.

HEX FBFBFB

HEX 0B0B0B

HEX E5FF21

Branding 

Having established the colour palette, I set out to name the brand. My goal was to convey the concept of working from home with a minimal and visually appealing twist. I aimed to create a clever one-word name that used wordplay.

After exploring several name options, I sought feedback from peers and mentors on "Fitting" and "Fittin". I explained that the name is a combination of "fitness" and "sitting".

Movement and activity 

Having selected the typeface ITC Avant Garde Gothic Std/ Oblique, I proceeded to design a logo to accompany the word "Fitting". I felt that it would increase the brand's recognition and identity.

Appname.png
LOGOFITTIN.png
UI Library

I created a UI library to serve as a collection of pre-designed user interface components, including buttons, icons, typography, and color palettes. This library provides me with a reference to ensure consistency in my designs and streamline my work by reducing the time spent on repetitive tasks.

Foundation

Typography

SF Pro is a sans-serif typeface designed for use in user interfaces. It is known for its clean, modern appearance, versatility, and readability on digital devices. SF Pro is a widely used typeface in Apple's ecosystem, and it is available for use on both iOS and macOS.

Typography.png

Refine

Accessibility

I prioritize accessibility in my design process for the Fittin app, striving to make it inclusive for all users.

 

Legible text is a crucial aspect of ensuring that the app is accessible. Additionally, I focused on designing easily readable buttons, as they serve as the main navigation tool for users. Based on my selected colour palette I was determined to achieve at least an AA accessibility score. 

Aside from the combination of HEX E5FF21 on HEX - ECEDE7 all other color pairings received an AAA rating.

HEX - 0B0B0B

HEX - ECEDE7

AAA

Ratio: 19.18:1

HEX - 0B0B0B

HEX - E6FD35

AAA

Ratio: 17.31:1

HEX - ECEDE7

HEX - E6FD35

X

Ratio: 1.04:1

Refine

Hi-Fidelity 

After extensive effort, numerous revisions, testing, experimenting with color, and defining the brand, I was able to elevate my prototype from mid-fidelity to high-fidelity and complete the Fittin app.

Takeaways 

Key Learnings 

One of the most valuable lessons I have learned is the importance of user empathy. By taking the time to understand the needs, goals, and perspectives of the people who will use the app, we can identify and solve the right problems. Another important lesson is the value of an iterative approach to problem-solving.

fittin.png

Impact

Next Steps

From a personal perspective, I see designing a marketing website as an opportunity to put my skills and creativity to work and make a real impact on the success of the product.

I enjoy the challenge of telling the product's story in a way that resonates with the target audience, and I am motivated by the opportunity to help bring a great product to market and make a difference in people's lives.

Instead of trying to find the perfect solution right away, it is often more effective to try out different ideas, gather feedback, and refine our approach until we arrive at the best solution. This process helps us avoid the trap of becoming too attached to our initial ideas, and instead keeps us open to new and potentially better solutions that emerge along the way.

Iphone14Pro_Mockup01_MicroVolume.jpg

Thank you for taking the time to review my process! I truly appreciate it.

I would be happy to chat more about my process and share my experiences with you. Please don't hesitate to reach out to me if you're interested in learning more. 

bottom of page