WRAPs Boxing Mobile App
Client: Wraps Boxing Gym Orange County
Project: End-to-End Mobile App Design
Duration: Approx. 2 weeks
Role: Product Designer
Project Overview
Wraps Boxing Gym is the premier boxing fitness center in Orange County. They started off in 2010 as a hole-in-the-wall gym that had repeatedly pumped out several title-winning boxers. But as of last year, their owners wanted to go a different direction with Wraps that coincided with their facility’s physical expansion. With all of the new space, they’ve decided to welcome fitness enthusiasts of all levels who are eager to learn how to box for self-defense, fun, or just simply for weight-loss.
They do frequent pop-ups and social media marketing but complained that they were not able to onboard potential clients without actually being there to sign them up with a clipboard and sign-up sheet. They recruited me to design their mobile app and to reconstruct their new brand identity.
Research
It’s not hard to find athletes or fitness enthusiasts but combative sports and martial arts don’t appeal to everyone. The research phase of this design project was likely the most substantial challenge of the entire process. Furthermore, I determined early on that I should also interview boxing gym owners/administrators as well to gain insight into what was necessary in the onboarding process and what would have been good to have in order to mitigate potential anxieties in would-be members.
Provisional Personas
The Competition
Interviews
In-person and remote interviewing was the primary research method employed in pre-design. Fortunately, finding boxing gym admins wasn’t difficult and a working solution to recruiting suitable onboarding participants was to be just a bit less granular in our criteria. Recruiting fitness class enthusiasts of all kinds; those that could onboard and use or would like to use a fitness class scheduler was that solution.
Research Goals
Discover management needs in regards to client onboarding
Discover trainer needs regarding what should be expected of client upon arrival
Discover trainee pain points regarding gym sign-up, program confusion, and concerns
Extract Wraps’ class curriculum description, schedule, class capacities, pricing
Extract clients needs, wants from a Wraps boxing onboarding/scheduler
Discover what might be intimidating about class sign-up
Discover what might be delightful about class sign-up
Develop personas and a list of wants and needs for gym onboarding and/or scheduling
The resulting information that was compiled after the interviews worked well with the provisional personas that were created at the start of the project. Moving forward, two personas were developed as resulting solely from the information rather than assumption:
Personas
Evan was a necessary archetype to consult because of his necessity to be involved with his gym. Some look at their fitness centers as a place of sanctuary. Therefore, it would be a good idea to have a Wraps VIP be the judge of what would work best for the design of the app’s daily features. Julie, was to be consulted for the other core app feature: onboarding. She is as driven as Evan but simply in a different way. She’s not the least bit familiar with sparring or even being aggressive in her movements. All she needs is to be reassured to get past that first hurdle.
Summary of Findings
All would-be clients (non-admins) shopped around for the right place. All reasons for preference varied but none sited big box gyms for their first or even secondary choices. Cost, interpersonal involvement, and program scope (beginner - advance) were determining factors.
The common thread between all interview participants were the need to feel challenged with 2/3 expressing the desire to know what to expect on the first day of class: fighting stance, gear, code of conduct, equipment needed, class times/descriptions
A majority of the interviews (66%) cited the possibility enjoying a team environment or the possibility of new friendships in a boxing class. Boxing owner, Mike of FYT, mentioned the importance of T.O’s as in-person testimonials that alleviate pre-first day anxieties.
According to Mike (FYT) our key boxing fitness center consultant, the onboarding process is fairly simple. The fact that our client interviews did not mention big box gyms with serious consideration meant that most of Wraps clientele would be deliberately looking for a boxing program. Therefore, the real enemy in conversions would be (most often): fear.
Project Parameters
Simplicity was to be an ally to the design process. To overcomplicate onboarding would only likely scare away those already anxious and a bloated feature set would frustrate the gym’s most active members. After a look at our competition, I decided to widdle down the common feature sets into a streamlined roadmap that would serve as the guidelines for the design.
Roadmap
Mapping Information & Feature Set
Wraps Mobile App Sitemap
The information was organized around a navigation bar in order to limit the possibilities of where a user may need to venture to find necessary or desirable information or features.
Flows
Two user and task flows were developed to guide our two personas to the completion of their main task.
While both began at the splash screen, a new user like Julie would be shown the signup/login screen while Even would be taken to the home screen.
Julies flow is largely a series of predetermined modal screens that deposits into the calendar feature in order to schedule her first session.
Evans flow determined by his own personal psychology; Evan checks back to his user stats because he is competitive and wants to see how he is doing. In contrast, Julie’s experience is driven by Wraps onboarding process.
Design
With the flows in order and the component library in place, the app was to begin taking shape. Wireframing began by sketching out the scenes Evan and Julie would see as well starting a foundational component library.
Moodboard
The aesthetic development for the Wraps app design coincided with their rebranding. While I immediately went with several images of combative athletes, I wanted to draw in a bit of mystery and even a pinch of sultriness to temper the brutality of boxing. After all, the gym wanted to be as inclusive as possible.
Regarding app screens, I took a look at what was popular and iterated on it as well as what was inline with the direction we were going. For type, I chose a metal font called “Vindica” for the logo to give it some fashionable edge and a very simple sans serif for the type.
UI Design Kit
Ultimately, I decided to keep the colors to black and white but punctuated with a loud purple in place of any over-aggressive red or gloomy blues that may be the go-to for boxing brand identities. With this tone, the image still appears active, modern, even luxurious.
The app sessions and posts are all organized in clear spacious boxes with CTA’s in high contrast.
Hi-Fidelity Designs
The user flows were then populated with photography, color, samples sessions, and icons. All we had to do next was test the gyms new product! So that’s when I started prototyping…
Test
Prototyping
Prototyping was a delight for this project. I had a chance to navigate through an excited newcomer eyes and imagine what an ambitious “gym rat” would like to see while tailoring the process to be as entertaining as my current skills allowed.
But this was only a means to an end. No matter what had been developed up until now, it needed to be tested.
Usability Testing
Objectives:
Test functionality of boxing center onboarding/scheduling mobile app
Test path efficiency from
Splash screen to enrolling
User home to signing up for gym challenge
Test CTA awareness and effectiveness of CTA design in navigation
Analyze results and optimize for faster, more efficient usability
Methodology:
In-person observation: participants will perform the tasks pertaining to the given
scenario on the current high fidelity Wraps app prototype via my laptop.
Remote observation: participants will perform the tasks pertaining to the given
scenario for this testing phase while screen sharing on Zoom/Google Meet.
Findings
Participants:
4 total: (2) men; (2) woman
Age range: 21-33
Fitness enthusiasts or those interested in fitness
Qualitative Data:
3 out of 4 users found no need to offer any suggestions; the remaining participant suggested background pictures of people using the app, an aesthetic suggestion.
4 out of 4 users found the experience painless.
2 out of 4 users remarked on the brevity of onboarding and delighted in how quick of a process it was.
2 out of 4 users enjoyed the colors and/or icons and photography choices.
100% of tested participants most consistently expressed appreciation for the applications learnability, citing the calendar, session listings, and navigation as simple to use.
Conclusion
Two scenarios were chosen for this testing phase in order to explore the feasibility of the app’s ability to satisfy the amateur and the experienced member. The goal was to:
Make new member sign up painless and reassuring
Be sure that everyday navigation and booking is interesting and engaging
Fortunately, what was discovered via testing actually validated our efforts. There were no significant, universal pain points or holes in functionality. And, while there weren’t necessarily any significant delights in any specific feature, there was a consistent appreciation for the simplicity of the flows as well as the clarity of the screens. No priority revisions are necessary at this time. Newer lifts may incorporate user suggestions or surprise/delight features.
Outside of a few design challenges like weeding out the unnecessary features or recruitment issues like finding supplements for testing a niche sport, the project was a delight. I myself have a lot of experience being in various fitness and sport facilities and I enjoyed the idea of helping those would-be newcomers transition into a fun and active lifestyle. I was once in their shoes as well so the pain points were all too relatable.