Sergio Ramos by John Reed website
UX/UI design - 2021
I had the privilege of designing the website for "Sergio Ramos by John Reed," a prestigious gym in Madrid, Spain. This project was a collaboration with the renowned football star Sergio Ramos, aiming to bring a new dimension to the fitness experience. The design was tailored to reflect Sergio Ramos's unique taste and the gym's distinctive aesthetic, creating a seamless and captivating brand presence. I collaborated with a talented team of developers, project managers, and a creative director, ensuring the final product was visually stunning and user-friendly.
Role
UX/UI Designer, visual design.
The "Sergio Ramos by John Reed" gym project was born from a visionary partnership between Sergio Ramos, one of the most celebrated football stars, and the innovative John Reed fitness brand. Set in the vibrant city of Madrid, the gym was designed to offer a cutting-edge fitness experience, blending high-performance training with unique style and luxury. The project aimed to create a space that not only reflected the dynamic personality and taste of Sergio Ramos but also set a new standard in the fitness industry. My role was to translate this ambitious vision into a digital platform that captured the essence of the gym's brand and provided an engaging online experience for potential members.
Background
The primary challenge in designing the website was blending the distinct visual identities of Sergio Ramos and the John Reed brand. Both brands have strong, unique aesthetics, with Sergio Ramos's taste and John Reed's bold, established presence. The task was to create a cohesive digital platform that honored both identities without compromising either. This required translating the existing brand elements into a seamless online experience, ensuring that the final website was visually striking and functionally robust, reflecting the innovative spirit of the gym.
The problem
The information architecture for the website was designed to be user-friendly and straightforward. The sitemap shows how the main sections, like My Account, Club Details, Class Schedule, and Membership, are organized to help users find what they need quickly. Additional pages provide helpful resources like FAQs and contact information. This clear structure makes it easy for users to navigate, book classes, and manage their memberships, all while keeping the gym's unique style in mind.
Information architecture
The wireframes served as a blueprint for the design and functionality of both desktop and mobile versions. These wireframes provided a clear visual guide for layout, navigation, and content placement, ensuring a consistent user experience across devices. By focusing on the structure and flow, the wireframes allowed us to plan the user journey effectively, highlighting key areas like fitness programs, membership details, and location information. This foundation ensured that the design aligned with project goals, resulting in a user-friendly and engaging final product.
Wireframes
Visual design
The website was built around a robust design system that maintained visual harmony throughout the site. This system featured a distinct color palette, typography, and iconography, all tailored to embody the gym's brand and Sergio Ramos's unique flair. We achieved a flexible and cohesive design framework by organizing design elements into categories like atoms, molecules, and organisms. This approach ensured a consistent visual identity and enhanced the user experience by making the interface intuitive and visually engaging.
Design system
The mockups provide a clear picture of the final design. They bring together bold images and a clean layout that reflect the gym's energetic vibe and Sergio Ramos's unique style. Each page is crafted to be both engaging and easy to navigate, with a focus on clear visuals and a simple, cohesive color scheme. These mockups help ensure that the website will be attractive and user-friendly, giving a real sense of how users will interact with it. By visualizing the design in this way, we can see how all the elements come together to create a seamless experience.
Mockups
The final design combines striking visuals with a user-friendly layout, capturing the essence of the gym and Sergio Ramos's style through dynamic images and clear navigation. By working closely as a team with developers and the marketing department, we ensured the design met key marketing objectives. This collaboration helped create a responsive site that works smoothly on all devices, integrating engaging features that encourage visitors to explore and connect with the brand, effectively showcasing the gym's offerings.
Final design
It was both exciting and insightful to design a website for such a high-profile brand. Creating a digital presence for someone as renowned as Sergio Ramos was a unique and rewarding challenge. Collaborating with a talented team fostered creative growth and skill development. Although the website is now offline due to the gym's closure, the experience provided valuable insights into crafting engaging digital experiences and highlighted the importance of adaptability and teamwork in design.