Overview

As a UX designer with a passion for data accessibility and user-centered design, I took on the self-initiated challenge of redesigning the Pro Cycling Stats (PCS) website and creating a companion iOS app. My goal was to improve the usability and aesthetic appeal for cycling enthusiasts, providing them with a cohesive and intuitive experience across platforms. The redesign focused on data clarity, navigation efficiency, and responsive layout adjustments, considering the needs of both web and mobile users.

Objectives

Improve User Navigation: Simplify the complex navigation of race data, schedules, and statistics to provide a smooth user experience.
Optimize Data Presentation: Reorganize and visually enhance the display of statistics and live updates, making information more accessible and readable.
Create Mobile Compatibility: Design a complementary iOS app to provide seamless access to data on the go, ensuring the mobile experience was optimized and user-friendly.

Research & Analysis

I began with a thorough analysis of the current PCS website (see “Old Design Mapping” image). I mapped out the user flow, identified areas for improvement, and conducted an initial heuristic evaluation. I also gathered feedback from frequent users and employed a heatmap analysis (see “Heatmap” image) to understand user engagement with various sections.

Key Findings:

High Interaction Zones: The heatmap revealed that users concentrated their attention on race schedules, live updates, and results.
Navigation Issues: Users found it challenging to navigate between sections due to inconsistent layout and unclear links.
Ad Clutter: The ads on the homepage distracted users from key information, impacting the overall user experience.

Design Process

1. Information Architecture & Wireframing

Based on the insights, I restructured the site’s information architecture to reduce cognitive load and improve the flow between sections. I sketched wireframes focusing on a grid layout, clear section divisions, and logical grouping of related elements. The wireframes highlighted key data sections, navigation components, and reduced clutter, especially on the homepage (see “Homepage Wireframes” image).

2. UI/UX Design

For the web design, I introduced a clean and modern aesthetic, using contrasting colors to distinguish interactive elements like live updates and race stages. The layout emphasizes readability and quick access to relevant data (see “Redesigned Web Interface” image).

**iOS Companion App**

For the mobile app, I focused on a minimalist design to streamline the user experience on a smaller screen. Tabs for “Results,” “Races,” and “Teams” and “Schedule" allow users to quickly navigate key sections, while a prominent stage cards facilitates fast result lookups.

3. Prototyping & Testing

I developed high-fidelity prototypes for both the website and app. Using these prototypes, I conducted usability testing with a group of cycling enthusiasts to validate the design changes. Feedback included appreciation for the improved readability, more accessible navigation, and visually appealing layout.

Key Design Improvements

Enhanced Data Readability: I optimized the layout to present complex race data in a clear and structured format, improving readability.
Streamlined Navigation: Redesigned the navigation bar and created a consistent menu structure across the site, reducing confusion and improving accessibility.
Mobile-Friendly Interface: The new iOS app ensures users have access to PCS data on the go, with intuitive navigation and simplified data views for a smaller screen.

Outcome

The redesigned PCS website and companion iOS app offer a more user-friendly and visually engaging experience, making it easier for users to track races, view statistics, and stay updated. The heatmap analysis showed reduced distraction with ads and an increase in user interaction with key elements, demonstrating the success of the redesign.

Reflection

This project allowed me to dive deep into data-driven design and explore the intricacies of user interaction with complex information. Balancing data presentation with intuitive navigation was a rewarding challenge, and I gained valuable insights into creating seamless cross-platform experiences.

Given more time, I would conduct additional rounds of user testing to further refine the design based on direct feedback. I would also expand the scope to develop a comprehensive architecture for the entire site. Another area I’d like to explore is how to better highlight women’s cycling races, which often receive less coverage than men’s races. Elevating these events within the interface would support inclusivity and contribute to a more balanced representation in the cycling community.

Pro Cycling Stats