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.

View Prototype

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

UX Researcher, UX Designer, UI Designer

Project Timeline

10 Weeks


Figma, Adobe Illustrator, Google Slides


Android, Responsive Web

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.

View Interview Guide

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

Athletes have a hard time dealing with inconsistency in their workouts during lockdown measures.

How Might We

How might we connect athletes and fitness enthusiasts who have specific training requirements to the facilities and instructors they need in order to fulfill their training schedule needs?

Phase 2: Ideation


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.

View User Stories

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.


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

View Usability Testing Guide

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."

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."

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

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!

View 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!