💳

Join Surf: Transparent rewards

Project

Join Surf

My role

Lead UX Designer

Timeframe
January 15, 2022 → March 15, 2022
Key metrics

• –97% navigation bar “rage clicks” • +X% user retention and user satisfaction.

The problem

Users struggled to understand in-app points. We were able to link this confusion to observational data showing users repeated clicks on their points totals. Users also expressed a need for transparency in their earning and spending.

The solution

Through usability testing, guided research sessions, prototypes, and clever content strategy, we created an improved points experience that met both users needs and business requirements.

Collaborators

• Intm. UX Designer • Engineers and Product team

Join Surf: Transparent rewards

This case study highlights how our design team at Surf helped users track and understand their in-app points balance. The currency of the Surf product, points, were earned passively by users by browsing the web and could be redeemed for rewards.

image

Through iterative design and user research, we developed a content strategy and interface to help users easily access information about their points. The solution was clear and usable. It optimized trust and understanding, supporting Surf’s value of transparent, easy, and rewarding data collection.

Surf is a browser extension focused on reinventing how users interact with their online data, offering control and rewards in exchange for passive surfing. With myself as Lead Designer and Mary Pauw as Intermediate Designer, our objective was to address UX gaps related to earning points. Points were a key component of the Surf experience, and users would spend them on rewards like gift cards, deep discounts, and consumer products.

Thanks to earlier research exploration through usability testing and interviewing, we had already discovered that users struggled to understand how they earned points. Another research insight was that most users who’d been active for more than a week wanted to track their earning and spending.

Investigating points and clicks

To gain deeper insights, we spent a few days monitoring HotJar, a user behaviour monitoring tool. Here, we uncovered a trend—many users were repeatedly clicking on their (non-interactive) point balance in the top corner. Though we didn’t know why they were doing it, this quantitative data highlighted a potential. We hypothesized this was connected to a significant interest for users to understand their points, and this prompted us to investigate further.

The points balance element in question also hinted at interaction by using a colour that stood out in our UI design system. Lesson learned.
The points balance element in question also hinted at interaction by using a colour that stood out in our UI design system. Lesson learned.

To understands our users’ expectations, we conducted guided research sessions. Surprisingly, when asked what they expected to happen when they clicked their point balance, users were unsure. However, when asked to find more information about points or to navigate to a log of their earnings, the majority suggested clicking on that same points-balance element. A noteworthy exception was the few users who chose to instead navigate to Surf’s settings, where they’d find their browsing history.

Solving points and clicks

Equipped with research insights, we set out to design a solution that would address user needs and expectations. Our prototypes focused on incorporating points tracking into their browsing history. This helped users associate their browsing data with their points.

An earlier version included an intermediary pop-out panel. We wondered if a quick summary could meet the needs of those with casual curiosity, but in testing it added confusion, inhibiting access to the information users were looking for. We scrapped it and adapted quickly.
An earlier version included an intermediary pop-out panel. We wondered if a quick summary could meet the needs of those with casual curiosity, but in testing it added confusion, inhibiting access to the information users were looking for. We scrapped it and adapted quickly.

Access to Surf points information was made available through both the settings page and the point balance in the header. Through usability testing, we observed users successfully navigate to their points where they could track them and learn more.

We tested with simple wireframe prototypes so we could adapt on the go, removing obstacles and refining copy as we continued research.
We tested with simple wireframe prototypes so we could adapt on the go, removing obstacles and refining copy as we continued research.

One particular challenge we encountered was clarifying the relationship between the user’s balance, their spending in the reward store, and their weekly earnings. With the assistance of user input, we came to an effective content strategy. Users found it clearest when presented with their a summary of their weekly earnings, and a log of their long-term activities in the context of their current balance.

image

We had to balance transparency with maintaining the passive nature of browsing. Too visible a connection between points and behaviour could encourage changes in browsing activity. At best this would lower the quality of user data and at worst catalyze a culture of gamification at the expense of our budget and runway.

Including a weekly total and avoiding higher fidelity of information, we found a compromise for our users. By avoiding granularity, users could focus on the helper text and their data rather than modifying their browsing behaviour. This aligned well with the product's values and, based on user testing, resolved users confusion.

In the weeks after launch, we reported 97% fewer ‘rage-click’ incidences in the top navigation. We hypothesized that a 100% decrease would be unlikely— due to fidgety fingers, bots, slow internet connections, and even QA testers trying to break things (responsibly).

Throughout the process, our team worked with user data to develop a usable and informative design. The result was a core, easy-to-discover part of the Surf experience, where users could track their points and even manage the data they share.

← Back to Projects