MIKE OICHERMAN
PRODUCT DESIGN · RESEARCH · AI-ASSISTED PROTOTYPING & BUILD
WIDGETS 2.0
Back
Rebuilt StreamElements' core overlay editor for a generation of creators who'd already moved on.
Role Product Design Lead
Timeline Q1 2023 - Q2 2023
Company StreamElements
The Problem
StreamElements' core product, on-screen widgets, had become outdated and no longer met the needs of modern creators. This stale and outdated product created significant friction, leading users to switch to competitors. Our reduced weekly active users directly impacted company revenue.
Goals
The primary goal was to address user pain points and needs by providing enhanced value and new features. We aimed to
Goal 1: Increase Average Monthly Users
OBJECTIVE 1 Increase monthly visits from 2.6 to 4.0.
OBJECTIVE 2 Increase sponsorship offer views by 10-15% (proxy metric).
Goal 2: Increase Market Share
OBJECTIVE 1 Increase monthly active overlay users from 65,000 to 100,000.
OBJECTIVE 2 Reduce the drop-off rate when creating a widget by 50%.
OBJECTIVE 2 Generate a new flow of organic traffic, aiming for 180,000 monthly users.
Research & Findings
GoalsTo map the creator's journey, identify user needs, pinpoint high-friction states, and uncover the "AHA" moment.
Process
5 Preliminary User Interviews Conducted with highly engaged users to understand their current pain points and usage habits.
10 Competitive User Interviews Interviewed users of competitor products to analyze their competitive edge, noting what they liked and disliked.
Competitive Analysis Investigated how competitors differentiate themselves and identified potential feature gaps in our offering.
Usage Survey A survey designed to uncover desired features from our user base.
Key Findings
We identified a clear correlation between tool adoption (acquisition driver) and sponsorship adoption (revenue driver).Our existing product was confusing, limiting, and overly complex, even for power users, hindering overall usability and experience.The outdated assumption of overlays as packed widgets on a single instance did not meet creators' needs. Competitors' approach of a single-instance widget was highly favored by the majority of creators.
Ideation
A 3-day off-site design sprint was facilitated with stakeholders from the Live Tools squad and other relevant teams.
The Good & The Bad. Each team member described what they liked and disliked about the current solution. These pain points were then ranked as a group.
Brainstorming. Members individually wrote down solutions, ideas, or features, which were then ranked by the team.
Concept Development. The top-ranked pains and wants were matched with the top-ranked ideas/solutions. Each member sketched "crazy-8s" (quick solutions) to visualize potential applications.
Selection. Based on data findings and team rankings, one solution was chosen to proceed.
Process Analysis. Key stakeholders reflected on the ideation process, identified potential weaknesses in ideas, and verified the solution's practicality and feasibility.
Prototype
PlanningFollowing ideation, a storyboard was created to simulate the imagined "happy path" of the user.
Prototype CreationI developed a detailed high-fidelity prototype to simulate the core experience. This was showcased to creators in two ways
Online Interviews. A curated list of randomly selected users (from our product and competitors) interacted with the prototype while screen-sharing.
TwitchCon. In-person demonstrations of the prototype, monitoring reactions followed by brief pros/cons discussions.
Flow and Interactions. The prototype emphasized visibility and simplicity. Interactions simulated searching for new widgets on Google, landing on a gallery, choosing a widget, and adding it to an account in a few clicks.
Feedback & Iterations. Team and user feedback from interviews clearly indicated a need for more control and customization. The next iteration addressed this by enabling creators to highly customize their widgets while maintaining simplicity.
Testing & Validation
Method15 x 30-minute video interviews with screen-sharing, where creators interacted with the prototype, sharing their thoughts and feedback.
Key Findings & Iterations
Lack of Customization for Variations. Users still desired more customization, especially when creating variations for display events via widgets.
Limited Widget Types. The prototype initially only included an alert creator. I’ve designed the UX and architecture to support the creation and editing of more complex widget types, such as goals, on-screen video, on-screen chat, labels, and compiled widgets.
The Need for Live Preview. Users wanted to preview their work live and simulate how it would appear in a real live stream.
Design
MethodThe final design streamlined the process of finding, creating, and adopting widgets, prioritizing simplicity while offering a high level of customization. It effectively served both basic and power users.
Principles
Face Value. Demonstrate features and capabilities as early as possible.
Frictionless. Allow users to explore possibilities and features without prerequisite logins.
Simple Yet Powerful. Maintain a clean and simple top layer of the UX while providing power users with maximum control to unleash their creativity.
Thoughts and Metrics
Outcome The redesigned Widgets 2.0 product led to approximately 10,000 daily visits to the Widget gallery, 100,000 users within three weeks of launch, and approximately 17,000 daily widgets created (2024 metrics).
What We Did Right Exposing our widget gallery and editor value to public search, reimagining the UX for creating and editing widgets and creating and opening up an API for developers.
What We Did Wrong Not providing enough new content to the gallery to facilitate stable growth, overestimating the impact of third-party developers on the gallery and challenges in reducing user churn after widget creation.
Live Product View Product