RIva
A Responsive web App For whitewater paddling
UX/UI DESIGN
Designing a responsive web application that provides all the necessary data for whitewater enthusiasts to enjoy a safe trip!
Tools:
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:
defined: personas
Who are our users?
The previous findings provided the basis for a primary and a secondary proto-persona:
Alex
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.”
Emma
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: 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
<span data-metadata=""><span data-buffer="">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.
6 experienced paddlers
(in person + audio recording
Monday, February 6, and Saturday, February 11 2023
Personal information +
7 scenario tasks +
ASQ
(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?
Reiterations
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
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.
colors
The colors of RIVA represent cold, moving white water in a natural setting.
Warmer colors were chosen to draw attention to particular elements.
font
The font was chosen because it expresses the relation of RIVA to water through its curves and the drop shape in the punches.
forms
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.
