top of page

Tipping Page

Complete redesign of Stream Elements' tipping page. 

​

2023  

Introduction

StreamElements, serving livestreaming and VODs on platforms like Twitch, YouTube Live, Facebook Gaming, and Trovo, offers a versatile suite of tools for over 1.6 million content creators. The Tipping Page is one such tool, empowering viewers to support creators through tips, fostering stronger creator-audience connections.

My role

Project duration

I collaborated with the PM and my team leader on research and created the UX, UI and prototypes.

4 Months

How does one tip?

  1. On creator’s channel, scroll down to the “About” section and click on the donation panel to reach the creator's public tipping page.
     

  2. In chat, invoke the !tip command to get a link to creator’s tipping page.​​                  

  3. The viewer selects the tip amount and can leave a message to the creator, chooses a payment option, and pays. The message and tip amount will appear live in the stream.

adamcouser Twitch channel

How is the page built?

The tipping page is divided into two parts: a settings page, accessible only to creators, where they can customize various parameters, and a viewer-facing section. In the first step, we focused on the

viewer-facing aspect.

old tipping pages.png

Viewer-facing tipping pages featured customizable settings; here are examples from before the redesign.

Problem to solve:
Help creators earn more

How might we redesign a better experience for viewers so the creators will earn more tips?

Motivation:
An opportunity to boost GTV

Tipping is more than 10% of StreamElements’ GTV metric so improving it seems like a low-hanging fruit to boost GTV.

Sitting in Front Of The Computer

The data showed that:

​

81% of the folks that view tipping pages do not tip 😟

​

34% of high intent tippers fail to tip despite selecting an amount, adding a custom message, and clicking the TIP button 😨

What causes this drop-off?

We had some assumptions

PROBLEM #1

 

Login issue: Forgotten username/password

For security reasons, some creators force viewers to login before tipping.

Screenshot 2023-11-05 at 10.28.36.png

PROBLEM #2

 

Payment problems:

Technical/Insufficient funds

PROBLEM #3

 

Trust issues

It often lacked familiar payment method icons, vital for viewer trust in financial transactions.

Old tipping page XQC.jpg
Screen Shot 2022-05-31 at 16.42.jpg

PROBLEM #4

 

UX issues

  • Mobile compatibility problems

  • Accessibility concerns

  • Cognitive overload

  • Key messaging lacks priority

We also saw that:​

21% tip the same creator more than once and 40% of whom use the same message repeatedly 🤔

32% tip on mobile 🤗

Defined KPI

Improve conversion rate by 3%

*This will result in $x GTV uplift

The Strategy: Elevating GTV through the following steps

  • Improve UX by removing UI friction, raise trust and apply best practices to mobile and checkout process (MVP)

​

  • Gather data points and measure improvements

​

  • Explore and user-test additional paths

Research

Inspiration and discovery

Visual research (competitors and non-competitors)

Visual reference Tipping page.png

Discovery interviews

Formulated questions and conducted user interviews with 5 viewers, who are users of StreamElements' creators.

Here's a taste of what viewers had to say

Viewers feedback.png

User Interviews revealed opportunities

  • Tip equals recognition; a prompt response from the creator is crucial.

​​

  • Viewers desire a swift and straightforward tipping process.

​​

  • Many viewers struggle with content for the message box.

​​

  • Avoiding any disruptions to the live stream is essential for viewers.

Process and evolution

User stories & opportunity mapping

I linked opportunities identified in interviews ('I want' and 'I need') with a user story to pinpoint what action triggered the user's emotions

Additional path ideation & story mapping

In the subsequent phase, we generated ideas for new features, presenting them within a user story along with the necessary steps to bring the idea to fruition.

Wireframes

tipping page viewer queue.png

UI mockups by use case

UI Mocks 2.png
UI Mocks 1.png

User Testing Prototype

I tested 2 prototypes with 5 viewers, aiming to shorten the time to tip through added features that include:

  • Utilizing QR codes for mobile tipping so that users won't miss a moment from the desktop live stream they are watching.

​

  • Displaying the live stream on the tipping page to prevent content loss.

​

  • Saving user information (login details and messages) to streamline checkout for the next time the user tips.

​​

  • Suggesting popular community messages and past tip amounts to expedite the tipping process and assist viewers with message ideas.

We received positive feedback on the live stream presented in the tipping page, message suggestions, and the 'Remember me' feature. The UX was described as understandable and straightforward.

Feature prioritization and MVP development

Prioritizing features based on interview feedback, we developed an MVP with a focus on UI/UX improvements. I iterated on these changes in preparation for the second phase.

  • Enhanced message suggestions with a 'Writer's block?' feature, providing recent writings and community messages in a modal. Introduced a Boolean search for improved focus and workspace.

​​

  • Removed 'tip again' from the confirmation screen to avoid unclear expectations.

  • We added the 'Remember me' feature, which saves user information (login details and previously written messages) to reduce friction at checkout and shorten the tip time.

  • Added a feature for viewers to hide the leaderboard according to their preferences.

Final Design: What changes did we implement and launch as an MVP, and why?

CHANGE #1

 

Drop-off reduction

We now require login before form submission to prevent username-password issues and reduce drop-offs.

login change.png

CHANGE #2

 

Strengthening recognition

Moved the dynamic creator message (the 'thank you' message from the creator to the tipping viewer) up for a better sense of recognition.

Enhanced recognition.png

CHANGE #3

 

Enhancing trust

Improved UX and trust by applying checkout best practices, such as adding payment method icons, setting the second-highest suggested amount as the default, and introducing a congratulatory screen to enhance trust in

tip acceptance.

Improved UX and trust

CHANGE #4

 

Improved clarity and reduced distractions

Enhanced clarity and reduced distractions by simplifying the page layout, removing leaderboard noise, creating distinct sections, improving the process of adding a clip, and relocating localization and currency selection.

2-month post-launch impact

We saw a 20% improvement in GTV/RPT 🥳

Takeaways

  • Through continuous learning, we identified complexities in the settings page, refined conflicting definitions, and addressed technical issues with the third-party payment method Ayden.

​​

  • Our initial collaboration, involving the designer, PM, and developer, provided valuable insights for improved coordination and efficiency in future projects.

Future plans

We launched the MVP, and decisions regarding the inclusion of new features, tested in usability interviews, will be based on further measurements.

bottom of page