Swimmers Divided! The UX Redesign That Sparked a Poolside War (But Ultimately Won)

Zino Belkaddas
20 min readApr 22, 2024

Born in the 90s, Swimmers Guide became the bible for pool-seekers. Bill Haverland, a swimming fanatic, meticulously built this resource, listing thousands of pools worldwide. But the digital tide was turning. The website, cluttered and lacking a mobile presence, struggled to keep afloat.

Stepping into this legacy, I led a redesign to ensure Swimmers Guide remained the go-to resource for the modern swimmer. This case study dives into the depths of innovation and user experience, showcasing how we transformed Swimmers Guide for a mobile-first world.

A Legacy of Dedication

Bill’s commitment to “Swimmers Guide” was nothing short of extraordinary:

  • Daily Enhancements: Each day, he enriched the guide with new pools, covering over 13,000 cities and 25,000 facilities worldwide.
  • Unwavering Focus: With the precision of an accountant, he meticulously curated over 27,000 pool listings, making “Swimmers Guide” the ultimate resource for swimmers.

Facing the Digital Tide

Despite Bill’s efforts, the digital landscape presented new challenges:

  • The website began to show its age, feeling outdated against sleek, modern designs.
  • In an effort to cater to user feedback, feature clutter made the site confusing and difficult to navigate.
  • Mobile Accessibility: A glaring issue emerged as 68% of users accessed the site via mobile devices, highlighting the need for a robust mobile experience.
  • Considering Bill’s advancing age, the necessity for future scalability became apparent, ensuring the site’s legacy could be easily managed by successors.

The Transformation Begins

It was at this pivotal moment that I stepped in, tasked with revitalizing “Swimmers Guide” for a new era.

Our high-level goals were to:

  • Optimize and Mobilize: Create a fast, accessible experience across all devices, with a particular focus on a seamless mobile app. This goal encompasses enhancing accessibility, streamlining for clarity, and mobilizing the experience, ensuring that “Swimmers Guide” is intuitive and easy to use for everyone, everywhere.
  • Empower and Engage: Empower users with greater control and choice by offering comprehensive, well-organized pool information and fostering deeper community engagement. This involves reviving the vision of “Swimmers Guide” to resonate with today’s audience and providing a platform for innovation that encourages active participation and feedback.
  • Future-Proof and Innovate: Build a scalable, flexible platform that not only meets current needs but is also ready for future innovations. This includes ensuring the guide’s longevity by making it manageable for future stewards and laying the groundwork for ongoing enhancements that will keep “Swimmers Guide” at the forefront of swimmer resources worldwide.

My Role

As the lead designer in a tight-knit team of four, my role was pivotal in reimagining “Swimmers Guide” for the modern era. Alongside the founder, a junior designer, a product manager, and a developer, I was tasked with the comprehensive redesign of the platform. My responsibilities spanned from initial user research and persona creation to defining the MVP, ideating design concepts, and prototyping. I led usability testing efforts, iterated designs based on user feedback, and closely collaborated with developers to ensure the seamless implementation of the final designs. My work was instrumental in transforming “Swimmers Guide” into an intuitive, accessible, and engaging platform for swimmers worldwide.

Avoiding the Deep End: Planning Before Diving into the Swimmers Guide Redesign

Before diving headfirst into the visual design of the Swimmers Guide refresh, I knew meticulous planning was essential. Just like an athlete wouldn’t jump into a competition pool without proper training, a UX overhaul requires a well-defined strategy to ensure success. Here’s how I navigated the initial stages of the project:

Setting Realistic Expectations: Balancing Scope with Resources

The biggest pitfall for any design project is setting unrealistic expectations. Swimmers Guide’s vast user base and our limited resources demanded a careful balancing act. To avoid scope creep, I spearheaded a collaborative effort to define clear and achievable project goals. Working closely with the development team, we meticulously mapped out the functionalities that could be realistically delivered within the set timeframe and budget.

Taming the Trello Beast: Staying Organized for Maximum Efficiency

With a realistic roadmap in place, the focus shifted towards efficient project management. Trello, a visual project management tool, became our digital command center. We utilized Trello boards as well Jira to organize tasks, track progress, and ensure clear communication between team members. This not only streamlined the workflow but also ensured everyone was aligned on expectations and deliverables.

By prioritizing careful planning, setting realistic goals, and leveraging project management tools like Trello, we avoided the common pitfalls associated with large-scale design projects. This meticulous groundwork laid the foundation for the successful user-centered design process that ultimately transformed Swimmers Guide.

Product Requirements Document

This document serves as a comprehensive roadmap for the Swimmers Guide redesign. It outlines the project’s core objectives, the design tasks we’ll undertake, the deliverables we’ll produce, and the timeframe for completion. We’ll also address any potential constraints, identify the resources and tools at our disposal, and detail the activities involved in the redesign process. Finally, the document clearly defines the core problem statement that will guide our design decisions.

PRD saved in Google docs and attached to Trello card.

Understanding the problem

Before we embarked on the redesign of the Swimmers Guide, we prioritized a deep dive into the core problems plaguing the user experience. “Find the right problem before solving it right,” became our mantra, guiding us to uncover the hidden needs and frustrations lurking beneath the surface of user behavior.

Delving into User Motivations:

Traditional pool discovery methods were cumbersome and inefficient. Our user research revealed a widespread pain point: divers struggled to find pools that met their specific needs. Bill Durrell, the dedicated master’s athlete, craved detailed information about lane availability and water temperature — crucial factors for his training program. In contrast, Jane Doe, the frequent traveler, prioritized accessibility and ease of use when searching for pools during her business trips. These diverse user needs highlighted the limitations of a one-size-fits-all approach to pool discovery.

Cracking the User Journey:

The existing Swimmers Guide platform offered a fragmented user experience. Divers bounced between multiple sources to find basic pool information, book lanes, or connect with fellow swimmers. This disjointed journey led to frustration and ultimately, user drop-off. Our goal wasn’t just about streamlining pool discovery; it was about creating a holistic user experience that catered to the diverse needs of the global swim community.

Crafting the Problem Statement:

Through meticulous user research, a clear problem statement emerged:

Swimmers lack a centralized, user-friendly platform that caters to their diverse needs, hindering efficient pool discovery, seamless booking experiences, and a sense of community.

By clearly defining this problem statement, we established a north star for the redesign process. Every design decision, feature, and interaction would be meticulously evaluated through the lens of user needs, ensuring the Swimmers Guide addressed the core challenges faced by its user base.

Validating Assumptions Through User Research

The initial stages of the Swimmers Guide redesign were fueled by a desire to understand the true depths of user frustrations. While we had assumptions about the challenges divers faced, we recognized the importance of validating these assumptions through user research. Jumping to solutions without a deep understanding of the problem could lead us astray.

Community Features: Develop community features for sharing competitions and training tips.

User Interviews: Unveiling Underlying Concerns

We conducted in-depth interviews with a diverse group of swimmers across the globe. Their voices revealed a consistent theme: the pain points associated with finding the perfect pool. Key quotes from these interviews mirrored the frustrations we aimed to address:

“The current pool search is cumbersome. It takes too long to find a pool that meets my needs.” (Bill Durrell, Master’s Athlete)

“I travel frequently for business and need to find pools easily wherever I am.” (Jane Doe, Frequent Traveler)

“It would be helpful to see more detailed information about each pool, like lane availability and water temperature.” (Michael Rodriguez, Competitive Swimmer)

These quotes underscored the critical need to address user frustrations with the existing pool discovery process. The redesigned Swimmers Guide platform would prioritize efficiency, cater to diverse user needs, and provide access to detailed pool information.

Beyond Interviews: A Multi-Disciplinary Approach

But our research wasn’t limited to conversations. We dove into website analytics, uncovering the hidden patterns of user behavior on the existing Swimmers Guide platform.

Diving Deep with Bill, the Swimmers’ Guide Oracle

Our journey began with Bill, the passionate founder of Swimmers Guide. His 30 years of experience managing the platform meant he had an ocean of user data and stories at his fingertips. Hours flew by as he regaled us with tales of dedicated swimmers, international pool peculiarities, and the ever-evolving needs of the aquatic community.

Bill’s insights were invaluable, providing a historical context and a deep understanding of the user base we were aiming to serve.

By triangulating data from interviews, observations, online communities, and website analytics, we were able to paint a vivid picture of our users. Their goals, motivations, and pain points became crystal clear. This rich tapestry of information formed the foundation for the next crucial step in our design process: crafting user personas that embodied the core user groups who relied on Swimmers Guide.

One of the user personas we did

Analyzing User Research Findings

Following comprehensive user interviews, the next step involved a meticulous analysis of the collected data. This analysis wasn’t just about reading transcripts; it was about diving deep into the hearts and minds of swimmers. Each key insight was meticulously tagged to categorize user motivations, behaviors, pain points, and goals.

This process allowed us to identify recurring themes and patterns within the swimmer base. By segmenting the data in this way, we gained a richer understanding of:

  • What drives swimmers to use Swimmers Guide? (Motivations)
  • How do swimmers currently search for pools? (Behaviors)
  • What specific challenges do swimmers face when using the platform? (Pain Points)
  • What are the ultimate goals swimmers hope to achieve with Swimmers Guide? (Goals)

By systematically analyzing user data, we painted a vivid picture of the swimmer experience, laying the groundwork for a redesign that addressed the core needs and desires of the global swimming community.

I decided to be paperless at this time and used FigJam to do the job.

Consolidating collected insights into “Jobs to be done” stories

The Jobs to be Done framework sheds light on the core functionalities swimmers seek from a pool discovery platform. Here’s how these unmet needs translate into actionable jobs:

Here are the Swimmers’ Unmet Needs rewritten in the JTBD format:

1. Unleash Efficient Pool Discovery and Booking

When I want to find a pool that meets my specific needs (lane availability, location, hours), So I can book my swim time quickly and conveniently.

2. Empower Progress Tracking

When I want to track my swimming workouts and progress, So I can stay motivated and see improvement over time.

3. Craft Personalized Training Plans (Optional)

When I want to optimize my swimming training, So I can achieve my fitness goals more efficiently.

4. Streamline Event Participation (Optional)

When I want to find and register for swimming competitions that align with my skill level, So I can participate in events that challenge me.

5. Foster Community Connections

When I want to connect with other swimmers in my area, So I can share experiences and feel part of a supportive swimming community.

This framework allows us to move beyond features and focus on the core goals that drive user behavior. By understanding these unmet needs, the Swimmers Guide redesign can prioritize functionalities that empower swimmers to find the perfect pool, track their progress, and connect with a like-minded community.

Jobs-to-be-done from FigJam

Charting the Swimmer’s Course: A User Journey Map

Following the meticulous analysis of user research, we embarked on crafting a comprehensive User Journey Map. This map wasn’t just a visual aid; it was a powerful storytelling tool that brought the swimmer’s experience to life. By consolidating all the Jobs to be Done stories into a cohesive narrative, we ensured our design solutions addressed the core challenges and aspirations of the global swim community.

This journey map wasn’t merely a collection of tasks; it delved deep into the motivations, frustrations, and ultimate goals that drive swimmers. We empathized with their anxieties about finding the perfect pool, the desire to streamline the booking process, and the yearning to connect with a like-minded community. By humanizing the research in this way, we became advocates for the user, ensuring that every design decision prioritized their needs and desires.

This User Journey Map served as a guiding light throughout the redesign process. It constantly reminded us of the “why” behind the “what,” ensuring the Swimmers Guide platform transformed from a pool discovery tool into an indispensable companion for every swimmer’s journey.

Leveraging HMW to Unlock Opportunities

User research revealed a key pain point — the difficulty and inefficiency of finding and booking the perfect pool. Swimmers expressed frustration with navigating multiple platforms and encountering cumbersome booking processes.

To transform this challenge into an opportunity for the Swimmers Guide redesign, we utilized the “How Might We” (HMW) technique. HMW fosters creative problem-solving by prompting open-ended questions that don’t suggest solutions upfront.

HMW in Action

We brainstormed a series of HMW questions focused on the “booking experience” section of the user journey map. Here are some examples:

HMW streamline the pool search process to save swimmers time and effort?

HMW integrate booking functionality directly within the Swimmers Guide platform, eliminating the need for multiple apps?

HMW provide users with real-time availability information to ensure a seamless booking experience?

Categorizing Solutions

Once we compiled a robust list of HMW questions, we categorized them based on the underlying solutions they hinted at. This helped identify patterns and prioritize the most impactful features for the redesign.

By leveraging HMW, we didn’t just address the booking frustrations; we actively transformed them into opportunities to improve user experience and streamline the booking process. This approach ensured the Swimmers Guide redesign goes beyond a simple pool discovery tool, becoming a one-stop shop for effortless pool booking.

From FigJam

The groundwork has been laid. We’ve identified the core challenges; now it’s time to translate insights into actionable solutions.

From Insights to Inspiration: Fueling the Design Process

After absorbing user insights for two weeks, it’s time to translate them into innovative solutions. Armed with those insights, I then transitioned to the solution phase. To spark creativity, I meticulously analyzed similar top-performing apps and platforms, capturing inspiring design elements that streamlined pool discovery and booking. These findings were then consolidated into a Figma mood board, serving as a visual touchstone throughout the design process. This ensured the final Swimmers Guide redesign prioritized a seamless and user-centric experience.

All screenshots of ideas are captured and saved in s Figma board.

Prioritizing Exploration over Perfection

The initial stages of design are all about exploration. While crafting the perfect solution might be the ultimate goal, it’s crucial to embrace the value of “rapid prototyping” in the early phases. During this time, the focus is on generating a high quantity of ideas, not necessarily creating polished masterpieces.

Here’s the reasoning behind this approach:

  • Exploration over Perfection: Rough ideas are easier to iterate on and refine. By prioritizing exploration over initial aesthetics, we can quickly test various concepts and identify the most promising solutions.
  • Quantity Fuels Quality: Generating a high volume of ideas increases the chances of uncovering hidden gems. Some seemingly “rough” ideas might spark unexpected breakthroughs or lead to innovative solutions.
  • Detachment for Innovation: Attachment to polished designs can hinder creativity. By embracing the concept of “sh!tty first drafts”, we can explore ideas freely without the fear of discarding them later.

This rapid prototyping approach was instrumental in the Swimmers Guide redesign. By churning out a diverse range of initial concepts, we were able to identify the most effective functionalities and user interface elements. This focus on exploration ultimately led to a more user-centric and successful redesign of the Swimmers Guide platform.

Liked ideas are highlighted with a green marker.

Wireframing in Figma

Following the initial burst of creative exploration, it was time to refine the most promising solutions. To gain a “bird’s-eye view” of the user journey, these ideas were translated into wireframes using Figma.

This approach aligns with the philosophy of designing for the entire user experience, not just individual screens or touchpoints. By focusing on the journey, we ensured the redesigned Swimmers Guide platform would seamlessly guide users towards achieving their goals, minimizing frustration and anxiety along the way.

Laying the Foundation: Building the Swimmers Guide Design System

With a clear vision for the user journey mapped out in wireframes, it was time to establish a solid foundation for the redesigned Swimmers Guide. This crucial step involved crafting a comprehensive design system. Think of it as the building blocks for the platform’s visual identity.

The design system encompassed elements like:

  • Colors: A defined color palette that establishes the overall aesthetic and brand identity.
  • Typography: Consistent typefaces and styles to ensure clear and user-friendly text presentation.
  • Layer Styles: Pre-defined styles for different UI elements like buttons and text boxes, promoting visual consistency.
  • Spacers: Consistent spacing between UI elements ensures a balanced and aesthetically pleasing layout.
  • Buttons: A library of reusable buttons with consistent styles and interactions.
  • Icons: A collection of well-designed icons that enhance user comprehension and streamline navigation.
  • Reusable components: that serve as the building blocks for various screens within the app and website.

By meticulously constructing this design system, we achieved several key benefits:

  • Consistency: It ensured visual and functional consistency across the entire platform, enhancing user experience.
  • Efficiency: Pre-defined styles and elements saved time and effort, allowing for faster design iterations.
  • Scalability: The design system laid the groundwork for future development and expansion of the Swimmers Guide platform.

Investing the time in building a robust design system was an essential step in the redesign process. It laid the groundwork for a cohesive, user-friendly, and visually appealing Swimmers Guide experience.

A new fresh branding

In the midst of redesigning the Swimmers Guide, I noticed the branding, especially the old logo, felt outdated and didn’t match our new direction. Nobody specifically asked for a branding overhaul, but I believed refreshing it was crucial for the project’s success. Understanding the team’s attachment to the original logo, I embarked on a careful journey to craft a new, fresh brand identity that honored the past while embracing the future. Through thoughtful presentations and discussions, I gradually won over the team, securing their approval for a modern brand that truly represents the essence of the Swimmers Guide in today’s digital world.

A new fresh branding

A new onboarding

Solution: The onboarding flow is meticulously crafted to serve as a welcoming guide through the app’s features and benefits, addressing a pivotal insight from user interviews that highlighted the need for greater feature awareness and app functionality understanding. This elegant onboarding sequence not only acquaints new users with the app’s capabilities but also reinforces the value proposition for seasoned users. Through this visually appealing and informative introduction, users are seamlessly transitioned into the app environment, setting the stage for an intuitive, self-explanatory user journey that encourages exploration, discovery, and regular use.

Home screen

Solution: The redesigned home screen embodies a fresh and modern approach, specifically engineered to captivate a younger audience while addressing the burgeoning demand for social interaction and event participation uncovered in our user research.

The interface now boasts a bifurcated “Pools” and “Events” tab structure, offering a tailored experience that aligns with user preferences for locating swim spots and engaging with community events. The ‘Pools’ tab retains the app’s original purpose, facilitating the search for swimming locations, whereas the ‘Events’ tab introduces a dynamic social ecosystem featuring Swim Spots, Swim Groups, and Swim Events.

This socially-driven design, reminiscent of popular social media platforms, not only enhances discoverability but also fosters a sense of community and belonging among users, nurturing engagement and retention. The interface reflects a conscious pivot towards trendiness and functionality, aiming to not just satisfy but also excite the aspirational lifestyle of the modern young swimmer.

Event stories

Solution: Introducing ‘Event Stories’ to the platform injects a dynamic and engaging element that resonates with the social media-savvy, younger generation. Drawing inspiration from the ephemeral and interactive nature of stories on popular social platforms, these visual narratives are not just visually appealing with their clean and elegant design, but also provide an immediacy and a sense of ongoing activity within the app. By surfacing fresh content and real-time updates, stories foster a vibrant and active community atmosphere.

They showcase live experiences, encapsulating the continuous stream of updates and new content, which previously remained unnoticed. This feature strategically capitalizes on the habitual engagement with story formats to make the app feel more alive, user-friendly, and relevant to a user base that values constant connectivity and up-to-the-minute trends.

Details Screen

Solution: The details screen within the app is the crux of the user’s exploratory journey, a meticulously crafted repository that provides a comprehensive dive into each pool and event. The essence of this screen is the culmination of Bill’s years of dedicated work, thoughtfully compiled to offer extensive insights. The user interface is designed to intuitively guide swimmers through detailed information, from location-specific nuances to interactive elements such as social feeds, reviews, and multimedia content, enriching their decision-making process. Each element serves to provide a holistic understanding and appreciation for the venue or event, underpinned by a wealth of accumulated knowledge. It’s here that the app’s commitment to depth, accuracy, and community shines through, inviting users to not just visit a location, but to immerse themselves in a vibrant swimming culture.

Map view Vs List view

Solution: The introduction of both map and list views in the “Swimmers Guide” caters to user feedback revealing diverse preferences for navigating pool options. Initially favoring a visual map approach, we discovered through user interviews the need for a simpler, more structured list format. This dual-view option, innovatively allowing users to toggle between views, addresses varying levels of tech proficiency and personal taste, ensuring a broader appeal and accessibility, particularly accommodating those who find maps challenging. This choice not only enhances user satisfaction but also reflects the app’s adaptability to user feedback and its commitment to inclusive design.

A better search experience

Solution: The revamped search feature of the “Swimmers Guide” responds directly to user feedback which highlighted the previous version as a point of friction. By emphasizing a clear, uncluttered interface and offering suggestive prompts like “recent” and “top searches”, the app now guides users seamlessly toward their interests. This intuitive design, backed by analytics from user behavior, anticipates the user’s next move, making the discovery of pools, events, or fitness classes a hassle-free experience. This enhancement reflects a pivotal ‘aha’ moment in the design process: that understanding and resolving user pain points can significantly elevate the overall user experience, ensuring the app’s place as a staple tool for the swimming and fitness community.

Prototype

The long wait is over. Turning my vision into something tangible. Figma is my friend here to achieve it. Try it here or watch the video.

Video of the prototype below. Enjoy!

Documentation

Documenting my design journey helps share how I think about design, the challenges I face, and the choices I make. I make sure to keep track of everything I do and learn in one place. For organizing all this information, Miro has been incredibly helpful, especially when understanding the problem at hand.

I put all these documented steps into an article on Medium. It’s a platform I’ve been wanting to write on, and this seems like the perfect opportunity to start. This way, I can easily share my design process and insights with others.

Establishing Next Steps

While user interviews provided a solid foundation, the next step is to diversify our research landscape. Imagine a mosaic, each tile representing a data source. By adding more tiles — surveys, usability testing, competitor analysis — we gain a richer, more comprehensive picture of swimmer needs.

  • Surveys: Large-scale online surveys can offer valuable quantitative data on demographics, swimming habits, and user preferences. This data can help identify trends and prioritize features.
  • Usability Testing: Observing real users interact with existing platforms can reveal pain points and desired functionalities. Watching their struggles and “aha” moments is an invaluable learning experience.

By incorporating this variety of data points, we can move beyond a single “killer idea” and build a design that truly resonates with the swimming community.

Prototyping as a Learning Tool

Following the design system development, we’ll create low-fidelity prototypes for user testing. These aren’t polished masterpieces; they’re for learning. We want them to “fail” because that’s how we learn the most!

Through user interaction with the prototypes, we can gain crucial insights on usability, refine design elements, and validate core assumptions. This iterative process ensures the final product is user-centric and addresses the core needs of swimmers.

The Power of Collaboration

Resource constraints may limit a full design team for this project, but we can still collaborate!

  • Expert Reviews: Consulting with experienced UI/UX designers can provide valuable feedback on design direction and potential improvements. Their expertise can help us avoid common pitfalls.
  • User Community Feedback: Posting the prototypes on online swimming forums or social media groups can generate user feedback from a broader audience. This can help us identify areas for improvement that internal testing might miss.

By fostering collaboration, we can leverage external expertise and insights to enhance the final product.

“ Zino worked directly with me and our team to redevelop our website and future mobile apps. He went beyond just being a designer and helped us with branding/logos, personas, business cases, ideas for monetizing our apps, and much more. He sat on our standups and was very responsive when there were small design issues or changes in direction on the app. Zino is a highly skilled profession, extremely creative, and has top notch cognitive practices that flow through to the final result. I don’t want to give him a recommendation because I want him to be available when we need him, haha! Seriously though, I cannot say enough good things about him, on both a professional and personal level.” Brian Webb (Swimmers Guide CEO)

What did I learn?

Reflecting on this journey, I’ve gained immense admiration for the dedicated swimmers who share their passion and discipline with us. Their commitment, evident in their impressive fitness, has inspired me not only to consider hitting the gym more often but also to embrace learning from sectors unfamiliar to me. This project was more than a design challenge; it was an opportunity to learn and grow, driven by the incredible people who find joy and purpose in swimming. I hope this story ignites your curiosity and enthusiasm as much as experiencing and writing it has ignited mine. Thank you for joining me on this enlightening adventure. Here’s to endless learning and taking on new challenges with an open heart. Cheers to these real-life superheroes, who may not wear capes but show us the strength of passion and perseverance.

In closing, I must extend a heartfelt thank you to Brian (the product manger) and Bill for entrusting me with this incredible opportunity. Brian, despite not feeling well, has been a pillar of support throughout this journey. I’m hopeful for his swift recovery. Their confidence in me has been a driving force behind this project, inspiring me to dive deep into the world of swimming and design. Their trust has not only been a gift but also a responsibility I’ve cherished. Thank you, Brian and Bill, for this remarkable chance to grow and learn.

Thanks for reading!

You can check out the my web portfolio on Behance.

Stay connected with me: zinobelkaddas@gmail.com

Zino Belkaddas — Senior Product Design

--

--