With over 20 years under their belt, Fanatec is a household name when it comes to simulation hardware and peripherals. For over a decade they have been producing high-quality steering wheels, wheel bases, pedals and more to satisify the most enthusiastic simracers out there. With names like Formula 1, Porsche and BMW as their partners, Fanatec is set for an even brighter future in the virtual racing scene.
Down below i developed a prototype of a fixed navigation and a hero section for the ClubSport Formula Carbon Steering Wheel. Both features quickly spark the users interest without obstructing the design and flow of the page. The navigation will stick towards the top for the entirety of the product information to grant quick access to important areas.
While the navigation will help users to find their way through the information they seek, the hero section not only displays the wheel in all its glamour, it also provides some dynamic animations. With multiple layers, consisting of the wheel, the LED's texture, a gradient and some z-index tinkering, i created animations to give the section a more dynamic feel. This also offers a lot of options for future and existing products to be visually appealing to the customer. For browsers that do not support mix-blend-mode: hard-light i have added a fallback.
Rev up your Experience
The ClubSport Formula Carbon is a replica of a steering wheel as used in formula cars. The compact diameter of 26 cm allows fast movements and reactions. The grips are made of genuine Italian made Alcantara. It is easy to clean, gives sensational grip and feeling, and they’re replaceable!
Offering a clean first visit
With their own online store, almost all hardware purchases are made first-party, where Fanatec can support and manage all of the customers needs. The website is functional but feels dated compared to some competitors. Already from the beginning, UI and UX play a fundimental role in how to present certain aspects of the website.
What strikes first is the change of overall color. I have revised the color scheme i found on the current Fanatec website and brought a bit more life into it. You'll find a vibrant red, multiple dark blue to grey colors, as well as some different white tones. For typography i chose a good balance between two sans-serif bold and legible fonts Exo as well as Noto Sans go hand in hand and round up the experience.
From wireframing to the real product
If possible, i try to think of the design as a wireframe, either virtually sketched out or in my mind. In a separate text file i gather and brainstorm all the important information that needs to be restored from the original page or needs to be added for a better experience. This way i can foresee some issues that usually appear down the road, worst case when already in development. Underneath i've included a virtual wireframe and the end result with colors, icons and text reapplied.
Please note that this is not the full page. For a complete view, please click here
Going more into detail
Starting at the top of the page, we have an overhauled header. It is still small in height, but features the logo, navigation, shopping cart, account information / login and registration, and last but not least the country selection. With a flexible page width instead of a maximum width, we can hold the more important information directly in the header to further improve the users experience.
The navigation dropdown is subtle without distracting the user. There are different kinds of dropdowns, with and without icons. The use cases depend on what needs to be shown, for example platforms the products are available for.
Displaying offers and platform compatibility
For this specific case study i recreated a bundle product page. These feature multiple items on the store in one big bundle and grant a good discount if you buy them in this pack. I have included such notice at the very top for the user to catch their attention.
As a simracer myself i know a lot of people that only game on one console and some parts might not be supported for their gaming station. Instead of looking for some text in the description it shows three different states in form of the platforms icon. Colorized is fully supported, Greyed and crossed out symbolizes not supported, with the grey Xbox logo and an exclamation mark being partially supported. Clicking on one of the icons will lead them to a more text-heavy form of how it is supported.
With this UX adaption we can safely assume the potential customer of the product knows that the product is available for their platform. On the current Fanatec page it is only visible what is supported. Herein lies a problem the costumer might encounter: "Is my platform not listed because they forgot about it, is it simply not supported, or did they not add playstation yet?". To overcome that, every platform is always visibly spread across different states.
Always perfect product images
A huge benefit of high quality images for products is to display them the way they are. Big. This gives the user a better feel of how the actual product might look if they buy it, instead of having a small image that expands upon clicking. This approach does not only work on pre cut out images, ready to be represented. The borders around the preview images are very carefully designed with full width images in mind. There is no compromise in what the container is able to show. Even videos or 3D models can be displayed.
Product Details
On the right side we have the product details and an option to buy or configurate this product. With the title, model, description and price we have everything that we need to display for the user to initially see what this product is about without scrolling. This section also has enough room to feature a logo from a partner if applicable. If a description gets really long, this area also acts as a separate scroll unit.
Fancy displays and a lot of information
While regular product pages (not bundles) go more in depth and offer more room for big hero areas, bundled products feature one hero introduction to the product and specifications.
After all hero sections the user sees another navigation header followed by a sidebar that lets them choose the desired information they seek. A problem i found on the current website of Fanatec is the fact that details about a product are widely spread, instead of a centered area. This leads to some confusion for the costumer and can be avoided easily.
With a navigation and sidebar we can hold information for not only one product, but also bundles that hold various items that may differ in the information they can provide, for example system requirements for bonus content such as the F1 2018 Game.
Software, Downloads, Compatibility and What is in it
If you remember the compatibility icons at the very top, this is where users will be sent to see the full compatibility list if they click on an icon at the top.
Customers that tend to buy more expensive products most likely have the page bookmarked and are looking at it for several times before committing to buy it. With this in mind, we offer the user a quick jump to the Software section from the sticky header at the very top of the page.
Additionally, there is packaging details and a list of what is included in the bundle. For bundles, the current Fanatec page only states that a Wheel Base, Steering Wheel, Pedals and F1 2018 is included, but does not go into detail. A user would need to browse each product page individually to find information about e. g. cable length, power supply, mounting options etc.
Footer
An organized footer really helps the user to navigate themselves through the more advanced pages of the website. The footer has a clear structure and shows the same information as the current footer, with a lot of extra sitemap items. I've also included the more blue / greyish colors to differantiate the content. A back to top full width button to get back quickly also suited for mobile viewers, the sitemap, logos and legal notices round the product page up quite nicely.
Conclusion and Thoughts
Working on a project i can identify myself with is always a big motivation boost for me. I've been in the simracing community for over 12 years and love to see the genre growing and getting more attention. With all new simulators and games coming up, i hope that more and more people get into simracing and enjoy the thrill and competition the sport offers. In case you'd like to see an uncompressed complete image, please click here. Thanks for reading and scrolling through my case study on Fanatec!