2022

-

2023

iRacing Information Architecture

Rethinking the launcher's IA and navigation patterns

Not your average sidebar redesign

Deep Dive

Visual Design

UI / UX

Interface mockup
Interface mockup

How It All Started

Over time, iRacing's launcher had become cluttered with features, making navigation cumbersome and confusing.

Years of adding features without a clear plan resulted in a messy information architecture and a frustrating user experience. A sidebar overloaded with options became the go-to solution for new features, but this approach only added to the confusion.



A Data-Driven Approach

We conducted a thorough heuristic evaluation of the existing launcher to identify usability issues. This evaluation informed our design goals:

  • Intuitive navigation

  • Easy feature discovery

  • Clear information architecture

  • Reduced confusion

  • Scalable into the future


The Solution: A Dual-Tier Sidebar

Usability testing exposed significant navigation problems, especially for new users. Additionally, the upcoming launch of a complex new game mode necessitated a navigation overhaul. Our existing IA simply couldn't handle the depth of this new feature, prompting a complete redesign.

The dual-tier sidebar emerged as the ideal solution, checking all our boxes. It offered a scalable design that could handle future additions, while also providing a clear and organized structure for the information. This structure allowed for progressive disclosure, revealing options to users gradually and avoiding initial overwhelm. Finally, the popularity of this pattern in desktop applications meant it would likely feel intuitive to our existing user base.


Dual-tier sidebar example from a third-party app popular among our users.


Our first proof-of-concept


Exploring organization methods for our new IA


Finding the Right Balance

Our initial explorations of the dual-tier sidebar yielded promising results, but it wasn't a perfect solution. While it addressed some navigation issues, key features like driver ratings and Test Drive remained difficult to find. After all, this is a racing simulator – users crave a fast and frictionless path to the racetrack.




Many Iterations Later; A Breakthrough

We continued to iterate on the design, determined to resolve these lingering issues. A key breakthrough came when we revisited our inspirational sources. We decided to relocate driver ratings from the top bar to a new right-hand sidebar. This accomplished two things.

First was increased prominence of driver ratings, they were given greater visual weight and featured a slick new radial gauge design to communicate the user's progress. Second was the overall visual balance this provided. The symmetry in the layout is pleasing to the eye and was a rather popular change.



The Results: A Winning Experience

The redesigned launcher was a success. Here's how it improved the user experience:

Seamless User Adoption

Existing users adapted to the new design with minimal difficulty. Many expressed a strong preference for the new interface and desired a swift launch.

Improved Onboarding for New Users

New users found the redesigned launcher to be significantly more user-friendly. They completed tasks faster and reported higher satisfaction levels.

Reduced Support Issues

Following the launch, our customer service team reported a decrease in user complaints regarding the launcher.



Positive User Sentiment

Public perception of the interface improved on user forums and social media platforms.



This project demonstrates the power of a well-designed information architecture. By prioritizing user needs and conducting thorough testing, we were able to transform a cluttered and confusing launcher into a streamlined and intuitive experience for all iRacing users.




How It All Started

Over time, iRacing's launcher had become cluttered with features, making navigation cumbersome and confusing.

Years of adding features without a clear plan resulted in a messy information architecture and a frustrating user experience. A sidebar overloaded with options became the go-to solution for new features, but this approach only added to the confusion.



A Data-Driven Approach

We conducted a thorough heuristic evaluation of the existing launcher to identify usability issues. This evaluation informed our design goals:

  • Intuitive navigation

  • Easy feature discovery

  • Clear information architecture

  • Reduced confusion

  • Scalable into the future


The Solution: A Dual-Tier Sidebar

Usability testing exposed significant navigation problems, especially for new users. Additionally, the upcoming launch of a complex new game mode necessitated a navigation overhaul. Our existing IA simply couldn't handle the depth of this new feature, prompting a complete redesign.

The dual-tier sidebar emerged as the ideal solution, checking all our boxes. It offered a scalable design that could handle future additions, while also providing a clear and organized structure for the information. This structure allowed for progressive disclosure, revealing options to users gradually and avoiding initial overwhelm. Finally, the popularity of this pattern in desktop applications meant it would likely feel intuitive to our existing user base.


Dual-tier sidebar example from a third-party app popular among our users.


Our first proof-of-concept


Exploring organization methods for our new IA


Finding the Right Balance

Our initial explorations of the dual-tier sidebar yielded promising results, but it wasn't a perfect solution. While it addressed some navigation issues, key features like driver ratings and Test Drive remained difficult to find. After all, this is a racing simulator – users crave a fast and frictionless path to the racetrack.




Many Iterations Later; A Breakthrough

We continued to iterate on the design, determined to resolve these lingering issues. A key breakthrough came when we revisited our inspirational sources. We decided to relocate driver ratings from the top bar to a new right-hand sidebar. This accomplished two things.

First was increased prominence of driver ratings, they were given greater visual weight and featured a slick new radial gauge design to communicate the user's progress. Second was the overall visual balance this provided. The symmetry in the layout is pleasing to the eye and was a rather popular change.



The Results: A Winning Experience

The redesigned launcher was a success. Here's how it improved the user experience:

Seamless User Adoption

Existing users adapted to the new design with minimal difficulty. Many expressed a strong preference for the new interface and desired a swift launch.

Improved Onboarding for New Users

New users found the redesigned launcher to be significantly more user-friendly. They completed tasks faster and reported higher satisfaction levels.

Reduced Support Issues

Following the launch, our customer service team reported a decrease in user complaints regarding the launcher.



Positive User Sentiment

Public perception of the interface improved on user forums and social media platforms.



This project demonstrates the power of a well-designed information architecture. By prioritizing user needs and conducting thorough testing, we were able to transform a cluttered and confusing launcher into a streamlined and intuitive experience for all iRacing users.




How It All Started

Over time, iRacing's launcher had become cluttered with features, making navigation cumbersome and confusing.

Years of adding features without a clear plan resulted in a messy information architecture and a frustrating user experience. A sidebar overloaded with options became the go-to solution for new features, but this approach only added to the confusion.



A Data-Driven Approach

We conducted a thorough heuristic evaluation of the existing launcher to identify usability issues. This evaluation informed our design goals:

  • Intuitive navigation

  • Easy feature discovery

  • Clear information architecture

  • Reduced confusion

  • Scalable into the future


The Solution: A Dual-Tier Sidebar

Usability testing exposed significant navigation problems, especially for new users. Additionally, the upcoming launch of a complex new game mode necessitated a navigation overhaul. Our existing IA simply couldn't handle the depth of this new feature, prompting a complete redesign.

The dual-tier sidebar emerged as the ideal solution, checking all our boxes. It offered a scalable design that could handle future additions, while also providing a clear and organized structure for the information. This structure allowed for progressive disclosure, revealing options to users gradually and avoiding initial overwhelm. Finally, the popularity of this pattern in desktop applications meant it would likely feel intuitive to our existing user base.


Dual-tier sidebar example from a third-party app popular among our users.


Our first proof-of-concept


Exploring organization methods for our new IA


Finding the Right Balance

Our initial explorations of the dual-tier sidebar yielded promising results, but it wasn't a perfect solution. While it addressed some navigation issues, key features like driver ratings and Test Drive remained difficult to find. After all, this is a racing simulator – users crave a fast and frictionless path to the racetrack.




Many Iterations Later; A Breakthrough

We continued to iterate on the design, determined to resolve these lingering issues. A key breakthrough came when we revisited our inspirational sources. We decided to relocate driver ratings from the top bar to a new right-hand sidebar. This accomplished two things.

First was increased prominence of driver ratings, they were given greater visual weight and featured a slick new radial gauge design to communicate the user's progress. Second was the overall visual balance this provided. The symmetry in the layout is pleasing to the eye and was a rather popular change.



The Results: A Winning Experience

The redesigned launcher was a success. Here's how it improved the user experience:

Seamless User Adoption

Existing users adapted to the new design with minimal difficulty. Many expressed a strong preference for the new interface and desired a swift launch.

Improved Onboarding for New Users

New users found the redesigned launcher to be significantly more user-friendly. They completed tasks faster and reported higher satisfaction levels.

Reduced Support Issues

Following the launch, our customer service team reported a decrease in user complaints regarding the launcher.



Positive User Sentiment

Public perception of the interface improved on user forums and social media platforms.



This project demonstrates the power of a well-designed information architecture. By prioritizing user needs and conducting thorough testing, we were able to transform a cluttered and confusing launcher into a streamlined and intuitive experience for all iRacing users.




© 2024 benjregan. All rights reserved. Thanks for stopping by!

© 2024 benjregan. All rights reserved. Thanks for stopping by!

© 2024 benjregan. All rights reserved. Thanks for stopping by!