Fitnesscorp
Fitnesscorp
Fitnesscorp
Fitnesscorp
ROLE / SERVICES
ROLE / SERVICES
Design & Handoff
Design & Handoff
Design & Handoff
Project type
Project type
Operations workflow platform
Operations workflow platform
Operations workflow platform
COMPANY & location
COMPANY & location
Fitnesscorp / Mexico
INTRODUCTION
INTRODUCTION
INTRODUCTION
INTRODUCTION
While I can’t share all the behind-the-scenes research artifacts (like interview notes or wireframes) due to NDA, I’ll walk you through the full design process, from zero to a fully functional solution, provide some examples of what the artifacts look like and show some real final mockups at the end.
While I can’t share all the behind-the-scenes research artifacts (like interview notes or wireframes) due to NDA, I’ll walk you through the full design process, from zero to a fully functional solution, provide some examples of what the artifacts look like and show some real final mockups at the end.
What makes this project special to me is that it was built entirely from scratch. There was no existing product, which meant I had the opportunity to shape the experience from the ground up. That’s why this one holds a special place in my portfolio.
What makes this project special to me is that it was built entirely from scratch. There was no existing product, which meant I had the opportunity to shape the experience from the ground up. That’s why this one holds a special place in my portfolio.
FitnessCorp is a fitness solutions company in Mexico with over 20 years of experience. They design, equip, install, and maintain gyms for hotels, offices, residential complexes, and fitness clubs. Beyond selling equipment, their value lies in offering full-service support, especially ongoing maintenance, which became the focus of this project.
A design challenge created by the company MailerLite. This was the second step in the hiring process. The purpose of the challenge was, so they could see my design and development skills and understand my process.
FitnessCorp’s maintenance process was fully manual, relying on calls, paper forms, and Word documents. This caused delays, lost information, and poor visibility for managers, coordinators, and engineers. The goal was to create a digital platform that streamlined operations and improved transparency across every role.
FitnessCorp’s maintenance process was fully manual, relying on calls, paper forms, and Word documents. This caused delays, lost information, and poor visibility for managers, coordinators, and engineers. The goal was to create a digital platform that streamlined operations and improved transparency across every role.
FitnessCorp’s maintenance process was fully manual, relying on calls, paper forms, and Word documents. This caused delays, lost information, and poor visibility for managers, coordinators, and engineers. The goal was to create a digital platform that streamlined operations and improved transparency across every role.
FitnessCorp’s maintenance process was fully manual, relying on calls, paper forms, and Word documents. This caused delays, lost information, and poor visibility for managers, coordinators, and engineers. The goal was to create a digital platform that streamlined operations and improved transparency across every role.
01
01
01
01
/
/
/
/
Research
Research
Research
Research
Understanding the Problem
Understanding the Problem
Understanding the Problem
Understanding the Problem
Discovery: Stakeholder interviews, user research, defining goals.
Define: Personas (Jobs to be done), user stories and journey maps.
Ideate: Create goal statements, competitive audit, define core requirements.
Design: Wireframes, style guide, high-fidelity UI in Figma.
Validation: Prototyping, stakeholder testing, iteration on feedback.
Handoff: Documentation, videos for developers.
Discovery: Stakeholder interviews, user research, defining goals.
Define: Personas (Jobs to be done), user stories and journey maps.
Ideate: Create goal statements, competitive audit, define core requirements.
Design: Wireframes, style guide, high-fidelity UI in Figma.
Validation: Prototyping, stakeholder testing, iteration on feedback.
Handoff: Documentation, videos for developers.
The first step was getting a clear picture of how things worked. I interviewed managers, coordinators, engineers, and gym owners, observing their actual workflows.
The first step was getting a clear picture of how things worked. I interviewed managers, coordinators, engineers, and gym owners, observing their actual workflows.
After completing the interviews, I reviewed notes and recordings, then organized the findings into an affinity map. Clustering pain points and behaviors revealed patterns that weren’t obvious at first, helping me uncover opportunities, prioritize needs, and define a clear design direction.
After completing the interviews, I reviewed notes and recordings, then organized the findings into an affinity map. Clustering pain points and behaviors revealed patterns that weren’t obvious at first, helping me uncover opportunities, prioritize needs, and define a clear design direction.
After completing the interviews, I reviewed notes and recordings, then organized the findings into an affinity map. Clustering pain points and behaviors revealed patterns that weren’t obvious at first, helping me uncover opportunities, prioritize needs, and define a clear design direction.
After completing the interviews, I reviewed notes and recordings, then organized the findings into an affinity map. Clustering pain points and behaviors revealed patterns that weren’t obvious at first, helping me uncover opportunities, prioritize needs, and define a clear design direction.
The next step was to create a user personas based on the findings in the affinity map. There are four main personas on this project.
Manager/Owner
Service Coordinator
Engineer
Client (Gym Owner)
The next step was to create a user personas based on the findings in the affinity map. There are four main personas on this project.
Manager/Owner
Service Coordinator
Engineer
Client (Gym Owner)
After the persona comes the user story, which captures what the user wants to achieve in a simple, human-centered way. For Kyle, the story describes his goal, the action he takes, and the benefit he expects.
After the persona comes the user story, which captures what the user wants to achieve in a simple, human-centered way. For Kyle, the story describes his goal, the action he takes, and the benefit he expects.
“As a Service Coordinator, I want a digital system to track service requests and assign engineers in real time, so that I can reduce scheduling errors, avoid losing requests, and save time on paperwork.”
Last but not least in this stage is the journey map, which helps visualize the step-by-step experience a user goes through when interacting with the software.
Last but not least in this stage is the journey map, which helps visualize the step-by-step experience a user goes through when interacting with the software.
Manual workflow → Pen & paper → Word documents → Slow, error-prone, untraceable.
No status tracking for managers or clients → Missed or delayed
Engineers had to manually look for manuals, → Time wasted.
No centralized system = lots of repeated work and frustration.
Manual workflow → Pen & paper → Word documents → Slow, error-prone, untraceable.
No status tracking for managers or clients → Missed or delayed
Engineers had to manually look for manuals, → Time wasted.
No centralized system = lots of repeated work and frustration.
02
02
02
02
/
/
/
/
Define
Define
Define
Define
Clarifying the need
Clarifying the need
Clarifying the need
Clarifying the need
Framing the right problem was critical. I worked with stakeholders to align on three key questions:
What is the core pain point for each role?
Why is this a problem worth solving?
What value would solving it create?
Framing the right problem was critical. I worked with stakeholders to align on three key questions:
What is the core pain point for each role?
Why is this a problem worth solving?
What value would solving it create?
First, I like to create a problem statement to clearly define the main challenge users face, based on research findings. It focuses on the user’s perspective and avoids jumping straight to solutions.
First, I like to create a problem statement to clearly define the main challenge users face, based on research findings. It focuses on the user’s perspective and avoids jumping straight to solutions.
First, I like to create a problem statement to clearly define the main challenge users face, based on research findings. It focuses on the user’s perspective and avoids jumping straight to solutions.
First, I like to create a problem statement to clearly define the main challenge users face, based on research findings. It focuses on the user’s perspective and avoids jumping straight to solutions.
Ana, spends hours juggling paper notes, WhatsApp messages, and Word documents. She struggles to keep track of pending requests, schedule engineers efficiently, and digitize reports, which makes her work stressful and error-prone
Ana, spends hours juggling paper notes, WhatsApp messages, and Word documents. She struggles to keep track of pending requests, schedule engineers efficiently, and digitize reports, which makes her work stressful and error-prone
Next up, it's time for a hypothesis, which is an assumption about how a design solution might solve the user’s problem. It’s not yet proven, but it provides direction for ideation and testing.
Next up, it's time for a hypothesis, which is an assumption about how a design solution might solve the user’s problem. It’s not yet proven, but it provides direction for ideation and testing.
Next up, it's time for a hypothesis, which is an assumption about how a design solution might solve the user’s problem. It’s not yet proven, but it provides direction for ideation and testing.
Next up, it's time for a hypothesis, which is an assumption about how a design solution might solve the user’s problem. It’s not yet proven, but it provides direction for ideation and testing.
If Ana has a simple digital tool that helps her track requests, schedule engineers, and generate digital reports in one place, then she will save time, feel more in control, and reduce mistakes in her daily work.
If Ana has a simple digital tool that helps her track requests, schedule engineers, and generate digital reports in one place, then she will save time, feel more in control, and reduce mistakes in her daily work.
Lastly comes the value proposition, which explains the unique benefit the solution brings to the user. It communicates why this feature is valuable compared to existing alternatives.
Lastly comes the value proposition, which explains the unique benefit the solution brings to the user. It communicates why this feature is valuable compared to existing alternatives.
Lastly comes the value proposition, which explains the unique benefit the solution brings to the user. It communicates why this feature is valuable compared to existing alternatives.
Lastly comes the value proposition, which explains the unique benefit the solution brings to the user. It communicates why this feature is valuable compared to existing alternatives.
Our product is a centralized digital tool that helps Ana track pending requests, schedule engineers, and convert reports into digital format — all in one place.
What does the product do?
It replaces her scattered, manual workflows (pen, paper, WhatsApp, Word) with a single, organized platform that automates scheduling and reporting
Why should the user care?
Because it saves her valuable time, reduces mistakes, and gives her peace of mind by making her daily work less stressful and more efficient.
Our product is a centralized digital tool that helps Ana track pending requests, schedule engineers, and convert reports into digital format — all in one place.
What does the product do?
It replaces her scattered, manual workflows (pen, paper, WhatsApp, Word) with a single, organized platform that automates scheduling and reporting
Why should the user care?
Because it saves her valuable time, reduces mistakes, and gives her peace of mind by making her daily work less stressful and more efficient.
03
03
03
03
/
/
/
/
Ideation
Ideation
Ideation
Ideation
Shaping Ideas from Insights
Shaping Ideas from Insights
Shaping Ideas from Insights
Shaping Ideas from Insights
With a solid understanding of the problem space, I used "How Might We" prompts to spark a wide range of ideas. I went broad first, using sticky notes, sketches, and concept grouping to visualize solutions from different angles without limiting creativity.
With a solid understanding of the problem space, I used "How Might We" prompts to spark a wide range of ideas. I went broad first, using sticky notes, sketches, and concept grouping to visualize solutions from different angles without limiting creativity.
With a solid understanding of the problem space, I used "How Might We" prompts to spark a wide range of ideas. I went broad first, using sticky notes, sketches, and concept grouping to visualize solutions from different angles without limiting creativity.
With a solid understanding of the problem space, I used "How Might We" prompts to spark a wide range of ideas. I went broad first, using sticky notes, sketches, and concept grouping to visualize solutions from different angles without limiting creativity.
Once the ideas were documented, I took a break and returned with fresh eyes to evaluate them based on:
Feasibility – Can we build it with current tech/resources?
Desirability – Does it meaningfully help the user?
Viability – Does it support the business model?
Once the ideas were documented, I took a break and returned with fresh eyes to evaluate them based on:
Feasibility – Can we build it with current tech/resources?
Desirability – Does it meaningfully help the user?
Viability – Does it support the business model?
I then created a goal statement, a concise description of what the product should do, for whom, and how success would be measured.
To deepen the direction, I ran a competitive audit to understand what other service/operations tools offered and what gaps FitnessCorp could fill.
Finally, I outlined the initial functional requirements, giving structure to what the system needed to support before jumping into wireframes.
I then created a goal statement, a concise description of what the product should do, for whom, and how success would be measured.
To deepen the direction, I ran a competitive audit to understand what other service/operations tools offered and what gaps FitnessCorp could fill.
Finally, I outlined the initial functional requirements, giving structure to what the system needed to support before jumping into wireframes.
04
04
04
04
/
/
/
/
Design
Design
Design
Design
From Concept to Creation
From Concept to Creation
From Concept to Creation
From Concept to Creation
With the flows in place, I sketched lo-fi wireframes to explore layout ideas and ensure content placement supported the user’s goals without distractions or worrying about any details.
With the flows in place, I sketched lo-fi wireframes to explore layout ideas and ensure content placement supported the user’s goals without distractions or worrying about any details.
With the flows in place, I sketched lo-fi wireframes to explore layout ideas and ensure content placement supported the user’s goals without distractions or worrying about any details.
With the flows in place, I sketched lo-fi wireframes to explore layout ideas and ensure content placement supported the user’s goals without distractions or worrying about any details.
Design in Action
Design in Action
Design in Action
Design in Action
Before jumping into layouts and mockups, I set the foundation with design tokens. These act as the building blocks of the system, keeping everything consistent and scalable. I defined primitives for colors, typography, spacing, border radius, and sizes.
From there, I created semantic tokens (mainly for colors and typography) to give each style a clear purpose in the interface. All of this was managed with variables in Figma.
Before jumping into layouts and mockups, I set the foundation with design tokens. These act as the building blocks of the system, keeping everything consistent and scalable. I defined primitives for colors, typography, spacing, border radius, and sizes.
From there, I created semantic tokens (mainly for colors and typography) to give each style a clear purpose in the interface. All of this was managed with variables in Figma.
To keep patterns consistent and prepare for scalability, I built a component library. I like to structure it in two ways, either
By complexity: basic, semi-complex, and complex components.
By atomic design: atoms, molecules, organisms, and templates.
Together, these components ensure the design system stays flexible, easy to scale, and efficient to use.
To keep patterns consistent and prepare for scalability, I built a component library. I like to structure it in two ways, either
By complexity: basic, semi-complex, and complex components.
By atomic design: atoms, molecules, organisms, and templates.
Together, these components ensure the design system stays flexible, easy to scale, and efficient to use.
With tokens and components in place, it was time to bring everything to life. The wireframes evolved into high-fidelity mockups, designed to make currency exchange feel clear, fast, and frustration-free, while staying true to FitnessCorp’s style.
While all the software is responsive, the main experience for three of the four roles is in a desktop environment, as they will be using a desktop while using the software most of the time.
Owner
Managers
Service coordinators
05
05
05
05
/
/
/
/
Challenges &
Outcome
Challenges &
Outcome
Challenges &
Outcome
Challenges &
Outcome
Navigating Project Hurdles
Navigating Project Hurdles
Navigating Project Hurdles
Navigating Project Hurdles
No project runs perfectly, and FitnessCorp was no exception. Throughout the process, unexpected challenges emerged that tested the team’s adaptability and collaboration. I'll share the most outstanding ones.
No project runs perfectly, and FitnessCorp was no exception. Throughout the process, unexpected challenges emerged that tested the team’s adaptability and collaboration. I'll share the most outstanding ones.
No project runs perfectly, and FitnessCorp was no exception. Throughout the process, unexpected challenges emerged that tested the team’s adaptability and collaboration. I'll share the most outstanding ones.
No project runs perfectly, and FitnessCorp was no exception. Throughout the process, unexpected challenges emerged that tested the team’s adaptability and collaboration. I'll share the most outstanding ones.
Right at the beginning, the team struggled to align on priorities. Each manager wanted their area addressed first, and there wasn’t a clear roadmap to follow. To solve this, the project manager and I held meetings with all stakeholders to define what truly mattered most. Once everyone agreed on a phased plan, we finally had clarity and a solid direction to move forward.
Right at the beginning, the team struggled to align on priorities. Each manager wanted their area addressed first, and there wasn’t a clear roadmap to follow. To solve this, the project manager and I held meetings with all stakeholders to define what truly mattered most. Once everyone agreed on a phased plan, we finally had clarity and a solid direction to move forward.
Engineers were not part of the original scope, but a manager suggested including them to simplify their maintenance process since they relied on paper checklists and heavy manuals.
I revisited the empathize phase to understand their workflow and designed a mobile experience that fit their needs, allowing them to access digital manuals, checklists, and reports directly from their phones.
Engineers were not part of the original scope, but a manager suggested including them to simplify their maintenance process since they relied on paper checklists and heavy manuals.
I revisited the empathize phase to understand their workflow and designed a mobile experience that fit their needs, allowing them to access digital manuals, checklists, and reports directly from their phones.
After launch, we discovered that service coordinators were delaying or overlooking requests, often prioritizing bigger clients. Even with the system marking pending tasks, managers had no clear way to track overall progress or accountability.
To fix this, I designed a dashboard where managers and the owner can view all service requests, track their status, and see which coordinator is responsible for each region. This made it easier to spot delays, balance workloads, and ensure faster response times.
After launch, we discovered that service coordinators were delaying or overlooking requests, often prioritizing bigger clients. Even with the system marking pending tasks, managers had no clear way to track overall progress or accountability.
To fix this, I designed a dashboard where managers and the owner can view all service requests, track their status, and see which coordinator is responsible for each region. This made it easier to spot delays, balance workloads, and ensure faster response times.
The Outcome of Our Work
The Outcome of Our Work
The Outcome of Our Work
The Outcome of Our Work
The new digital platform unified FitnessCorp’s entire maintenance process.
Engineers can now log service details, access equipment manuals, and generate reports all in one place.
Managers can monitor every request, track service progress in real time, and schedule engineers more efficiently.
Clients can submit requests online and review the full history of completed services.
The system was built on a solid foundation, ready to scale and adapt as the company continues to grow.
The new digital platform unified FitnessCorp’s entire maintenance process.
Engineers can now log service details, access equipment manuals, and generate reports all in one place.
Managers can monitor every request, track service progress in real time, and schedule engineers more efficiently.
Clients can submit requests online and review the full history of completed services.
The system was built on a solid foundation, ready to scale and adapt as the company continues to grow.
The changes did not just simplify operations; they transformed how teams work together.
The request-to-service workflow became 50% faster.
Client complaints dropped by 30%.
Teams gained better visibility, data consistency, and internal coordination.
The company moved from a paper-based process to a fully digital workflow.
Every role reported positive feedback, except perhaps the service coordinators, who can now clearly see when they are falling behind.
The changes did not just simplify operations; they transformed how teams work together.
The request-to-service workflow became 50% faster.
Client complaints dropped by 30%.
Teams gained better visibility, data consistency, and internal coordination.
The company moved from a paper-based process to a fully digital workflow.
Every role reported positive feedback, except perhaps the service coordinators, who can now clearly see when they are falling behind.
03/
Did you like what
you saw?
SEND ME A
MESSAGE
03/
Did you like what
you saw?
SEND ME A
MESSAGE
03/
Did you like what
you saw?
SEND ME A
MESSAGE
03/
Did you like what
you saw?
SEND ME A
MESSAGE
