Komoot app Portfolio work by Laura Dahl

Mapping iOS app

komoot cycling and hiking app

Komoot is a cycling and hiking route planning website and app that helps you piece together roads and trails on an interactive map, reporting road surface type, elevation, and difficulty. The resulting map and accompanying information are often more than what other mapping systems, such as Google maps, can provide for the cyclist. Komoot has around 8 million users globally, about 4 million being cyclists, and 1.8 million of those are mountain bikers.

Executive Summary

Planning and using that plan for a bicycle ride is often complicated and challenging to do. An app for planning a ride currently exists with Komoot, and usability interviews revealed they wanted more information than just a map with a planned route. They wanted to understand traffic, riding difficulty, elevation, road conditions, weather, and safety information (including information about COVID-19 restrictions).

Laura Dahl, PhD, Primary researcher and designer

Published on August 1, 2018

I worked on a team with another designer.

Feedback was needed on the website

The website and app were created in Europe by European staff. However, the app is used around the world, and the team needed some localized feedback on their cycling routes and usefulness for the Utah area.

Platform

iOS app, using iOS design elements

Work Done

Localized feedback and visual design

Timeframe

We were allowed a two-week sprint during 2018 before delivering research findings and new designs to the client.

Overview

Initial usability testing was done with local avid cyclists. Feedback from these tests informed our thinking and contibuted to the designs we created. Further testing with cyclists and stakeholders informed final design decisions.

Research

Usability Testing

We did usability testing on the existing app with five people, including two women and three men. All participants are active cyclists.

Participants were given the following task scenario:

Imagine preparing a cycling route plan on Komoot from Home to the Salt Lake Equestrian Center.
Now you want to look at that cycling plan on your phone and prepare it for a Saturday ride.
Please show me how you would do that.

Usability Findings

Planning a ride is difficult

Need to use multiple websites and apps to get all the route planning and information needed.
In addition to the map, elevation profile, and road conditions found in Komoot, they also expect to find information about traffic, landmarks, weather, hazards (including COVID), and local cycling norms.

Using the plan is difficult in traffic and construction

After some difficulty getting their map loaded onto their bike computer and smartwatch, they reported not hearing notifications.

Definition and Ideation

I read through my notes and coded ideas in NVivo software.
I worked with the other designer to debrief the findings, and then I wrote a report of research findings and shared it with the client.
This report was a springboard of ideas during a discussion with the client. We discussed the research findings and decided on necessary updates that incluse functional requirements and interactions.
In order to better understand users’ needs, we collaborated on creating a persona, journey map, story board, and work flow.
I then did a competitive evaluation of other cycling apps and mapping websites. I compared the interactions I saw on these apps with the feedback received from participants.
Ideas from the discussion with the client, feedback from participants, and the competitive analysis helped start the sketching process.
Using whiteboards and paper sketching, we worked on a user workflow and designs for new pages on the app.

Low-Fidelity Prototype

We created low-fidelity wireframes in Figma.

Low fidelity wireframes adjusted the following screens to meet the needs of initial usability participants:

Review new routes to ensure the traffic patterns, health, and safety information worked for the day’s ride.
Receive up-to-date information through notifications.
More easily invite friends, send to a smartwatch, and send to a bike computer.

Home screen - make new route

Planned route - information and actions

Planned route sent to Wahoo bike computer

Notification to change planned route

Iterative Research

Iterative Usability Testing

We did full 30-minute usability tests with the same participants from the initial usability testing interviews. Participants usability tested with the low-fidelity wireframes. Usability tasks and questions included the following:

Imagine preparing a cycling route plan on Komoot from Home to the Salt Lake Equestrian Center.
Now you want to look at that cycling plan on your phone and prepare it for a Saturday ride.
Please show me how you would do that.
Participants were asked what information they needed to know if the route plan worked for them.
They were asked to invite a friend and send the map to their smartwatch and bike computer.

Usability Findings

The mental model of users is different from the default user flow in the current app. The wireframes mirrored the initial workflow found in the app, including a home screen that showed just a map. For example, the home screen starts with a map to create a new route rather than showing local information or links to already planned routes.
Participants asked for a different landing screen with the following information and links:

Notifications about the local area
Links to planned and completed routes
A preview and link to the latest route plan sent to their phone

High-Fidelity Prototype

After receiving feedback from the second round of usability tests, we created high-fidelity mockups that were adjusted according to a greater understanding of users’ needs.

These updated screens included a new home screen with local area notifications and links to key tasks, including the latest planned route, other planned routes, completed routes, and creating a new route.

These updates were confirmed and found highly usable by several usability participants.