A responsive web app for professional rowers and teams to track performance and analyze data in real-time
Overview
XBoat is a startup helping rowers and coaches analyze performance data to improve their techniques and strategies through detailed analytics. Using a rowing monitor, their platform collects detailed metrics and visualizes them in a web app, making it easier to track progress and identify areas for improvement.
My role in this project was to redesign their first prototype, resolve usability issues, and introduce key features for the MVP. With tight timelines and a focus on practicality, I worked closely with the team to create a product that could serve both athletes and coaches while handling the technical complexity of rowing data.
My Role
Sole Product Designer, Website Designer & Developer
Team
1 Designer: Myself, 1 Product Manager (CEO), 2 Developers
Tools used
Figma, Framer
Year
2024 - now
Context & The Challenge
About XBoat
XBoat’s rowing monitor records performance metrics such as speed, power, and stroke rate during rowing sessions. The app splits these sessions into intervals, allowing for detailed analysis. The challenge was to create an intuitive interface that catered to two distinct user groups - athletes and coaches - while presenting dense, technical data in a way that was easy to interpret.
Initial Audit
The initial prototype showed promise but needed significant refinement. It felt functional but unpolished, with clear usability and consistency issues.
Here’s what stood out during my audit:
Inconsistent UI: Visual elements like spacing, font sizes, and component styles varied, making the app feel disjointed.
Accessibility Issues: Dark mode colors failed WCAG contrast guidelines, presenting usability barriers.
Confusing Navigation: Crucial information, like session details, was hidden behind unintuitive interactions.
Overwhelming Data: The app presented dense technical metrics without clear hierarchy, making it hard for users to focus on what mattered most.
The app’s intent was clear, but it needed refinement to become a polished product that athletes and coaches could rely on daily.
XBoat Web app UI pre-redesign
Constraints
This project had several constraints that influenced the design process:
Startup Pace
XBoat needed to ship the MVP quickly, which meant skipping traditional research phases and focusing on iterative design cycles.
PM-Led Requirements
The PM, who had already gathered feedback from rowers, provided feature outlines and low-fidelity mockups. This allowed me to focus on high-fidelity designs but required me to lean on his domain expertise.
Technical Domain
As someone new to rowing, I had to quickly learn the sport’s terminology and workflows (e.g., intervals, stroke metrics) to design effectively and communicate with the team.
Research & User Goals
To understand the users’ needs, I worked closely with the PM, who had gathered insights from focus groups. Together, we translated these insights into clear user goals, which then shaped the MVP requirements.
MVP Goals
To deliver a functional MVP while laying the groundwork for future iterations, we focused on these priorities:
Redesign Core Features
Sessions, session details, settings and the log in / sign up flows.
Introduce Team Management
Team creation, athlete management, and equipment tracking.
Improve Usability
Simplify navigation and data visualization to make the app intuitive and approachable.
Create a Scalable Foundation
Build a cohesive design system to support future features.
Design Process
Defining the Scope
The first step was to clarify what we needed to achieve within the constraints. We asked:
How might we design a system robust enough for two distinct user groups while maintaining simplicity?
How might we create a scalable design system to support fast iteration and future features?
How might we present dense technical data without overwhelming users?
Building a Design System
The inconsistent UI in the prototype was one of the biggest hurdles. To address this, I created a design system in Figma that standardized components, typography, and color schemes for both light and dark modes. This ensured visual consistency across the app and provided a solid foundation for future features.
Solutions & Highlights
Sessions and session details
The sessions page was designed as a table layout to make it easy for users to find what they need while keeping development efficient for the MVP. Filters, sorting, and search functionality help users quickly narrow down sessions, with room for future expansions like card or calendar views.
For session details, the goal was to make performance insights clear and actionable. Synchronized maps and interval-based stroke data visualizations provide valuable context, while metrics like power, speed, and acceleration are displayed side by side for easy comparisons. This setup gives users the tools to analyze their performance without feeling overwhelmed.
Team Management
Team management tools are available to all users, but coaches get extra functionality on the session details page. They have an additional tab at the top, allowing them to switch between Crew View and Athletes View.
In Crew View, coaches can see how the entire boat is performing, with metrics like average speed and power for the team as a whole. This view is essentially the same as what athletes see on their session pages, focusing on overall boat performance. The added Athletes View, however, lets coaches drill into individual performance by selecting specific athletes and intervals. This flexibility allows them to track one person, a smaller group, or the whole team, depending on their needs. It keeps the interface clear and focused while giving coaches the precision to compare athletes or analyze specific contributions during a session.
Coaches can also adjust the crew lineup before or after a session using the lineup editor. Additionally, session data upload statuses are displayed in real time, ensuring that coaches can quickly identify if any data from the rowing monitor is missing or incomplete.
Other pages
I also worked on foundational elements like login and sign-up flows, account settings, and the trends page. Right now, the trends page includes a single graph for tracking stroke rate and power over time. In the future, more charts will be added to help users track their progress across different metrics.
Outcomes
Consistency & Scalability
Unified the UI with an atomic design system, reducing cognitive load for users and improving developer efficiency, providing a solid foundation for future iterations.
Improved Usability
Simplified navigation and data visualizations, making the app easier to use for both athletes and coaches.
Faster Iteration
Delivered a polished MVP within tight deadlines, enabling early testing and feedback collection
Future Roadmap
User Testing: Conduct usability testing with athletes and coaches to refine the MVP.
Dashboard Development: Build a dashboard combining key widgets for a holistic overview of performance.
Additional Features: Introduce subscription models, expand team management, trends and reports tools based on user feedback.
Key Takeaways
Iterative Design in High-Paced Environments
The fast-paced nature of this project pushed me to focus on the essentials and embrace iterative design. Instead of aiming for perfection in the first round, I learned to ship quickly, test, and refine. This approach not only saved time but also allowed the team to gather valuable feedback sooner. It reinforced the importance of prioritizing progress over perfection.
User Goals as a Compass for Design Decisions
I learned how essential it is to anchor every design decision in clearly defined user goals. By revisiting the "As a [user], I want to [action] so that [goal]" statements throughout the process, I ensured the end product remained user-centered while meeting business needs. This has inspired me to incorporate similar frameworks into future projects.
Seeing Bottlenecks as Opportunities to Grow
While working on this project, I faced a challenge maintaining consistency between light and dark modes, requiring manual, error-prone adjustments across screens. This bottleneck led me to research more efficient workflows, and I discovered design tokens and modes in Figma. I’ve since incorporated these tools into my design systems, improving both scalability and efficiency in future projects. This experience reminded me that every challenge is an opportunity to grow as a professional.
Conclusion
Redesigning XBoat’s app was an exciting challenge that combined technical complexity with meaningful problem-solving. By creating a user-centered, scalable product, I helped transform a prototype into a tool that rowers and coaches can rely on. This project reminded me of the importance of clear design, thoughtful collaboration, and the ability to adapt under constraints.
