A Responsive web App For whitewater paddling


Designing a responsive web application that provides all the necessary data for whitewater enthusiasts to enjoy a safe trip!


Figma, Miro, Optimal Workshop, Adobe: Photoshop + Illustrator + InDesign, Google Workspace: Slides + Sheets + Docs + Forms

Problem statement

What’s the Problem?

The initial research, which included a review of relevant media and applications for whitewater paddlers, led to the hypothesis:

Whitewater paddlers are very dependent on water levels and therefore precipitation. It’s a relatively high-risk outdoor sport in alpine terrain, which means they must always consider weather and water conditions to be as safe as possible.

Whitewater paddlers need an easy-to-use responsive web app that reliably provides them with current and expected water and weather conditions in order to plan their trip and carry it out safely.

discovered: interviews & Survey

What exactly should 
RIVA Provide?

To learn more about the users‘ needs, attitudes, problems, and behaviors, a survey and some user interviews were conducted with experienced whitewater paddlers:

Main findings:

The most important things to consider while planning:

0 %
0 %
0 %
0 %
0 %
0 %

defined: personas

Who are our users?

The previous findings provided the basis for a primary and a secondary proto-persona:


the organized Pro

38 year old teacher, family father and paddling pro (WW V) from Cologne, Germany

Alex has to plan his paddling trips with his friends and family on a long-term basis due to his busy schedule, so he needs long-term gauges and forecasts.

“My groups are not flexible, so I plan often long-term.”


Young, Wild & Free

23 year old student, single and advanced beginner (WW III) from Stuttgart, Germany

Emma often quickly needs reliable data about current conditions and suggestions on suitable rivers. She wants to connect to paddle buddies to spontaneausly organize trips.

“I don’t have any concrete plans for the weekend – let’s see what comes up.”

defined/ Designed: user journey maps

What will they do?

defined: User flows

How will they do it?

With Alex and Emma’s user flows in mind, an initial navigation with sub-items was developed. To test whether users understand the logic of the information architecture, a card sort was carried out, resulting in the following sitemap:

Card sort

site map

designed: Wireframing & prototyping

what will it look like?

Time to bring the app to life! I sketched some low fidelity wireframes and flows based on the three userflows and core features. Then it was clear which screens were needed for visualization. They were the basis for a mid-fidelity prototype:

designed: usabiltiy testing

Is it going to work?

Observe and measure if users understand the app, its value, and how to complete basic initial functions.

Find out whether the test persons are missing functions or have suggestions for improving the existing features.

Click to view prototype

6 experienced paddlers
(in person + audio recording

Monday, February 6, and Saturday, February 11 2023

Personal information +
7 scenario tasks + 

(inkluding affinity map & rainbow spreadsheet) 

what did not work

People were overwhelmed with using the FAB, even after reading the introduction. They couldn’t find it and searched elsewhere.
This caused problems with the overall navigation!

what did work

People liked the clear, neat interface and the map feature.

They really liked the personal area and intuitively added and shared favorites

designed: Reiterations & preference testing

what now?


In the spirit of the design thinking process, the mid-fedelity prototype was revised again based on the results of the usability test. This led to a significant improvement in the navigation:


preference testing

A preference test with the newly revised screens, also in relation to the onboarding and introductory screens, was key to some important design decisions. This also allowed for direct testing of some other screens for which the previous tests had shown no clear tendency other than to revise them.

10 participants
(in person + mobile

March 8, 2023

A/B testing for 10 screens

Version A
Version A
Version B
Version B

designed & Delivered: UI Design

Can it get any better?

To address our users emotionally, it was necessary to package RIVA in a visually appealing way. A customised design system was developed that underlines the character of RIVA and offers a construction kit for all those who will work on it in the future.


The colors of RIVA represent cold, moving white water in a natural setting.

Warmer colors were chosen to draw attention to particular elements.


The font was chosen because it expresses the relation of RIVA to water through its curves and the drop shape in the punches.


The wave in the logo and the teardrop shape in the stamps led to wave-shaped boxes. The buttons complement the shape with rounded edges so that their use is not overbearing.

Delivered: High Fidelity prototype

So what do we have now?

WordPress Cookie Plugin von Real Cookie Banner