Sonja Kozik

UX/UI Designer


Cykle Biking App

The Cykle Biking App with its operating concept is an additional device for e-bikes.

Project 01
  • Co-Students: Anna Erlewein, Christian Bette
  • Supervisor: Fabian Gronbach
  • Course: Interface Design II (2016)
  • My role: Conception, Information Architecture, UX Design, Arduino

The market offers many additional devices for e-bikes with different functionalities, however they are often cost-intensive. Also, lots of them are not up to date with the current standards. In this project we wanted to create a smartphone app which offers the most important functionalities of above-mentioned devices plus developing the operation concept to make sure the users are able to control the app without raising traffic risks.

Pain Points

Distraction

Biking computers can distract the user from the traffic situation. Often, they are small and/or the buttons are difficult to use.

Touchscreens

A lot of attention is needed to interact with touchscreens therefore they can be really dangerous to use.

Size

Small font sizes and too much information on one screen make it really difficult to read while riding.

Concept

Bring your own device:

Biking computers are often expensive, especially the ones that come with a wide range of functionalities and a decent screen size. But almost everyone has a smartphone nowadays which can subtitute these biking computers. They can be clipped on the handle bar and taken off as soon as one has arrived.

Alternative operating concept:

To interact with the application we invented a new control element based on a mouse wheel that can be pushed to the left and right side. With that option the users are able to navigate through the app.

Structure

The main screen is devided into three parts. On the very left there is a small section indicating another layer, the middle of the screen shows basic information such as current speed, battery and driving mode. On the right-hand side of the screen an overlay shows additional functions; either music that is currently played, fitness mode or navigation. By scrolling up or down the wheel of the control element users can change which additional function is visible. A push to the right will open up the full screen of the chosen function e.g. fitness. Within this, users are able to change the fitness program via scrolling through it. By pushing back to the left, they return to the main screen. Pushing the wheel to the left side again opens up full screen views of driving information. By scrolling through them they can choose between driven distance, power, speed, rounds per minute and altitude difference.

Features

For the completeness of the user experience we also needed a base app for our biking application. Here, users can see statistics of their tours and trips with the bike in a dashboard-like overview. It shows different parameters such as distance driven, calories burned and eco savings as well as details about the e-bike.

Navigation destinations can be preset in the app that also allows the users to set preferences like riding mostly on biking lanes, rural roads or main roads. The navigation can be started by tilting the phone in landscape mode since biking mode will then be activated.

With the app users can always check the location of their bike. Is the bike being moved with wheels blocked, they get notified and also have the option to report it stolen.

Design Process

Competitors:

We went to bike retailers and had a look on biking computers that are current and to interview them about the functionalities and the customer needs.

Paper Prototyping:

To get a feeling for the placement of screens and buttons we made very simple paper prototypes that we clued on a stick. We then tested how we can easily reach the buttons without stretching the thumb too far or having to let the handle bar go.

Crazy 8:

We decided to do some "Crazy 8s" since we knew what functions we needed in the app but had to come up with different ideas how they could be allocated on the screen.

Wireframes:

We needed to find a plausible way to indicate the navigation architecture on the screens. The question whether the app would be used in portrait or landscape mode needed to be answered, too. In terms of stability and due to the similarity to common navigation systems we finally decided to use the landscape mode.

Conclusion

The big challenge of this project was to create an architecture that is easy to understand and comprehensible for the users not to distract them from traffic. The operation options have to be simple within a flat structure and interactions that are natural and easy to adopt. Through interviews with e-bike owners and retailers we could figure out the main required functions of such an application, prototyping and testing helped us to find a reasonable way to merge them all together.