digital retail

BikeCenter design system

The BikeCenter offers local bike retailers a way to digitise their shop. Retailers can sell, order, preorder or give advice on new bikes through the interface and offer customers more options besides the models currently available in-store.

Rendering of BikeCenter display with categories screen

In my position as UI/UX designer at Campudus, I was part of the team responsible for developing the BikeCenter, including the interface and user ex­perience.

Infotainment screen, batteries
Infotainment screen, regulations

We quickly realized that a design system approach would be the best way to tackle this project – we could start with a set of modular base components and add more as the functionality of the BikeCenter grew.

An overview of UI components.
Component examples

We used the version control app Plant to make sure that everyone would always be up to date on the design files and the developers in our team would be able to start working on the components immediately.

Setup success screen
Login credentials screen with keyboard
Loading screen
Widescreen data form
Printer preview with passcode numpad
News section scrolldown

As a UI/UX designer on the project, I was able to contribute in many ways, such as creating typography styles and UI components. I was also responsible for icon design, transitions and animations.


Examples of icons

The user experience would be discussed and planned with the whole team by first drawing flowcharts and wireframes on the whiteboards and then building prototypes as the process went on.

Sketches of news section on a whiteboard
Whiteboard sketches of news section
Screendesign of news section
Screendesign for news section
News section scrolldown
News scrolled
Sketches showing the BikeCenter stand, display and printer, illustrating cable routing or buttons

Since we were designing for a standing touch screen that would be almost at eye level in a potentially busy work environment, I suggested testing the UI components early on in the development process in as close to their actual implementation as possible.

Testing of UI elements on a touch screen in actual size