Bringing biking into the future
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.
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.
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.
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.
Remove unused features, and those that did not fit to the product vision to sharpen the product.
Add features to improve the main use cases for the product.
Improve the design and keep a consistent brand style.
Improved user experience to engage and delight.
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.
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.
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".
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.
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:
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.
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.
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.
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.
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.
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.
Icons & Illustrations
Loading & weather icons
To bring a friendlier mood into the ecosystem we introduced a set of playful icons. The goal was to make our non-technical users feel more welcome and at ease.
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.
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.
The ride screen features a typical tachometer enhanced with important information for eBikers. For example the battery state, eBike support mode and navigation hints.
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.
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.
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.
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.
The activities dashboard lets you get a good overview of your achievement for a given time span. You also get some insights calculated from your data. You can even go deeper and review your activities on a per ride level.
Nyon route editor
The desktop is perfect for creating routes in the editor. The mouse and the big screen make it easy to view and change the path on a map. The user can choose between three types of routing: fast, nice (scenic) and interesting for mountain bikes. Afterwards the user can can still change the route by hand.