According to data from Mexico’s 2021 Physical Activity and Exercise Module, 39.6% of people over 18 are physically active. Those who do not exercise consistently cite lack of time at 44.3%, work related fatigue at 21.7%, and health issues at 17.5%.
User Flow
Wireframes
Prototyping
Web development
Roberto Patrón | Product Designer, UX/UI Designer, No Code Developer
Brajhan López | Full Stack Developer
Youssef Sabbagh | Backend Developer
Ana Perez | Front End Developer
Figma
FigJam
Maze
Webflow
Google Analytics
Hotjar
Google Forms
To learn more about our potential audience, we conducted a broad audience survey that provided general data on usage, attitudes, and behavior. The data gave us a quantitative foundation and greater statistical confidence about the problem. Our results aligned with studies conducted by other organizations.
We used user personas to clarify who we were designing for and to provide a communication tool that conveyed user needs to stakeholders.
.webp)
“I would like to exercise, but I do not have the time or guidance.”
Age: 30
Occupation: Public Sector Employee
Socioeconomic Status: Lower Middle Class
Technology Proficiency: Moderate
Accessibility Accommodations Needed: No
Context:
He spends most of his time sitting at his work computer and always keeps his phone nearby. There are no sports facilities close to his home or workplace.
Goal:
Build greater physical vitality to spend more quality time with his children.
Concerns:
“I feel anxious and depressed, and I have trouble sleeping.”
Age: 35
Occupation: Accountant
Socioeconomic Status: Lower Middle Class
Technology Proficiency: Moderate
Accessibility Accommodations Needed: No
Context:
She works full time in an organization serving the public and private sectors. She has felt this way for some time but has not taken action. Her family and social environment create a sense of chaos.
Goal:
Achieve a state of mental well being.
Concerns:
To explore the tasks users perform to achieve their goals, we applied the Jobs to Be Done framework. We created two canvases to identify the job executor and the market. With those elements defined, we established the core functional job using statements collected from prospective users who matched the profile.
To gain a complete view and identify innovation opportunities, we created a job map covering the stages of define, locate, prepare, organize, confirm, verify, execute, monitor, modify, and conclude.
We shared the core functional job with collaborators to align our efforts:
We needed a system that provided the tools required to care for physical and mental well being. Exercise, nutrition, or psychology alone would not solve the problem; an integrated approach combining all three was essential.
Prospective users needed to optimize their time and find efficient ways to care for their physical and mental health. The product needed to feel valuable with minimal effort.
Users had limited time to exercise and build healthy habits. It was essential to provide an accessible tool that could adapt to different usage contexts.
View the user flow in greater detail
View the wireframes in greater detail
During development, we chose Webflow. However, the backend could not fully support the planned user flow. We adapted the design and masked certain processes, such as sending invitations to online sessions manually instead of automating them.
After launching the first pilot solution, we monitored the user experience quantitatively. On average, users stayed on the page for eight seconds and most took no action.
Usability TestingFrom May 1 through May 31, 2023, 5.5% of visitors started the appointment booking process, while only 0.3% completed it successfully.
%2017.59%201.png)
From May 1 through May 31, 2023, 5.5% of visitors started the appointment booking process, while only 0.3% completed it successfully.
%2012.51%201.png)
We selected 10 users from the Zona Running database and asked them to book an appointment on the site. We gathered firsthand feedback:
Based on performance monitoring and moderated testing, we identified the need to optimize the appointment request process and design new interfaces that properly met accessibility and usability standards.
The new redesign is in development to better address user needs and align with the findings. To support implementation, we provided detailed CSS specifications and used Figma Dev Mode to accelerate design handoff.
%2022.52%201.png)
After our second iteration, feedback channels revealed additional opportunities:
These needs led us to rethink the concept and optimize the user flow for booking professionals on the platform. This new concept is currently being designed; this is the progress made on the home page hero section.
Through regular optimizations based on usability testing, we created greater value for users. We built sections, processes, and improvements as we identified opportunities across the site.
Our site increased trust in the digital product and strengthened the brand's position. This impact enhanced our marketing campaigns, automated part of the sales funnel, and helped users evaluate the value proposition more quickly.
As a result, we reduced the conversion process time by approximately 33%.
Improving product development efficiency by 59% with a scalable design system.
%2011.18.20%E2%80%AFp.m..png)
Achieved a 4% conversion rate in the first month after launch.
Redesigned an event registration flow, achieving an 18.35% conversion rate and 25.97% new account creation.
