Norco

Simplifying the process of buying a bike

A web platform paired with an in-store interface specifically for Norco’s city bike segment. It simplifies the process of buying a bike and strengthen the relationship between Norco, independent bike dealer, and customers by forming a collaborative environment for the creation and enjoyment of bikes specific to their city.

context image

Role:

  • UI/UX Design
  • Motion Graphic
  • Photography
  • Video Editing

Tools:

  • Illustrator
  • Premiere Pro
  • After Effects
  • Axure
  • Photoshop

Team:

  • Robyn Goodridge
  • Alex Honeywell
  • Venus Wan
  • Chris Elawa
  • Sean Leach
  • Nadhirah Shukri
sticky notes image

Understanding context + domain

Based on our research on the bike industry in Vancouver, Norco’s business, and Norco’s customers’ current experience, we identified three main issues between Norco and their customers , which were lack of engagement with customers, customers’ needs were unfulfilled, and knowledge gap between average city biker and expert dealer.

Brainstorming ideas

One of our initial goal was to build and strengthen the community of Norco city bikers by creating a bike wayfinding mobile app. After re-evaluating this idea, we realized that it does not address the real needs of Norco city riders and decided to take a step back and reanalyze the customer’s needs and experience.

Norco customer journey

Proposed solution

Our main goal is to minimize the knowledge gap between an average biker and IBD (Independent Bike Dealers), by creating a responsive website that would allow customers to explore not only the different types of city bikes, but also learn how each part of the bike meets their riding needs via computer, tablet, or mobile phone. Each bike part is presented in context with micro-stories to make the information more memorable for customers.

person in store

When customers are in-store, they can view the website on their phone or the in-store tablet and read riding stories shared by other Norco riders to reaffirm their purchase decision. Later, these customers can share their stories to riders via Twitter.

Wireframe: Early iterations

Norco website

Main landing page where customers can scroll down to watch video and read information to learn about the three types of city bikes.

Norco website

Early wireframes how information of each bike part is presented as user scrolls down.

Wireframe: Final iterations

Norco website

Desktop wireframe of a bike information page. We implemented parallax scrolling where the bike is fixed in the middle to create the experience of riding the bike in different environments. In each environment, customers can learn information about specific bike parts.

Norco website

Mobile wireframe of the bike page. Cusomters can swipe left to view information on other bike parts

Norco website

Tablet view of the in-store interface, so customers can easily read stories by other Norco riders and learn more about the bike.

Final Mockups

Norco website

Desktop view when no bike part is selected.

Norco website

Desktop view when bike part is selected

Norco website
Desktop view with story section reveled
Norco website
Mobile view of the webpage with story section visible