Summary:

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.

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.

Introduction

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 already discover 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.

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.

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.

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.

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. In the end, our designs were able to negotiate this, avoiding specific rates based on browsing activity, aligned well with the product's values, and satisfying users ongoing needs.

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

← Back to Projects