Studio Ray Weng

Role UX/ UI Design
Date 2022

I understand the appeal of Omnium, but how can I find the one that suits me best?

Omnium Cargo has grown from a startup operating out of a basement workshop to a global company with a highly skilled team and orders worldwide. Their product is widely recognized for its intuitive design, enabling users to transport personal belongings and children easily. The sleek and speedy appearance of Omnium Cargo’s product has also made it a popular choice among messengers.

The website boasts three primary features:

  • Providing comprehensive information on bikes
  • Enabling seamless bike orders
  • Facilitating accessible location of nearby dealers

These features are readily accessible through the menu options: Bikes, Shops, and Dealers, respectively. Upon selecting any of these options, users are presented with various bike models to peruse. However, settling on a particular model may prove challenging.

Challenge I: Improve the appearance and functionality of the header.

The original main navigation design put a lot of emphasis on the logo, conveying the speed and punk spirit of the bikes. However, the brand has matured and grown cooler, making the loudness of the logo on the header outdated. To address this, I reduced the logo size and used a transparent background for the header. When users enter the site, they will be greeted by a video as the main focus. Hovering over the header will reveal a simple menu for further information on a white background. Additionally, while browsing and scrolling, the header size will decrease but still include the essential bike builder feature.

Challenge II: Incorporate the Bike portfolio pages and Webshop into the main navigation and display various bike types when the navigation is opened.

I recommended that Omnium consolidate its Bike portfolio pages and Webshop, prioritising the latter. I eliminated the News section from the main navigation to optimise the website’s usability, as people can easily stay updated via social media and newsletters. The newly improved Webshop now boasts an innovative bike builder feature, where customers can select and purchase various bike components and accessories or design their own custom-made bike.

The new menu is a significant improvement over the previous one. It used to be quite challenging for visitors to distinguish between the bikes as only their names would be displayed when clicked. Those names could be particularly confusing for those who weren’t experts in the field. Moreover, with the addition of new bikes, the confusion could only compound further. However, with the updated menu, visitors can now easily view all the bikes with their respective names and images. The image-displayed menu makes it much easier for them to differentiate between the different cycles and choose which one to explore further. 

If you’d like, you can check out the prototype of the new header on Figma.

Desktop
Tablet
Mobile

Challenge III: The bike builder!

The website offers a bike builder in the webshop, enabling visitors to customize their bikes. The bike builder provides a range of options for users to upgrade their bikes according to their preferences. However, the current design could be confusing, with several menus that fold and unfold, making it hard to determine the necessary options. We aim to offer a user-friendly experience with a simple and playful interface that is easy to navigate and understand.

The bike builder landing page

To access the bike builder page, click the Omnium Bike Builder button in the main navigation. This will lead you to an easy-to-use page with two options. If you already know what you want, go ahead and select the first option, choose your preferred bike and version, and click “build.” Or, if you’re uncertain about the choices, click “here” and follow the guided questions until you find a suitable bike model to build. It’s that simple!

The bike builder

To use the bike builder, you must ensure that you have selected all of the necessary options before proceeding to the Summary and Add to Cart buttons. The breadcrumb will show various steps depending on whether you have chosen the Fram kit or the Complete bike option. Furthermore, it is essential to note that the Add to Cart button is not immediately visible and is instead located within the price section. 

Now the prototype is ready to be user testing: Omnium Bike Builder

Scroll to Top