Context
More than a gym, a movement experience
In a world where traditional gyms prioritize machines and weightlifting, Fórmula Salud wanted to offer something different. Their approach goes beyond conventional fitness, focusing on learning, adaptation, and improving performance through movement.
However, their website didn’t reflect this philosophy at all. The user experience was confusing, the information hierarchy didn’t guide visitors effectively, and the unique values of the center weren’t highlighted.
How could I redesign Formula Salud's website to truly reflect its essence, connect with its audience and offer a seamless user experience and increase the number of users?
Goals
Elevating the digital experience
The goal of this redesign was not just to improve the website visually but to create a functional, engaging, and scalable platform that aligns with Formula Salud’s mission.
01.
Improve user experience: streamline navigation and structure content intuitively for easy access to key information.
02.
Enhance brand identity: ensure the website visually communicates the philosophy of movement, adaptability, and holistic health.
03.
Optimize conversion: encourage more sign-ups, class bookings, and inquiries through clear CTAs and persuasive design.
04.
Increase user engagement: provide valuable content, interactive elements, and an intuitive design to keep users engaged.
05.
Ensure responsiveness: create a seamless experience across desktop, tablet, and mobile devices.
06.
Boost SEO and discoverability: optimize performance, structure metadata, and enhance search visibility.
Process
From analysis to execution. Website audit: understanding the starting point.
The first step was conducting a comprehensive audit of the existing website to identify pain points, usability issues, and areas for improvement. This included:
Assessing navigation and user flows to ensure a seamless experience.
Evaluating content clarity and structure, focusing on readability and hierarchy.
Identifying accessibility and responsiveness gaps to enhance usability across all devices.
Analyzing SEO to identify technical optimizations.
Reviewing visual consistency, including the use of images and branding elements.
Examining tone and vocabulary, ensuring the language was simple, engaging, and aligned with the target audience.
Website audit.
From analysis to execution. Competitive benchmarking.
To gain industry insights, I analyzed leading fitness and health websites, studying their:
User experience (UX) best practices
Visual identity and branding
Site structure and information hierarchy
Conversion strategies (CTAs)
Competitive benchmarking.
From analysis to execution. Information architecture: structuring the experience.
With insights from the website audit and benchmarking, I reworked the site's structure to ensure a more intuitive and user-friendly experience. A well-organized information architecture is essential to help users find key details quickly and support business goals effectively.
During this process, several critical issues were identified:
Essential information like schedules and pricing was difficult to find. The class schedules were buried within different sections, and pricing details were scattered across multiple pages, making it frustrating for users to access fundamental details.
Workshops and special events were not displayed anywhere on the site, despite being an important offering of the gym. This meant potential clients were unaware of additional value-added services.
To address these issues, I implemented:
01.
A redesigned sitemap that prioritizes user needs and business goals.
02.
A clear hierarchy of information to enhance readability and streamline navigation.
03.
Improved content categorization to increase discoverability and ensure that essential details like schedules, pricing, and workshops are easily accessible.
In the image below, the introduced changes are highlighted in red, showcasing the new structure that enhances clarity and usability.
Sitemaps before (top) and after (bottom)
From analysis to execution. Wireframing.
I started with low-fidelity wireframes to map out:
The layout of key pages
Content placement to enhance engagement
A user-friendly navigation flow
These wireframes allowed for early validation and refinement before moving into high-fidelity designs.
Wireframes of the landing page
From analysis to execution. Designing and prototyping in Figma: bringing the vision to life.
After, I moved on to developing a high-fidelity, interactive prototype in Figma, ensuring the design was both visually appealing and functionally effective.
🎨 Design system, UI components
To create a visually cohesive and accessible experience, I established a consistent color system with appropriate contrast ratios for readability. The typographic system was built around a single font, using different weights to create hierarchy and improve scannability. This approach ensured clarity while maintaining a strong, unified visual identity. Additionally, border radius and shadows were standardized to give the interface a modern and polished look while reinforcing design consistency.
Body text sizes were carefully set to 15px on mobile and 18px on desktop, maintaining readability and usability. Buttons and interactive elements follow the recommended 48x48px tap target size, with text inside buttons at a minimum of 16px to ensure clarity. Additionally, hover interactions were implemented to improve keyboard navigation and screen reader compatibility, making the website more inclusive for all users.
Design decisions
📱 Accessibility considerations
Using the Contrast Grid to verify that all text elements meet WCAG contrast standars
To simulate various types of color blindness and confirm that critical information remains distinguishable I used the Color Blind plugin. The website was tested against six types of color vision deficiencies, and in all cases, key content remained distinguishable. However, in Achromatopsia and Achromatomaly, the contrast of the footer icons was lower than ideal. Since these icons are purely decorative and accompanied by descriptive text, they do not pose a usability barrier. Nonetheless, minor refinements—such as increasing contrast, adding a slight shadow, or ensuring clear hover states—could enhance visibility.
While the site already meets accessibility standards, continuous testing and small refinements will ensure an even more inclusive experience for all users. This reinforces the commitment to universal design principles and an accessible digital environment for everyone.
Using the Color Blind plugin to simulate different color vision
📱 Responsive and component-based approach
Components
High-Fidelity wireframes and grid system (Figma)
🖼️ Visual consistency and image optimization
In addition to designing an attractive and functional interface, I edited and optimized all the images used on the site to ensure a homogeneous and professional appearance while maintaining a visual identity aligned with the brand. Tones, contrasts, and formats were adjusted to guarantee a seamless visual integration and improve site performance.
💻 Home page structure
1️⃣ Hero section
This hero section instantly grabs attention with a high-contrast movement image, reinforcing the gym’s philosophy. The main headline appeals directly to user motivation, setting the tone for the site. The black-and-white imagery with red accents strengthens brand consistency and enhances visual impact.
The CTA ("Prueba gratis") is strategically placed for maximum visibility, encouraging immediate engagement and driving conversions right from the first interaction.
2️⃣ Philosophy section
This section introduces four flip cards that represent the key values of Fórmula Salud’s approach to movement and training. Flip cards were chosen to provide a dynamic and intuitive way to present information, ensuring users remain interested while improving retention. This format allows for a quick and digestible experience, avoiding overwhelming text while effectively highlighting the gym’s unique selling points.
3️⃣ Services section
The "Nuestros Servicios" section uses a card-based layout to clearly present the different offerings. Each card contains a brief description and a CTA ("Ver más") that guides users towards deeper pages, improving navigation and user flow. By organizing services into distinct cards, the section maintains clarity and prevents visual clutter. This structured approach enhances readability and visual balance, ensuring that key information is easy to scan.
4️⃣ Team section
The "Nuestro equipo" section showcases the trainers with real images, names, and specialties, reinforcing trust and credibility. By featuring actual photography and personal details, the section creates a stronger emotional connection with potential clients, making the gym feel more approachable and community-driven.
5️⃣ Key stats section
This section highlights key statistics (+200 users, 2 coaches, 34 hours of classes, 100% satisfaction) to reinforce the gym's credibility. Numbers serve as social proof, helping users quickly perceive the gym’s success and reliability. This psychological reinforcement builds trust and encourages new members to join.
6️⃣ Testimonials
A testimonial slider with real Google reviews boosts credibility by showcasing authentic user experiences. The slider format keeps the section compact while displaying multiple reviews. Star ratings reinforce trust and encourage conversions.
7️⃣ FAQ section
The accordion-style FAQ improves navigation by letting users expand only relevant questions, ensuring efficient information consumption. Collapsible elements keep the page clean and structured. This approach reduces friction and encourages self-service exploration.
8️⃣ Contact section
This section features a contact form and an embedded Google Map, making it easy for users to reach out or locate the gym. The form streamlines communication, while the map improves navigation and local SEO, reducing barriers to inquiries and bookings.
9️⃣ Instagram feed
The Instagram feed at the bottom showcases recent activity, reinforcing the gym's community and keeping users engaged. It connects visitors with social media, highlights the gym's dynamic environment, and fosters a sense of belonging.
💻 Other design decisions
I made different design decisions across various pages to align with the content’s purpose and enhance the user experience.
On the Group Classes page, I opted for a carousel layout for images to maintain a clean and focused interface while preventing visual overload. Since this section primarily provides detailed descriptions of each class, the carousel allows users to engage with one image at a time while keeping the layout compact and easy to navigate. This design choice also improves mobile usability, ensuring smooth scrolling without excessive vertical space.
In contrast, on the Facilities page, I chose a grid-style image gallery to display all visuals at once. Users exploring this section often want a quick and comprehensive overview of the space before making a decision. By presenting all images upfront, visitors can easily scan and get a clear sense of the gym environment, reinforcing transparency and building trust.
Each layout was carefully selected based on usability, content consumption habits, and user expectations, ensuring the most efficient and visually appealing way to present information.
Carousel - group classes page (top) and gallery - facilities pages (bottom)
I adapted the pricing presentation to match the nature of each service, ensuring clarity and ease of comparison for users.
For group classes and personal training, I used a table format, as the primary difference between plans is the number of sessions. This structure allows for a quick and straightforward comparison.
On the nutrition page, I opted for a pricing table, since the differences go beyond, including services like anthropometric assessments and personalized meal plans. This format makes it easier to compare plans visually and highlights the most balanced option to guide users in their decision-making.
This approach enhances usability and improves conversion rates by presenting information in a clear and accessible way.
Pricing formats: comparison table (top) and tiered pricing (bottom)
Results
Iteration and testing: refining the experience
To ensure a seamless user experience, I conducted internal usability testing, analyzing interactions and identifying areas for refinement. Based on feedback, several UX/UI improvements were implemented, such as removing the Instagram feed from all pages, redesigning the nutrition page with a more visual approach using step-based cards, and introducing a dedicated section for upcoming events on the workshops page to enhance discoverability.
Additionally, I refined the typographic hierarchy, making slight adjustments to font weights and section titles to create a more cohesive and balanced design across all pages.
The final design was implemented in WordPress using Elementor and other plugins. To enhance flexibility and maintain consistency, custom CSS was implemented to refine design details beyond the default styling options. This allowed for greater control over responsiveness, spacing, and visual hierarchy, ensuring a polished and adaptable user experience across all devices.
On the SEO front, I focused on optimizing meta titles, descriptions, and alt text to improve search engine rankings while also enhancing site performance by optimizing images and refining heading structures (semantic HTML structures) for better accessibility and indexing.
You can explore the final website and experience the transformation firsthand at formulasalud.es.
Learning
There was room for improvement
The work doesn’t stop at launch. Using Google Analytics and Hotjar, I will continuously analyze user behavior, engagement metrics, and interaction patterns to identify opportunities for further optimization. Heatmaps and session recordings will provide valuable insights into how users navigate the site, allowing for data-driven adjustments that enhance usability and conversion rates.
Additionally, the website will continue to evolve with new features and improvements, ensuring it remains aligned with user needs and business goals. Regular updates will be made to refine the experience, introduce fresh content, and adapt to changing trends, keeping Fórmula Salud’s digital presence dynamic and effective.
💛 This project has been full of valuable learnings. Thank you, Fórmula Salud, for giving me this opportunity to grow and improve as a designer. Excited to keep learning and evolving! 💛
