Shayne
Shayne is a designer in Seattle.
twitchprime-portfolio.png

Twitch Prime: Offer Pages

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

OPPORTUNITY STATEMENT

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.

CURRENT STATE

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

CUSTOMER NEEDS

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

Customer Needs:

  • 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

Customer Needs:

  • 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
  • Self-service

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)

Customer Needs:

  • 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



COMPETITIVE ANALYSIS

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
  • Accessibility
  • Customer quotes/sentiments
  • Grid sorting
  • Search with minimized CTA
  • Filtering
  • 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
  • Recommendations
  • 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
  • Noisy
  • 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?

INITIAL IDEATION

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.




DESIGN PROPOSAL

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




PROTOTYPING

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.


USABILITY TESTING

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.


TEST #1: Old Template (Amped) vs. Offer Detail Page

Old Template (InVision) | Offer Detail Page (InVision)

Format: Remote test on usertesting.com. Screener: Age 18-40, plays 5+ hours of video games a week.

Goal: Observe the reactions to the offer detail page design and compare it to the reactions of the old template.

Background: This is the first time the Amped page design has gone through usability testing. The hypothesis formed prior to this test was that the new offer detail pages will have a higher positive impression. If this is true, then we can safely assume that when customers engage with offer detail pages it will lead to increased excitement in Twitch Prime and its in-game loot benefit. Excited customers are valuable to Twitch Prime and represent users more likely to sign up and/or claim Twitch Prime exclusive loot.

Findings Summary: When participants saw and explored the new offer detail page, they expressed a feeling of excitement and encouragement to sign up for Twitch Prime. They described the site as “attention-grabbing”, “organized”, “detailed”, and “very easy to understand”. This excitement and clarity were not expressed by participants when seeing the Amped page. Rather, participants described the Amped page as “advertising” and “chunky” with mostly negative first impressions and a noticeable confusion over the main purpose of the site.

Recommendations: Based on the results of this test, we must invest in developing offer detail pages and consider deprecating the Amped templates. Not only because there’s a business need, but because when customers saw and explored the new offer detail pages they expressed a feeling of excitement and encouragement to sign up for Twitch Prime—which wasn’t conveyed at all for Amped pages. This test also taught us that Amped pages have a bad first impression and are confusing our customers which hurts our business and hinders the experience of current and potential Twitch Prime members.


TEST #2: P0 Offer Detail Page

P0 Offer Detail Page (InVision)

Format: Remote test on usertesting.com. Screener: Age 18-40, plays 5+ hours of video games a week.

Goal: Determine if the P0 page presents the in-game loot offer in a way that is easy to understand.

Background: The page that was tested is the P0 offer detail page that includes all of the required elements to launch an offer—while using Shadow of the Tomb Raider assets in the prototype as placeholders. Before launching an offer on the new template, we want to make sure the P0 page is designed in a way that has a positive reaction and clear understanding.

Findings Summary: The majority (78%) of all first impressions of the page were positive, describing it as “very clean”, “professional”, “visually appealing”, and “intriguing and inviting”. 8 out of 10 participants were able to correctly determine the purpose of the site. The biggest confusion occurred when the participants were asked to perform the task of enrolling and claiming the first loot drop and were presented with a second button “link accounts to use loot”. Based on all of the participants’ definition of “enroll” being enrolling in Twitch Prime and assuming “link accounts” referred to linking their Amazon Prime and Twitch accounts, they deemed this step unnecessary.

Recommendations: The visual design of the page should remain the same due to the participants’ positive reactions, but to make enrolling and claiming easier to understand, some important UX improvements need to be made. The entire claiming flow needs to be simplified, but there are some improvements that can be made to the design immediately (see full report for quick solutions).


TEST #3: P2 Offer Detail Page

Prototype built in Principle.

Format: In-person usability test through recruited Amazon employees. Screener: Three different gaming profiles and three levels of Twitch Prime awareness.

Goal: Observe if the additional components and rich media on the offer detail page impacts users’ attitudes, behaviors, and motivations towards claiming the in-game loot.

Background: People who play video games expect high-quality visuals in the games they play and Twitch users on average spend 95 minutes a day consuming high-quality video content on Twitch (as of 12/5/18). These customers’ expectations and habits are not currently represented on Twitch Prime offer pages which lack rich media such as videos, animations, and high-quality visuals. A hypothesis was formed that if we add rich media to the page, users will have a higher positive reaction to the game and offer. To assess this hypothesis, a prototype was tested which represented a future iteration of the offer detail page with rich media components.

Findings Summary: 7 out of 8 participants explicitly had a positive reaction to the animations and videos on the page. Referring to the animation at the top of the page, participants said it “feels like you are part of a video game experience” and “it’s aesthetically pleasing”. Referring to all of the videos on the page, participants said it made them “feel excited” to play the game and get the loot. One participant—pretending they were on their own computer—tried to set the hero image as their desktop background because they liked it so much. The only participant that didn’t have a positive reaction to the videos did not regularly play games or watch Twitch.

Recommendations: Based on our findings, we must invest in rich media components on our site to draw in current and new Twitch Prime customers. The positive reactions to the animations and videos on the page expressed by participants of the test lead them to have an excited attitude towards the content and thus were more motivated to sign up for Twitch Prime and claim in-game loot.

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.


DEMAND INCREASED

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.


CONTINUOUS IMPROVEMENT

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

WHAT'S NEXT?

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!