What is Rebuff?
It's an app designed to help athletes and fitness enthusiasts find and reserve their next training session when their primary means of training are unreliable.
During my time at BrainStation's UX Design bootcamp, I was responsible for completing a 10-week Capstone Project with the aim of delivering a digital product to help users in a problem space. This allowed me to explore the complete end-to-end UX process involving research, ideation, prototyping, and branding.
My Role
Project Timeline
Tools
Platform
Quick Video Summary
Phase 1: Research
The Challenge
Due to the recent pandemic, many athletes and fitness enthusiasts have been unable to attend their usual gyms or classes. Athletes requiring specialized equipment specific to their training often rely on public facilities or instructors that are not always available on a regular basis.
I wanted to find out how athletes were affected when
they lost access to their regular fitness resources.
"Double Diamond" Design Process
I approached this project with the "Double Diamond" method of first discovering the problem space through research, defining it further through ideation, developing it through user testing, and finally delivering the finished product. Each stage of this process broadens or narrows the focus of the project in order to refine it as much as possible.
Secondary Research
Looking deeper into this problem space, I found several online sources pointing to the recent trend of fitness goers adopting new habits because of the pandemic. Here are some of them:
“70% intend to maintain or increase their use of online fitness even after the pandemic abates.”
- McKinsey & Company
"Consumers have been splurging on large, expensive at-home fitness equipment as they continue to work and workout from home. Hydrow, an at-home rowing startup peddling $2,220 machines, saw sales rise 400% in April compared with January"
- Fortune.com
User Interviews
To find out more, I interviewed 3 athletes with the criteria of being:
- Aged 18-30
- Currently living in North America
- Has been recently affected by the pandemic lockdowns.
I asked questions based around issues of Training Consistency, Community, Financial Barriers, and Privacy.
Affinity Mapping
Then, I colour-coded the stickies to highlight user pain points, motivations, and behaviours.
Red = Pain Points
Green = Motivations
Yellow = Behaviours
Key Insights
Among many interesting insights taken from the interview data, I chose the following to be the Key Insight as it came to be the most common issue.
Key Insight
How Might We
Phase 2: Ideation
Persona
Consolidating my key insights from my research, I created the persona Gary as an embodiment of the people I interviewed. Having a name and face for all the data I've gathered helps me stay user-centered when thinking about my design solution.
User Experience Map
To better understand Gary’s situation, I created an experience map that illustrates how he would navigate the identified problem space. This helps me see exactly where problems are introduced in the process and gives insights into potential solutions.
User Stories
I began to think of the core functionality my app might include by authoring several user stories from the perspective of my target user. These are short sentences about a feature, written from the perspective of the user.
Core Epic
Out of these, I chose the Core Epic of Finding Facilities and Instructors as it related most closely to the key insight from my interviews. By focusing on this issue, the main problem of training schedule inconsistency could be dealt with.
Task Flow
I began to develop a diagram of the main task flow my app would follow. The process consists of 8 screens and is focused around the Core Epic of "Finding Facilities and Instructors"
UI Inspiration
Before sketching, I needed some ideas on how I wanted my app to look. I started by searching for inspiration from similar screens I could find so that my design conforms to user expectations.
Sketching
Putting pen to paper, I started various rough sketches on how the various screens on the task flow would look. Among my various sketches, I liked these ideas best:
Phase 3: User Testing
Prototyping & User Testing
I began to develop my sketches into mid-fi wireframes in Figma. This process involved a combination of user testing and iterative revisions of my prototype.
At this stage, it was important for me to avoid using colour in these wireframes so that the primary focus would be on functionality rather than aesthetics.
In total, I went through 2 rounds of user testing with 5 testers each, for a total of 10 testers. Using feedback I got from this process, I developed subsequent versions of my initial prototype.
Version 1: Initial Prototype
Version 2: Revisions after first round of testing
Version 3: Revisions after second round of testing
Prototype Comparisons - Landing Screen
User Feedback: "It would be nice to see how far each location is so I know which one is closest to me."
Revisions: I added more useful information to the second and third prototypes, like icons depicting a facility or instructor and travel distances for each location.
Prototype Comparisons - Quick Match Results
User Feedback: "There needs to be more navigation so I can go back and forth between the screens."
Revisions: I saw the opportunity to add functionality like a back button and travel distance in the third iteration, since this comment was brought up by one of the testers.
Prototype Comparisons - Selected Result Screen
User Feedback: "It would be nice to know more about the owner of this location so I can feel safe when I visit."
Revisions: In Round 1 of user testing, users wanted to know more about the owner of the selected location. So, I added an Owner Profile section in the second iteration. However, most of Round 2's testers mistook the newly added section for a Review section, so I added the caption "Owner Profile" in the third prototype. Simple fix!
Prototype Comparisons - Confirmation Screen
User Feedback: "I don't feel like I would use the call or text feature in the app."
Revisions: During user testing, I found that many testers found no need of the Call or Text buttons at this stage of the reservation process, so I removed them in the third prototype to simplify the flow.
Prototype Comparisons - Schedule Screen
User Feedback: "I'd like to see what my plans are for a particular date, or I'd like to add them."
Revisions: Some testers felt that there was an opportunity to add more information at the bottom of the screen, so I added the activity dials from the Landing Screen so users can keep track of their goals for the week.
Phase 4: Brand Development
Moodboard
I created a moodboard on InVision to set the tone and feel of the brand. I came up with these key words to describe the feel of my app:
Energetic
Vigorous
Warm
Upbeat
Tenacious
Colour Palette
Extracting the colour from my moodboard, I began to play around with different tints and shades for the Primary and Secondary colours.
Having a variety of options of tints for the Primary hue, as well as a heavy use of Neutrals definitely aided in creating balance in the colour injection process.
I used the Secondary colours for buttons and other call-to-actions throughout the app. I wanted to be subtle with the Secondaries and the Accents so as to not overcrowd the design.
Wordmark Development
Every good brand needs a logo to tie it together!
As I thought about my wordmark (logo), I came up with the word "rebuff" as a combination of the word "buff" and the prefix "re-" in terms of "re-doing." I felt this was consistent with my persona's traits of being determined, motivated, and energetic despite constant setbacks in training disruptions.
Eventually, I started playing around with the letters and tried creating the shape of a barbell with the word itself. I liked this idea and rolled with it.
App Icon
Now for the app icon.
I wanted to use the Neutrals and Primary colours from my palette because they were the most prominently used in the app itself.
I tried out different designs and asked some of my peers for feedback. The most popular design came out to be the one in the bottom-left: a simple logo with a simple gradient. Perfect!
High-Fidelity Prototype
After deciding on the colour, wordmark, and icon, I finally developed my final prototype!
Marketing Website
To further develop my brand, I created a marketing website that highlights the key features of my app. I wanted to make sure the design targeted athletes and fitness goers and focused on the solution Rebuff provided. I did this by:
- Providing key visuals of athletes and fitness activities
- Showing the convenience of Rebuff with a simple 3-step process
The website has designs for both web and mobile. Here is a snippet of the web design!
