onwater

Using design to increase DAUs 15x

How my designs helped grow daily active users 15x and increased paid subscriptions 200% in just one year

Role

Sr. Product Designer

Industry

Navigation, Recreation & Travel

Context

OnWater is a collection of navigation and recreation planning apps for mobile and web geared toward water sports.

Partners

Marketing - Alex
GIS- Waldo, Toren, Liam
Development - Kev, Tiff, Russ, Stephen, Ian
Brand Design - Erin

Problem

Users need help navigating waters, when they download our app we confuse them and make it worse.
‍
My overarching goal for this project was to use design to simplify the discovery of over 100,000 Points of Interest on 425,000 Bodies of Water and evaluate where to find 100+ Fish Species and what the Weather and Water conditions are in each of those 525k+ locations.

Initial interactions with users went like this:

“It’s difficult to know how to use the app, I feel overwhelmed on first open”

“Reading this map feels confusing compared to Google Maps”

::points to featured river::
“What does that color mean?”

“I’m colorblind, I can’t distinguish between these two things”

Impact

Within 1 year of designing at onWater, my designs were able to drive a 15x growth in our Daily Active Users (shown below) and support an increase of our subscriptions over 200%.
Reader, consider that this initial bump in growth after only 3 months was through organic adoption in the fall, a normally slow season for app downloads and user engagement.
My first peak season showed me that users wanted what we were offering thanks to our ad budget increasing (Feb. '24.) My designs were validated and my goal was to increase usability so users would stick around and subscribe to the offering.

Information Architecture
UI Design System
Adding Data Visualization
Onboarding & Paywall
Retailers and Partnerships

Information Architecture

To simplify our internal communication to tackle my first sprint, I categorized the upcoming changes into 3 groupings: Navigation, Map Hierarchy and Tooling.

Re-organizing app navigation

I worked with users unfamiliar with the app (fresh eyes) to establish a clear hierarchy of the app to discern where the line was between navigation elements and tools and uncover knee-jerk reactions to the visual layout.

This led to the re-organized our information architecture to unhide our most valuable features and tools based on user surveys. The initial "most valuable" features were totally subjective and mostly based on our opinions.

Tooling Prioritization

Leveraging user tracking in Amplitude, I discovered that the first two minutes were critical for engagement.Armed with this insight, I redesigned the landing screen to clearly guide users through the app’s key flows.

OnWaters map tools may not be the most unique features in the navigational space, but these required prominent hierarchy in order to provide parity and quick user adoption as the apps features and capabilities were buried under confusing interfaces.

Re-organizing map heirarchies

As part of our first impressions design I helped establish a better hierarchy of Points of Interest based on the map zoom level. This addressed users feeling overwhelmed on first open.

UI Design System

As I led the design changes from phases 1 to 2, and 2 to 3, our app visuals were consistently iterated upon to provide a stronger interface language that made it easier for users to adopt. Considering our user adoption metrics, we sought to bring in additional help in the form of a stellar brand designer, Erin, to unify our entire visual language and solidify our brand across all channels, app, desktop, website, social, merchandise and print.

Customizing App Icons and Tailwind CSS Design System

Because the app design was “Frankensteined” from various design systems, particularly with our icons, we took advantage of the framework found in Tailwind CSS Design System to rectify these visual inconsistencies. Our app icons went from a variety of collections to following the structure of SF Symbols 6.

Applied UI Changes

Map Visuals

A transformation and iteration highlight of the Heads Up Display and Map visuals.

Iteration of map visuals across versions 1, 2 and 3

Data Visualization

Calling back to addressing a problem of having a confusing app, I had to remind myself of the goal to help users discover what they needed among 100,000 Points of Interest on 425,000 Bodies of Water and evaluate where to find 100+ Fish Species and what the Weather and Water conditions are like in the location in question.

What are people paying for?

Our survey of regular users revealed that weather and water conditions were the top factors influencing app downloads. By getting this right and presenting easy to read data, we could streamline their app subscriptions by consolidating multiple tools into one trusted solution.

Onboarding and Paywall

To boost conversions, I redesigned and improved our Onboarding and Paywall experiences.

Paywall psychology that converts users

Users were given a 7 day trial to use premium version of the app. If users did not utilize all the features in that preliminary week, users were able to continue to see these features to understand more details yet the usage was blocked. To signal to users the branding of premium, AMBER color was utilized as a thru-line in our UPGRADE button and on modals and paywalls.

Onboarding Tool Tips

We allowed users a 7 day trial to use premium version of the app. If users did not utilize all the features in that preliminary week, we allowed users to see enough to understand more details yet blocked their activation.

Retailers and Partnerships

The OnWater platform database and design allowed for us to integrate B2B, B2C engagement and the building of conservation collection internal tools.

Land Sharing Experiences

Landtrust partnership led to the usage of OnWater’s maps to create a another revenue-generating channel for the land-sharing B2C network.

Collecting and Sharing Conservation Data

We built partnerships that wanted to utilize OnWater as a data collection and sharing platform. This led to the unification of databases, geolocation data, and an ability to repeat observations on the same river.

Designing to Sell Cool Things

Abel Reels partnership led to the usage of OnWater’s maps to customize fishing reels as a B2C channel.

Key Takeaways

In this project, I learned a few things:
1. Team Dynamic Matters
Great leaders and teammates can make a world of a difference in morale, especially so in a remote setting. Unfamiliar concepts became easier to grasp with teammates willing to share their knowledge in their domain of expertise. Our culture promoted an invitation to learn from one another led to a cohesion across departments that made for quick shipping and fun building together.
‍
2. How to Unify Around A Shared Design Language
Design Systems are where products go from good to great. When I worked as a behavioral therapist, our first order of business was to establish an open avenue of communication, the same goes for teams that require design as a centralized focus. For a few months when we didn't have a cohesive design system, we struggled in our communication. Something as basic as naming conventions of our components and assets proved to eliminate friction. This reflected in our output and our users feedback.
‍
3. Ego Gets in the Way
My experience as a designer on this team led me to experience quite a bit of imposter syndrome. As the sole designer providing for an entire organization for over a year, I found myself struggling to see my impact. I went wrong by basing my value through my role as a designer on this team and letting my ego as a "Designer" get the better of me. This led me to narrowly focus solely on my visual designs. After serious introspection I recognized my work ethic and positive team-player attitude go hand in hand with my design skills. After adding another designer to our team, our chats led me to see that design is subjective by nature, but there are objective results that come from identifying as a good human that just so happens to design, rather than only identifying as a designer.