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?
-
On creator’s channel, scroll down to the “About” section and click on the donation panel to reach the creator's public tipping page.
-
In chat, invoke the !tip command to get a link to creator’s tipping page.
-
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.

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.

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.


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.



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)

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

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

UI mockups by use case


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.

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.

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.

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.