Digital Fitness E-Commerce
Responsive Web Design
CITYROW
Fitness
B2C
Team
1-PM, 1-Product Designer, 3+ Engineers, Web Services Team, Marketing Team, Chief Brand Officer
Role
Lead Product Designer
Responsibilities
UX/UI Design, Competitive Analysis, High-Fidelity Prototyping, Usability Testing
Challenge
CITYROW, initially a boutique fitness studio, expanded its offerings by launching a mobile rowing app in 2018 and later aiming to integrate it into a new immersive rowing machine. To support this product launch, CITYROW needed a redesigned website that magnified it's offering of rowing machines, subscriptions, and brand identity. The challenge was to transition from a static site to a CMS-based platform for better flexibility, content management, and testing. The new website needed to prioritize user accessibility, integrate a seamless e-commerce experience for purchasing merchandise, and create flexible, modular components to support quick updates as wells as ongoing marketing efforts.
Business Objectives
Optimize the website to increase conversion rates for Max Rower sales and subscription sign-ups.
Build the website on a CMS to streamline content management, enabling easier updates, testing, and optimization.
Reinforce CITYROW’s brand visibility through visual design, incorporating lifestyle imagery and consistent branding elements throughout the site.
User Needs
Accessible information about the rowers, subscription offerings, features, studios, and other merchandise.
Simple, intuitive navigation was essential for users to easily browse, compare, and make purchases.
A modern, visually engaging design was crucial to highlight the immersive rowing experience and its seamless app integration as well as brand cohesion.
Ideation & Concept Development
Brainstorming
In collaboration with the team, I used sketching and remote whiteboarding to explore modular sections for the site, such as product highlights, subscription details, and customer reviews. We also brainstormed navigation structures to ensure users could easily find product information, pricing, and class schedules across multiple pages.
Wireframing
I created wireframes for key pages like the homepage, product details, app deatials, and subscription landing pages highlighting the flexibility of modular components for easy CMS customization. Prototypes were developed for core interactions, including the checkout flow, to ensure a seamless and efficient purchase experience.
Research & Discovery
user research
We interviewed potential customers, including fitness enthusiasts, gym-goers, and home fitness users to understand their pain points and motivations for purchasing fitness equipment and subscriptions. We also distributed surveys to a broader audience to gather insights on shopping habits, preferred devices, interest in digital fitness content, and decision-making factors. This information helped us identify trends and user preferences for optimizing the website’s design and e-commerce experience.
competitive Analysis
I analyzed competitor fitness brands such as Peloton, Hydrow, and Tonal, focusing on their website designs, e-commerce flows, and product presentation strategies. I observed that these brands effectively used lifestyle imagery to create an emotional connection, prioritized easy navigation for a seamless shopping experience, and highlighted clear value propositions on their product pages to drive conversions and engagement.
key insights
Users preferred a modular design approach that broke large chunks of content into smaller, digestible sections, such as product features, customer reviews, and subscription details. Accessibility was essential, ensuring users could easily navigate the site, including on mobile devices. A seamless e-commerce experience was also crucial, with a smooth checkout flow for users interested in purchasing the rower or subscription.
Design Approach
The design for the CITYROW website emphasized a clean, minimalist aesthetic, focusing on large product imagery, white space, and clear typography to create a luxurious, visually appealing experience. Modular components were developed for each page on the website allowing for easy customization and quick updates by the web services team.
To showcase the rowing machines and workouts in a real-world context, lifestyle imagery and product icons were integrated, highlighting the digital integration with the mobile app. Smooth animations and responsive interactions were designed to enhance usability. High contrast text ensured accessibility and readability, while mobile optimization and keyboard navigation were prioritized to ensure a seamless experience across devices.
Design Principals
Create scalable, reusable components for flexibility across pages without major redesigns.
Prioritize an intuitive, informative, and easy-to-navigate website experience through responsive navigation.
Use atomic branding elements (typography, color palette, iconography) to align with CITYROW's studio and mobile app to create brand cohesion.
Iterative Process
After presenting the initial wireframes, I collected feedback from the product and marketing teams. We adjusted content placements and module arrangements based on the feedback and tested different layouts to optimize the overall user experience.
impact
The redesigned website contributed to improved product sales and subscription sign-ups, with an emphasis on clear product features and easy navigation.
The CMS implementation allowed the web services team to make quick updates and optimizations, increasing operational efficiency.
The visual design aligned closely with CITYROW’s branding, helping to strengthen its premium image in the fitness industry.
The end Product
Final Solution
A visually engaging, user-friendly website built on a CMS, emphasizing CITYROW’s premium products and seamless digital fitness experience. (link to website)
Modular components provided flexibility, and the design highlighted CITYROW’s products, subscription offerings, and brand identity.
Streamlined checkout flow ensured a smooth, intuitive user experience, making purchases easy and efficient.
Usability Testing & Validation
Usability Testing
I conducted usability testing with internal stakeholders and target users to validate the design, focusing on navigation, product information clarity, and the checkout flow for rowers and subscriptions. Key findings included easy navigation, intuitive checkout, and positive reception of modular content. Feedback from marketing and web services teams led to adjustments, including SEO and content management.
Success Metrics
Early testing and internal reviews showed a significant increase in conversion rates, particularly from product pages to checkout, highlighting improved user intent and the success of call-to-action strategies. Analytics revealed higher engagement on product pages, with interactive features like customer reviews and subscription options driving increased interaction. The seamless integration of product details, reviews, and subscription options further enhanced engagement, encouraging users to explore more and proceed with purchases more effectively.
Conclusion
The redesigned CITYROW website successfully delivered a seamless e-commerce experience, strengthened the brand’s digital presence, and improved conversion rates for product sales and subscriptions. The modular design and CMS integration empowered the marketing team to manage content efficiently while maintaining visual consistency.
The collaboration with the web services and marketing teams was key to aligning the design with business objectives and ensuring quick updates post-launch. Modular design provided the flexibility needed for future content and product updates.
The project had tight deadlines due to the launch of the Max Rower, requiring fast iterations and collaboration to meet the launch timeline. Ensuring that the CMS could accommodate both flexible content and high-quality design was a challenge, but modular design solved this problem effectively.
The importance of iterative feedback loops in refining designs. Modular design systems are invaluable for dynamic content management.
Explore advanced personalization features for subscription recommendations. Optimize load times further for an enhanced mobile experience.
CITYROW’s website is super user-friendly and motivating! It made it easy to explore their classes and equipment, and I felt inspired to jump into my fitness journey right away.