CASE STUDY:
FITBOXING HOME
Briefing reception
Design sprint
UI
Business Strategy
Written by Roberto Arcos
Reading time: 3 minutes
Role: UI Designer
Deliverables: Proposed mobile interface : Prototyping
THE PRODUCT
App for users who train Fitboxing at home
Based on a detailed brief provided by the client, based on a previous user study. This project focused exclusively on the interface design, creating an intuitive and attractive solution that reflects the energy of fitboxing. The product had to include various functionalities such as registration, workout selection, progress tracking, instructional videos and a community section.
Role
My role in this project focused on designing the user interface for a mobile application, in response to a predefined brief and existing user research. As a UI designer, my main responsibility was to translate the client's requirements and objectives into an intuitive, attractive and functional interface that meets the needs of the end user.
Although time was limited, I was able to efficiently manage the available resources, make informed decisions and perform quick iterations based on user feedback to meet the product objectives.
Responsabilities
UI Design
Deliverables
Presentation and sale of the product
Tools
Figma
Optimal Workshops
Notion
Google Meet
Photoshop
AI
Design process
Sprint 1: I understand and define
I review the brief and existing user research to understand the goals and needs of the project.
I conduct a quick ideation session and prioritize key interface features.
I create sketches of the main ideas and select the best options.
Sprint 2: design and prototyping
I convert selected wireframes into detailed digital designs.
I develop a high fidelity interactive prototype.
I review and validate the prototype with the team to ensure it meets the requirements of the brief.
Sprint 3: testing and iteration
User testing
Analysis of results
Conclusions, adjustments and iterations
THE PROBLEM
I understand the briefing
Starting the project, I dive into the briefing to understand the client's requirements and expectations. I visualize the end users and their needs, focusing on designing an interface that meets their training goals and promotes participation in the fitboxing community. This initial step sets the framework for the design, guiding me towards creating an effective user experience focused on the needs of the target audience.
Who are the protagonists?
The client, undertaking a new business idea, entrusted me to design the aesthetics of his company to adapt it to this new concept, providing user research to base this design. The second protagonist, the user, is at the center of this design; based on the research provided, we extended the study towards visual design and user experience, using external references to enrich and personalize the proposal.
Excerpt from analyzed briefing
Taller con cliente
I organize a client workshop to synthesize research findings and prioritize key functionalities. I use visual methods such as empathy maps, journey maps and impact and effort matrices to facilitate discussion and decision making.
Framework objectives and KPIs
I conduct interviews with key stakeholders to validate and deepen existing research findings and in the workshop, finalize and define the project objectives, as well as the key performance indicators (KPIs) that will guide the design and evaluation of the product's success.
I define the problem
The problem lay in the lack of interfaces adapted to home fitboxing, as opposed to applications for gyms or strength training at home. A visually appealing and innovative interface needed to be designed that would also effectively motivate the user in a home environment, where measuring real training metrics is a challenge. This scenario posed a complex task: to create a unique home fitboxing experience from scratch.
Benchmarking
I spend time studying in depth what the competition is doing in the world of fitboxing. I look at other similar apps and platforms in detail, seeing what works and what doesn't work. This research helps me better understand how to stand out and offer something unique to our users. It's like having a map of the terrain before embarking on a journey: it helps us make the best decisions for our destination.
How do I positively impact business?
I focused my efforts on maximizing the value and profitability of the fitboxing application. I prioritized functionalities that improved user experience and increased satisfaction, which contributed to customer retention and attraction. Designing an intuitive and attractive interface also helped strengthen the brand and increase the user base, generating a positive impact on the commercial success of the product.
How could you design a unique experience for fitboxing at home?
I focused on integrating tracking and motivational features to offer a unique experience that would transform the way people practice fitboxing at home.
Benchmarking
Information architecture
The application is highly scalable. That is why I consider it fundamental to design a solid information architecture from the beginning. Not only to generate an intuitive and efficient navigation, but also to be able to add new functionalities in the future without generating technical debt.
Onboarding
Login
Home
Training sessions
Social
Profile
Regestration
THE SOLUTION
Guidance, motivation and community
Facing the challenge of designing an at-home fitboxing experience, I focused on two pillars: personalized motivation and active community. I implemented adjustable goals, progress reminders and reward systems for motivation, while social features, such as group challenges and message boards, promoted interaction and mutual support among users. This combination created an immersive and socially enriching experience.
Wireframe logros conseguidos
Wireframe Entrenamientos
The guide: training and tutorials
What I do: In the Guide section of our app, I provide a complete at-home fitboxing experience by carefully selecting a variety of workouts, routines and tutorials.
Why I choose to do it: This selection is made to suit different skill levels and fitness goals of our users. Each workout is accompanied by relevant data on duration, intensity and health rewards, ensuring users make informed choices and stay motivated on their fitness journey.
Personalization of training sessions
Equipment customization
Training
Motivation: gamification, data and user retention
What I do: In the profile section of our application, I provide users with a dedicated space to showcase their progress, data and everything related to their fitboxing progress.
Why I choose to do it: This functionality is designed to keep athletes motivated and engaged with their training. It includes gamification elements and graphs with real-time statistics, which not only enhance the user experience, but also drive retention and engagement, contributing to the growth and commercial success of our app.
Gamification with weekly trophies
Gamification with monthly trophies
Application settings
Community: more motivation, identity and loyalty
What I do: In the Community section of our application, users can interact with other members through features such as chat, friend requests, and comparison of results and training data.
Why I choose to do it: This functionality not only encourages interaction between users, but also promotes a sense of belonging and mutual support. By creating an active and engaged community, we not only enhance the user experience, but also strengthen brand loyalty and increase user retention, which contributes to the continued growth and success of our business.
Chat functionality
Real-time comparison of results
Visual identity
I decided to keep the client's proven and successful corporate identity, adapting it to contemporary design trends for the new business model. This involved not only visually updating the application to make it more attractive, but also enriching the user experience with dynamic interactions and animations, ensuring that the essence of the brand was preserved in every aspect of the redesign. Of course, I brought in a new design system in order to gain consistency in future iterations.
It is important to use a UI KIT in order to maintain consistency and allow the product to be scalable.
UPPERCUT DESIGN SYSTEM
UI Kit
Color palette
Eire Black
#181921
Ripe Mango
#FFCC26
Aquamarine
#86FCE4
Blanco
#FFFFFF
#181921 (Deep Black): Provides a strong contrast that makes the rest of the palette stand out, conveying modernity and focusing attention on the main content for intuitive navigation.
#FFCC26 (Vibrant Yellow): Highlights interactive elements and sections, symbolizing energy and optimism to maintain motivation and stimulate user interaction.
#86FCE4 (Light Turquoise): Used in tracking interfaces and menus, evoking tranquility and well-being, complementing the energy of fitboxing with a sense of freshness.
#FFFFFF (White): Ensures legibility and cleanliness, providing contrast with dark backgrounds and vibrant colors, thus facilitating a clear and accessible user experience.
Typography
Helvetica Neue
Aa
This typeface brings a clean and professional aesthetic, enhancing legibility and clarity on mobile devices. Its versatile and timeless design reinforces the accessibility and elegance of the interface.
KNOCKOUT 26
A
It provides a bold, eye-catching touch, ideal for capturing attention and highlighting important headlines or calls to action. Its robustness and clarity in compact spaces enhance the energy and dynamism of the application.
THE OUTCOMES
Outcomes 👍
Impact 🚀
How to measure it 📊
My headaches 🤯
User impact
UI design that captures the essence of fitboxing
- UI Surveys
- Interaction time
- Visual user feedback
Translating the dynamism of fitboxing into static visual elements taught me the value of iteration in design and the importance of testing.
Entrance to the Market
UI distinguishes in digital fitness marketplace
- Visual differentiation analysis
- First impression feedback
- Design comparison with competitors
Deepen in design trends and visual differentiation. I learned to balance innovation with familiarity to capture and retain the user's attention.o
Potential KPIs
UI driven by engagement KPIs
- Click-through rate
- Design conversions
- A/B testing of UI elements
Analyze how visual decisions directly affect engagement and conversion, leading me to constantly optimize the interface.
Future scope
UI adaptable to future expansion
- Design flexibility
- Visual scalability
- UI adaptability
Preparing the UI for future expansions and modalities showed me the need to create a scalable design system.
EXTRA: PROTOTYPING
Are you curious to see the complete prototyping of the application?