Nyon

client
Bosch
year
2017
industry
Mobility
role
Design lead, UX/UI design & prototyping

Bringing biking into the future

The Copra Software GmbH develops a patient management software. This software replaces all paperwork in the hospital. It helps to monitor patients vital status and medicamentation. The team can focus on their actual job, saving people's lives. My task was to refresh the corporate identity & website.

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.

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".

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.


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 is reviewing of 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. Customizing 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.

Wireframes

We 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. To 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

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 friendler, 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
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
Design refresh & implementation

To improve the experience we had to change the underlying backend logic of many features. This meant we needed to synchronize 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 Nyons size 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.