UX Design / Research | Case Study
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.
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.
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
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.
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.
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"
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.
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.
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.
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:
-
A pop-up card appeared when the user accessed a new screen for the first time
-
Chips/quick searches were added under the search bar
-
The ability to filter the results page was added
-
The workout-specific screen now has video player controls
Implementing Feedback
Major Changes
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.
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.
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.
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.
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.
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.