Standing out in the fast evolving ebike market.

BLOKS

UI Design System

The Challenge

Supporting BLOKS in creating a new and dynamic design system to provide bicycle manufacturers and brands with a service platform including an entire infrastructure of customizable UI components.

The Solution

An overarching design language for an end-to-end e-bike start-up, embracing an entire design system with all its components and UX touchpoints, while easily adaptable to other brands.

Standing out in a fast evolving market.

Within the still growing and fast-evolving electronic bicycle market, BLOKS aimed to provide an end-to-end service for bicycle manufacturers and brands. This included all physical components as well as UX touchpoints, form assembly, dealer, platform management, end-user apps and bike computers.

The metaphor of the Aurora informed the general color story for status indications such as battery levels or progress bars.

The right component in the right UI at the right time

A harmonious and strong picture of the brand could be realized once all touchpoints conveyed a coherent user experience tailored to their specific use case in the portfolio. The BLOKS design system embraces components for their bike computer, their app as well as the desktop user interface.

Efficiency by a single source of truth

The key intent of a design system is to speed up the workflow of designers and developers by reducing duplicating of interface elements and establishing a strict systematic consistency.

For BLOKS we created a final library that describes fundamental colors, typography, iconography as well as global principles and interaction behaviors of the most commonly used components, across desktop, mobile, and their bike computer HMI.

Highlights & Capabilities

Discover by exploring.

The true essence of the project was explored by iterating through multiple variations that needed to be challenged in regards of expandability, accessibility and brand expression.

Making developers happy.

BLOKS' biggest challenge was time to market. Therefore the handover of the design system to their developers was crucial and needed to work flawlessly with one of the many collaboration tools available today.