LEVELING UP TWITCH PRIME
When I joined Twitch Prime in August 2018, I quickly realized the webpage templates used at the time did not support the long-term needs of Twitch Prime customers or the business. New types of offers were pushing the limits of the templates past their intended use. For Twitch Prime to scale as a business and provide the best service for customers, I created a new offer detail page system that's flexible, simple, and powerful.
This is the story of how I created Twitch Prime offer detail pages to improve the customer experience.
The information on this page is my own and does not necessarily reflect the views of Amazon or Twitch.
WHAT IS TWITCH PRIME?
Twitch Prime is a set of gaming benefits included with Amazon Prime. Every month, Twitch Prime members get a free subscription on Twitch.tv, exclusive in-game loot, free games, and all the benefits included with Amazon Prime.
FREE GAMES & LOOT
Exclusive in-game loot, free games, and special game discounts.
EXCLUSIVE TWITCH PERKS
Free monthly Twitch channel sub, Prime chat badge, and exclusive emotes.
AMAZON PRIME BENEFITS
Free two-day shipping, Prime Video, Amazon Music, and more.
Sizzle reel about Twitch Prime for TwitchCon 2018. Art directed by me. Produced by BOND.
PHASE #1: WHY?
The first step in launching a product is clearly defining the opportunity where we can create value for the customer. Before I joined Twitch Prime, this phase was traditionally skipped or glossed over. I added this phase into the Twitch Prime product launch process where Product Managers and UX Designers would clearly define the opportunity together. It is very important that no solutions are gathered, presented, or documented during this phase. Rather, it sets the foundation for a successful solution phase. The final output is an opportunity brief that includes all the necessary information so that anyone can pick up the brief, understand the opportunity and the customer(s), and start thinking of solutions.
What is an opportunity brief and why is it important?
An opportunity brief is a short, living document that follows a customer-centered philosophy and is referred back to throughout a project. It is the contextual bridge between insight and execution, distills research into a well-articulated strategy, and outlines what we’re trying to build, for whom, and why—laying the groundwork for ideation and inspired product design.
Opportunity brief vs. marketing brief
The main difference between an opportunity brief and a marketing brief is the basis of their strategies: a marketing strategy derives its power from an emotional selling point, while a UX strategy derives its power from emotional pain points. Emotional pain points drive the creation of an opportunity statement, which anchors a creative strategy.
OPPORTUNITY BRIEF: OFFER DETAIL PAGES
Sometimes referred to as the problem statement, vision, or the “North Star”, this statement expresses the gap in the market and the space where we can create value for the customer. This statement doesn’t suggest what we should create, just why.
Current webpage templates for Twitch Prime offers do not support the long-term needs of our customers. New types of offers push the limits of our templates past their intended use, including retention-based offers and subscription offers. Additionally, our current business structure for multi-month offers does not align with the goals of game developers (generate the largest number claims or sign-ups) to the goals of Twitch Prime (attract and retain new Prime members). We must develop a new webpage template system to scale as a business and provide the best service for our customers.
How are customers getting value now? How are customers doing things today?
Currently, the goals of game developers and the goals of Twitch Prime do not align. Structures of offers for Twitch Prime need an element of retention, meaning the length of time that members stay in the program, and their level of activity with Prime benefits. With new tech solutions being built that allow for Twitch Prime members to claim content based on retention, it introduces a complex customer problem that our current webpage templates do not support. Current templates are limited to multi-month campaigns with no retention system, and include many customer experience issues (see Usability Testing for specifics). There's one template limited to 3 drops, and there's a seperate template for more than 3 drops. These pages also lack a clear purpose and have conflicting hierarchies in their layout with heavy emphasis on advertising other offers and advertising Twitch Prime, rather than keeping the focus on the in-game content offer.
Old "Amped" webpage templates
Who are we designing for? Make sure all customers that may be impacted by the product are recorded. What frustrates customers about the way they do things today? These are the problems we need to solve if we want the product to be perceived as valuable.
Customer #1: Twitch Prime members or potential members (gamers/players)
Customer Pain Points:
- Confusing experience
- Messaging in unclear
- Purpose is unclear
- Account linking is hard to follow
- Weak visual design
- Improve customer experience (#1 goal)
- Simplify the customer flow
- Clarify messaging
- Raise the creative bar
- Simplify and add rich media
Customer #2: Game Developers & Publishers
Customer Pain Points:
- Intake churn (uses time)
- Lack of visibility (uses time)
- Poor onboarding
- Lack of control (lower dev satisfaction)
- Lack of understanding of success
- Not enough flexibility
- Clear understanding of the product and its features
- Innovate to increase feature availability
- Simplified external operations
- Flexibility of components
- Integrate metrics for reporting
- Invent new components, test, release
Customer #3: Twitch Prime Business & Operations
Customer Pain Points:
- Not flexible (hurts deal structure)
- Poor tooling support (ops time wasted)
- Low visibility for decisions (no metrics)
- Lack of creation process (ops time wasted)
- Inconsistent brand representation (low trust)
- Simplified creation process
- Simplified internal operations
- Cohesive Amazon, Prime and Twitch branding
- A/B testing for informing and iterating
- Increase BD confidence communicating deals
- Establish SLAs, policies, and creative standards
- Build into design system
To truly understand what our customers are used to, I scoured the web to record all game stores, streaming sites, and game sites as competitive analysis and inspiration gathering. It was a very thourough competitive analysis where I captured 124 websites. Then I analyzed each of them based on likes and dislikes of their UI and UX. Some of the common likes and dislikes are listed below.
- Variable sizes for card design
- Card size determined via content type
- Subtle background images
- Profile image
- Clear purpose
- Customer quotes/sentiments
- Grid sorting
- Search with minimized CTA
- Bucketed categories
- Thoughtful/compelling imagery
- Peeking on carousels
- Minimal copy
- Smart color usage
- Motion/material design
- Subtle motions with CTAs
- Countdown timer
- Sticky navigation
- Favorite/wish list feature
- Top games/offers
- Clear CTAs through Hover Treatments
- Clear content breaks and separations
- Recently viewed section
- Show value through pricing and discounts
- Icons for platforms
- Featured offers through streamers
- Browse All CTA when more items are available beyond what is shown
- Flow/Directional use of imagery drives the eye to new content
- Well thought out lifestyle imagery
- Clear indicators of volume within carousel
- Quick links
- Notifications center
- Thoughtful parallax scrolling
- Imagery that directs the eye and flow
- Breaking bounding boxes and areas with imagery
- Platform icons vs copy
- Use of duotone/monotone images to break up the full color imagery
- Carrying aspects of the games into the design. ie torn pages, bullet holes, etc
- Timers on carousels
- Complete takeovers of latest content offer
- Carousel of content (characters, vehicles, etc)
- Implied motion through imagery
- Playable elements within the site
- Story driven style (e.g. God of War)
- Box art
- Genre buried in copy
- Mixed CTA style
- Too dark
- Text that isn't legible
- Overwhelming content
- Very little to no peak on carousels
- Tight small cards with little visuals
- ALL CAPS EVERYWHERE
- Very large hero placement with little to no peeking of content below the fold
- Over use of shufflers/carousels
- Too many CTAs to act on
- Using products to represent features
- Stock photography
- Not truncating
- Duplicating titles with game logos
- Overloading carousels
- Small fonts and tight line spacing
- Duplication and repetitive content/imagery
- Hidden Search
- Too much video where everything is moving
- Customers should not have to guess iconography
- Floating copy on busy imagery
- Dark copy on dark backgrounds
- CTAs hidden within imagery or heavy copy
PHASE #2: WHAT?
I first like to start sketching on a white board then iterrate on a sketch pad. Then I take those ideas into Sketch to create wireframes. Once I have a solid concept and other stakeholders have agreed to the direction, I begin creating higher-fidelity mocks because using realistic content can drive many design decisions.
Next, I put together a design proposal that outlines the user flow, color palette, and my first-round high-fidelity mocks with their features and components outlined.
PHASE #2: HOW?
COMPONENT BREAKDOWN & PRIORITIZATION
During intitial ideation I try to solve as many customer needs as possible, then I work with the Product Manager to pair back the design into phases of development. I first categorized each part of the website into flexibile components, then prioritize each one based on the following criteria:
P0 = Content already on the current webpage templates + requirements for retention offers
P1 = Content we don't currently include on our webpage templates, but would improve CX
P2 = Value-add components and rich media content
Once we have a solid plan, I start prototyping my concept in preparation for usability testing. For prototypes that require video, I build it in Principle and host it locally for in-person testing. For prototypes that do not require video, I build it in InVision for usability testing both in-person and remote.
I conducted 3 usability tests to observe initial customer reactions and test usability of the offer detail pages in prototype form. Full usability testing reports are not available to the public.
APEX LEGENDS IS COMING... FULL SPEED AHEAD!
TIME TO LAUNCH
With the upcoming release of Apex Legends in February 2019, it was a no-brainer to launch the new offer detail page template for the Apex Legends offer. The offer included a single loot drop of an Omega Point Pathfinder Skin and 5 Apex Packs. Taking the learnings from my usability testing, I refined the original design into what would be the final P0 page. Then worked closely with Twitch Prime engineers to build the rest of the site so it's ready for launch.
The Apex Legends offer became one of the biggest offer launches in Twitch Prime history.
As more of our game developer partners saw the offer detail page, they started to request launching on the new template and not the old one. About a dozen offers launched on the new template within the span of 2 months for top games including SMITE, Warface, En Masse, World of Tanks, Call of Duty, and more.
Launching offer pages faster than we expected caused us to sacrifice some polish on the front-end. I kicked off a project with our front-end engineer to fix issues on the site. This was a team-wide interest to raise our website standards for Twitch Prime, make our code more scalable, and greatly improve the customer experience.
A PEAK INTO THE FUTURE
In an effort to gather some feedback from game devlopers/publishers on the new offer pages, our teams met with EA and Respawn. After asking their marketing, campaign, and BD owners what they wanted from our offer pages and what they think their players need, their input was followed with a viewing of a P2 prototype of the Apex Legends page that I concepted from found content online:
"Overall, [their feedback] was VERY positive and I wanted to give you a specific call out. You’re judgement on design/marketing features was right in line with EA and Respawn desires and what they believe their players want. In fact, every feature you listed was requested and roughly 75% - 80% of their requests were covered by your features. I don’t think I’ve seen that UX “batting average” before. Thank you for continuing to push Twitch Prime to have a better user and partner experience." - Twitch Prime Sr Program Manager
TWITCH PRIME + NINTENDO SWITCH ONLINE
FIRST TWITCH PRIME RETENTION OFFER
While our tech teams were working on building an event-based offer system based on long-term active Prime membership, I was working on the UX and UI of the Nintendo Switch Online offer. This was our first partnership with Nintendo and first retention-based offer.
On March 28, 2019, Twitch Prime members can claim up to 12 months of Nintendo Switch Online at no cost if they redeem the 3-month and subsequent 9-month offer after 60 days of active Prime membership. This partnership garnered one of the most covered Twitch Prime offers in the press, including articles from top gaming and tech sites like Mashable, The Verge, TechCrunch, Gamespot, and Polygon.
My role in the launch of this offer didn't come without its own set of challenges. Not only was there a language barrier and intense review process, there were also many elements of the user flow on Nintendo's side that we did not get support to fix. For the many months leading up to the launch, I had to continuously come up with UX solutions without sacrificing a great experience for our customers. Additionally, I set the art direction for long-term offer marketing optimization.
“Twitch Prime has been aggressively expanding its offerings over the past year, adding a focus on its lineup of free game offerings alongside skins and other add-ons for popular multiplayer titles.” - Screen Rant
“Twitch Prime is working to be the best deal in gaming, and it seems that it’s well on its way to snagging that title.” – Mashable
“For those who don't know, Twitch Prime is a service that comes free with a valid Amazon Prime account, and it packs a notorious amount of rad gamer loot.” – Esquire
We're on track to deprecate Amped pages and making offer pages the standard. I have plans to create a PSD template and copy/UX guidelines for better game developer onboarding—which is something I already did for the Twitch Prime marketing team for their advertising placements, just need to do the same for offer pages). We will continue to build and launch P1/P2 components with A/B testing, continue polishing the page's front-end, create new components based on demand and customer interest, get the rest of Twitch Prime's web presence integrated into my design system, and many more plans. Stay tuned!