A dynamic mobile interface that improves and evolves the live stream managing space on Twitch. My goal is to create a seamless integration of mobile streaming tools that improve the live managing experience.
Role Lead Designer
Team 1 Product Manager, 2 Engineers, 1 Researcher, 1 Data Scientist
Impact +40% user adoption, +6% suspended harassment , +11% moderation usage
Users
In the Twitch ecosystem, we have various user groups with shared goals. For this product, our primary focus is on two key audiences: a) streamers and b) moderators. Understanding their unique needs helps us create a more effective and engaging experience for everyone involved.
Challenges
The current management interfaces lack a consistent design, with differing codes for web and mobile that address two user groups sharing the same pain points: a) lack of awareness and b) lack of customization. To gain visibility and buy-in from stakeholders, I created a sitemap to demonstrate how a merged interface would foster cohesion within a single system.
Design Principles
Before starting the design process, I established principles to guide the team and align executives and stakeholders. These principles prioritize user needs, streamline decision-making, and facilitate quicker iterations by reducing ambiguity.
Reliability
Provide a single surface that functions identically and are generated from a single set of code
Allow access to the single surface in existing and new areas on mobile.
Efficiency
Scale to support 10+ creator and moderation widgets/panels.
Help creators and mods to quickly access and complete any tasks from any widget without confusion or delay.
Satisfaction
Allow creators and mods to customize the layout of MVP and future widgets/panels to support their particular workflows.
Strike a balance between information density and legibility. Adhering to good typography practices for layout, hierarchy, contrast, and size ensures that we maintain clarity while delivering dense information.
Responsive & Dynamic Layouts
The current management interfaces lack a consistent design pattern, leading to different codes for web and mobile users who face similar issues: a) lack of product awareness and b) lack of customization.
Tab
Popover
Panel Types
Interactions
I explored smart interactions to prioritize user tasks and customization. However, due to technical constraints and scope creep, we pivoted to displaying two panels at all times, with the option to swipe or tap for additional content.
Stakeholder Workshop
I noticed several open-ended questions that could become blockers, so I proposed a holistic approach with the team to explore what we know about the users and the space. From our findings and engineering feasibility, we identified the MVP/P0 requirements and deferred some items for future consideration. The PM and I kept track of feasibility notes throughout the process.
Prototypes & Usability Testing
I created two prototype views for each user group and collaborated with a researcher to develop a study. We formed hypotheses and created a discussion guide for interviews with five moderators and five streamers managing streams on mobile devices. Overall, users appreciated the redesign with minimal pain points.
“If anything, this has more than what I was expecting … I’m gonna be honest with you, I have had my moments where I wonder ‘Twitch, whataya doinnn’? What’s happening hereee?’, but today you get a solid W. This is brilliance. Yes. This is like, ‘yes there’s hope’.”
“It’s a much more pleasant experience than I expected”
“I think this would be really useful on mobile and make me feel more comfortable [while away from my PC.]”
Iterations
I iterated on the product based on user feedback, leading to quick improvements in a) the dock system, b) customization, and c) responsive layouts.
Entry Points
To boost product awareness among the two user groups, I focused on key mobile surfaces to showcase the new and improved product. I enhanced existing entry points and developed an automated experience to facilitate engagement.
Onboarding
Heavy learning curves are common with our management tools, which can prevent users from fully utilizing their features. To address this early on, I designed a set of onboarding screens to facilitate a smoother learning experience.
Details & Documentation
I reviewed various considerations with stakeholders, including accessibility (A11y), localization, and haptic feedback implementation, to ensure a universally compatible system before the final MVP launch.