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.

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

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.

As one of three designers 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 and UI 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.

Whiteboard sketches of news section
Screendesign for news section

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.