Bosch Nyon eBike computer case

Bosch

Bringing biking into the future

Challenge

The digital products for the Bosch eBike had huge inconsistencies in their user experience. My research showed that especially new and occasional users had difficulties using them. My goal was to improve usability & consistency without negatively impacting power users.

Solution

In order to start shipping improvements quickly & iteratively I built a design system. This allowed to improve the user experience one element at a time. It also allowed to develop new features faster and with fewer bugs. Before implementing new features & changes I built prototypes to test with users. I then applied the learnings to my designs, before handing them to the developers.

Results

I successfully built a design system and developed new features with it. Additionally I refreshed all products with the design system, making them visually consistent and easy to use. This resulted in a 30% increase of weekly recurring web logins and a 2 star rating increase in the app stores.

Goals
Defining the focus

The products that we worked on were the software for the Nyon onboard computer, the web application and the iOS and Android apps.


We started by conducting workshops and gathering user insights. This helped us to align all stakeholders and find the best way to approach our challenge.

Refocus

Remove unused features, and those that did not fit to the product vision to sharpen the product.

Extend

Add features to improve the main use cases for the product.

Refresh

Improve the design and keep a consistent brand style.
Improved user experience to engage and delight.

Goals for the Bosch eBike redesign: Refocus, Refresh, Extend

Research
Getting to know the users

The first step in our user-centered design approach was to talk to the people who use the products.

To gather insights we visited events like the world's largest bike fair, EuroBike. We read through online community boards, app store reviews and send out questionnaires. Finally we conducted user tests with the current product range to find the main issues.


Many findings confirmed our assumptions but we had some unexpected insights as well.

No account

Management always put much importance into using the product without an account. However, this feature was not used at all.

Health & fitness

Only a few users showed interest in the health & fitness section. Only specific metrics like rpm (revolutions per minute) and bpm (beats per minute / heart rate) were of interest to some.

Route planning

The planing and executing of routes was of interest to most users. Within this there where two main groups of users "power bikers" and "casual bikers".

Target audience: Power Bike and Casual Biker
Vision
Vision

Using Google's design sprint framework we developed a new vision for the ecosystem:
To create a safe and secure eBiking experience and support the user in planning her trips.


Focus of the Bosch eBike product
Ideation
Turning needs into ideas

We decided on a use case centred approach. Instead of replicating the same app three times, we focused each platform on the most important use cases.


From the interviews and research we could define the following use cases:

Web app

Planning trips is the main use case as working with maps is much more convenient on a desktop computer. This includes the import and editing of GPX files. The other main interest when using the web app is reviewing activities. Users often improve routes they liked and do them again.

Mobile

Quickly starting a navigation is much more convenient from the mobile phone. This makes it the most important use of the mobile app. Customising the bike is another mobile use case. Changing the speed curve of the engine and testing it out immediately is a typical scenario for this.

Nyon

The Nyon executes many of the eBikes functions, but the user interaction is very limited. It serves mainly as a display and to adjust support levels while riding. Controlling the devices with the joystick is too complicated to do much more. Even though routing is possible so it can operate without a phone.

Nyon user flow

I defined all user flows to get an overview of the status quo. Afterwards the challenge was to refine those flows and reduce the complexity.

Validation
Testing Assumptions

Validating a new product strategy while doing a redesign is complicated. Too many things change at once. We had to be strategic about it.


We restricted out tests to functional wireframes. This was to not overwhelm the users with too many changes at once.

This approach allowed us to quickly prototype and validate the updated information architecture. We also tested the user experience that resulted from the new flow.

Before the test we had a small questionnaire to get insights about the users pain points and use cases.

The results supported most of our changes, that we based on our initial research. But we had some interesting findings that lead to incremental improvements.

One example was adding advanced route creation in the mobile app. Hearing many reasonable use cases made it easy to convince the team.

Branding
Styleguide & Brand refresh

The biggest change by far was to move everything but the Nyon from a dark to a light theme.


To make text more legible in the sunlight a dark theme is used on the Nyon.

As the web & mobile apps don't have the same requirements we changed them to a friendlier, light style. To tie the platforms together the bright colors from the Nyon are now used on the other platforms as well.

With the redesign I introduced a new playful illustration style. The main goal with it is to shift the ecosystem from a very technical to a more open and friendly style.

Styleguide
Bosch Nyon Styleguide
Icons & Illustrations
Icons for actions on the route dashboard
Design
Design refresh & implementation

To improve the experience we had to change the underlying backend logic of many features. This meant we needed to synchronise the feature launch across all platforms, to not break the system.


To get changes in front of the users quickly, we shipped incremental improvements. Even though we had to keep all platforms in sync, the approach worked very well. Most releases focused on one big topic and minor visual & ux improvements.

Nyon routing screen (night mode)

The navigation screen on the Nyon is one of the most important screens for the users. We improved the ux with many incremental changes e.g. adjusting the path color on day and night mode.

Nyon ride screen showing information like tachometer, battery state, support mode & navigation

The ride screen features a typical tachometer enhanced with important information for eBikers. For example the battery state, eBike support mode and navigation hints.

Nyon day journal

Due to the size of the Nyon it is not useful for analytics. However day journals help recap what happened while on a trip that spans multiple days.

Nyon dashboard showing recent activities & achievements

The Nyon dashboard provides an overview of the recent months activities and achievements. It also shows general information like the sync status and the current disk capacity.

Bosch eBike mobile dashboard

The purpose of the mobile app is to start a simple navigation or get a quick overview of your monthly activity goals. The user can also adjust bike settings like engine support curves. When connected to the Nyon the app allows the user to sync activity data to the cloud and get new updates.

Bosch web app — route browser

The web applications allows the user to plan and review activities on a big screen.
The browse view allows you to view interesting routes created by the community. Filters like difficulty, distance or tags like "family friendly" make it easy to find the right one for you.

← Back