TopYacht Redesign
01
About
DELIVERABLES
Product audit
Recommendations
Minimum viable product
INTROduction
A sailor should be focused on the wind and the waves, not on wrestling with a broken interface. Yet, event registration on the current TopYacht product means endless scrolling, no search function, and re-entering the same details, again and again. Cluttered menus buried key information, turning a simple task into an endurance test. It is time to cut the noise and design a system that works as smoothly as the wind in your sails.
Lets take a closer look at the current TopYacht system…
Original platform
About the platform
TopYacht is a race registration and management platform used by sailing clubs and event organisers to handle entries, crew lists, and race results. Despite its functionality, the platform suffers from an outdated UI, overwhelming lists, repetitive processes, and a frustrating user experience that slows sailors down.
The aim
I set out to transform the cluttered, outdated interface into a clear, intuitive experience tailored to the real needs of sailors and race organisers. My goal was to dramatically streamline the user journey, making event registration effortless and improve user sentiment, task completion and reduce the amount of time users spend on task.
The new TopYacht experience…
Redesigned platform
Lets take a deep dive into the design process…
Starting with analysis of the original system.
User sentiment
It is evident that little investment was made to prioritise and streamline the customers’ experience when performing crew registrations. User testing highlighted that the platform was riddled with pain points and poor information architecture diluted an already visually confusing and outdated interface.
It is no surprise these pain points contribute to a severely ineffective user experience. With an average visit duration of just 48 seconds and only 10 seconds spent on key pages, users were disengaging almost immediately - likely overwhelmed by a cluttered interface and poor navigation. A bounce rate of 88% (well above the 50% average) confirms that most users left after a single interaction, signalling deep frustration with the platform’s usability.
Heuristics review: Failed
The mission was clear: dramatically improve the UX and UI of TopYacht by streamlining navigation, reducing redundant tasks, and making critical information easy to find. Transform TopYacht into an intuitive, modern, and efficient tool for sailors and race organisers alike.
But how do you tackle this problem?
Let’s start with the users.
Usability test: Existing product
It was time to consult real consumers. Conducting interviews shed light on how users navigate the current TopYacht system with specific emphasis on the sail event registration process and the impact the current UI has on the customers’ ability to complete tasks. This allowed for users to pinpoint and communicate specific areas for immediate improvement.
Chosen areas for immediate improvement…
01
Personalisation
Integrate a system for personalisation that allows for user data retention and simplistic repeat registrations.
02
User flow
Simplify the user journey and provide feedback to the user in relation to task progression.
03
Information architecture
Organise registration information to ensure it is digestible and easily navigated by the user.
04
User interface
Redesign the user interface to improve the intuitiveness of the user flow through the application of good visual design principles and the simplification of information.
Using these insights above, ideation methods generated quick preliminary solutions that addressed the core issues raised by sailors and provide context on how the product would be used.
Ideation: Crazy 8's
Ideation: Storyboarding
From divergent ideation we switch to convergent thinking models to determine which ideas to prioritise and refine.
The user-centered design (UCD) framework, balances desirability (what users need most), feasibility (what can be realistically built), and viability (what aligns with business goals). This approach prioritises high-impact improvements, making the redesigned TopYacht platform intuitive, achievable, and valuable for sailors.
Ideation: Prioritisation
Connecting ideation to user needs…
Idea 1: Crew and boat owner portals
Crew and boat owner portals enhance personalisation by allowing users to save and manage their details, reducing repetitive data entry and streamlining the registration process by connecting the needs of boat owners and crew members alike.
Idea 2: Search and filter events
The search and filter event function improves user flow and information architecture by enabling sailors to quickly find relevant races without sifting through endless lists.
Idea 3: Progress feedback
Progress feedback enhances the user interface by providing clear indicators of task completion, reducing confusion and frustration and ensuring a smoother, more intuitive experience. Together, these features create a more efficient and user-friendly TopYacht platform.
With the direction cemented,
let's start to bring the design to life…
The user journey was mapped to streamline the experience, then rapidly sketched into low-fidelity wireframes to help realise the design solutions. As refinement progressed into mid-fidelity prototypes, the design came to life - streamlining navigation, eliminating clutter, and transforming TopYacht into a sleek, intuitive experience ready for the prototype's first real-world user testing.
The low fidelity prototype was digitised using Figma, making the design interactive for the first time. Users can now engage with the developing platform in order to inform refinement.
Medium fidelity prototype
Usability testing: Round 1
With the mid-fidelity prototype in place, it was time to put the design to the test.
User testing was conducted with users to evaluate usability, identify friction points, and refine the experience. A/B testing was performed on the prototype’s information architecture and interface design to determine the most intuitive solutions.
The resultant user feedback provided valuable insights that helped to shape the subsequent prototype into a more seamless and user-friendly platform.
The recommended changes…
01
Make 'sign in' a priority on landing page
Reconfigure the design of the landing page to prioritise the call to action.
02
Integrate calendar file download
Implement a system where TopYacht will automatically generate calendar event files that users can install to save event reminders in their personal calendars.
03
Update information requirements
Extend the information requirements on the details entry page to include contact information, emergency contact information, Australian Sailing Number, club membership and written statements.
04
Create a personal profile tab for users
Integrate a personal profile tab that allows users to input and change their own information, that will then automatically populate crew registration applications.
From here, A/B testing confirmed the design direction for TopYacht's new home page…
A/B Testing
The consensus was unanimous, all users agreed the chosen design more clearly displayed the information that mattered most to them. This concreted the first design iteration of the home screen for the new TopYacht system.
Refined medium fidelity prototype
The TopYacht experience is inching closer to its final form.
Now, we enter the high-fidelity prototyping stage. This process combines the development of sharp visuals, streamlined interactions, and purposeful design into a succinct final product. The focus was on refining the user interface through testing and ensuring every screen felt cohesive, accessible, and purpose-built for a seamless race registration experience.
And this began with creating the design system…
It was further improved with colour scheme refinement to enhance clarity, improve accessibility, and create a more modern, cohesive visual identity that incapsulated the TopYacht brand.
The inspiration for the interface's colour scheme was rooted in a distinctive blue coloured dark mode palette. This created a connection to the ocean and allowed for a clean visual hierarchy to be created using hue changes to structure information.
12 column grid layout
A 12-column grid was used to create a flexible, responsive desktop layout that ensured consistency, alignment, and balance across the interface, making complex information easier to scan and interact with.
With these guidelines in place, a high fidelity makeover took place…
Usability testing: Round 2
With the polished prototype in hand, it was time to put TopYacht’s newest experience to the ultimate test - real users in real scenarios.
This round of user testing validated the final design and ensured it met real user needs. Participants were asked to complete key tasks, such as registering for a race or managing crew details, while their behaviour was observed and gathered feedback. The insights confirmed major improvements in usability and flow were needed, while also revealing small tweaks to further enhance clarity and reduce cognitive load. The four most significant recommended changes are explored below.
01
Make the process of finding events more intuitive
Follow user testing results and make the event location process more intuitive through the creation of a dedicated events page.
02
Ensure the horizontal scroll design on the home page is intuitive to use
Reveal a small portion of the next adjacent event tile and increase the contrast colour of the scroll thumb to ensure users understand to scroll horizontally.
03
Add a button on home page to guide users to the search bar
Integrate a button at the end of the horizontal scroll mechanism on the dashboard to guide users to the search bar to find specific events.
04
Redesign the search bar to ensure it is intuitive to use
Integrate a drop down filter tab that more intuitively relates to the search bar and makes it easier to navigate for the user.
Minimum viable product
With the redesigned TopYacht platform launched, I shifted focus to measuring its real-world impact. To evaluate success, I tracked key usability metrics and gathered user feedback to quantify improvements in satisfaction, efficiency, and overall task success rates.
Customer satisfaction scores
User sentiment: Before vs after
Success snapshot
Reflecting on the journey
What was your biggest lesson from this project?
Do not make assumptions – test early and as frequently as you can. You need to remove your own bias from the equation and appreciate there is a disconnect between what might seem simple and intuitive to you (the designer) may not be shared equally with the user. Validate your design decisions and listen with empathy.
What would you do differently next time?
Spend more time in preliminary ideation and integrate more user feedback throughout this phase to produce a larger gamut of successful and validated solutions. I strive to achieve the best outcome for users and business stakeholders, with more solutions and user-informed refinement, a more polished and impactful product can be crafted from an early stage.
How did this project make you a better designer?
This project strengthened my ability to own the entire UX process independently. I was required to be both strategic and hands-on, making decisions with confidence while staying adaptable to feedback and change. This project deepened my ability to translate user pain points into practical, elegant solutions - balancing functionality with clarity, and ensuring that every design choice served a purpose. I can walk away with a sharper problem-solving mindset, greater confidence in my design instincts, and a deeper understanding of how to advocate for the user at every step.
