automotive design software


Designing a next-gen digital ebike cockpit

Client

Winora Group

 
Website

haibike.com

Industry

Automotive & Mobility

 
Service Line

Digital Design

ux award logo

Overview

The e-bike market is changing. What used to be a market characterized by the bike frame and components, is rapidly becoming one defined by the drive system, i.e. the motor, battery and control unit. These drive systems are typically developed by third parties. Haibike set out to challenge this status quo and develop their own drive system, with the goal of creating a unified brand experience and consolidating their position as global leader in premium e-bikes.

haibike flyon digital cockpit - star case study

✓ Designed and developed the Haibike Flyon Cockpit – a completely integrated drive system for Haibike’s range of premium e-bikes

✓ Delivered an HMI that is fully integrated into the bike’s internal drive system, giving the user a high degree of accuracy and control over every ride

✓ Nominated for the 2019 UX Design Awards

The idea

Star was tasked with designing and developing a next-generation digital e-bike cockpit for Haibike. The goal was to create a consistent, scalable UI structure, with an interactive interface that is intuitive and fun to use.

flyon webcase
flyon display navigation

Project

Star followed a user-centered design process to create a dynamic UI. Working within the confines of the cockpit’s compact display size, remote control navigation and modest storage capabilities proved challenging. To address these issues, Star utilized a responsive grid layout, a clean visual design and repeat elements and interactions throughout the UI.

The responsive layout scales elements and adjusts them in sync with the rider’s context. This ensures riders can get the information they need at a glance, regardless of the ride environment. For example, during fast-paced rides, the speed gauge scales to occupy the greatest portion of the display, pushing away lesser used information until it becomes relevant.

flyon-content

Project scope

Service Lines

Ideation
Co-creation workshop
Design
HMI prototype development

Loading...
plus iconminus iconarrow icon pointing rightarrow icon pointing rightarrow icon pointing downarrow icon pointing leftarrow icon pointing toparrow icon pointing top rightPlay iconPause iconarrow pointing right in a circleDownload iconResume iconCross iconActive Badge iconActive Badge iconInactive Badge iconInactive Badge iconFocused Badge iconDropdown Arrow iconQuestion Mark iconFacebook logoTikTok logoLinkedin logoLinkedIn logoFacebook logoTwitter logoInstagram logoClose IconEvo Arrowarrow icon pointing right without lineburgersearch