twitchprime

Company

Twitch Prime is a premium experience on Twitch that is included with Amazon Prime. It includes bonus games and exclusive content, a channel subscription every month at no additional cost, exclusive emotes, and chat badge. 

Challenge

We were asked to standardize the in-game loot pages by creating a simple but effective template and make the loot page feel consistent through visual improvements and information prioritization.

Solution

We created a reusable and extensible system for loot pages, with defined patterns and components, and systematized the pages through information prioritization and visual improvements

FINAL DELIVERABLES

A reusable and extensible system for loot pages

Over the course of six weeks, I came up with a refreshed loot page layout where users can efficiently redeem the offerings in an easy manner. As validated through usability tests, users fully understood the features and value of the loot page

hifiloggedout

EMPATHIZE

Loot redemption should be an easy task for users

We began by conducting a competitive & comparative research. We studied competitors in the gaming space and comparators from other industries. Throughout the research, we focused on the information presented, design patterns, and the general look & feel of the pages.
Desktop HD
IMG_2244

Gamers are looking for an exhilarating experience

To better understand the users within this space, we conducted seven guerilla and 15 online usability tests. In these interviews, we covered the user demographics, basic Twitch and Amazon usage, and the loot redemption process. We then created personas to better solidify our findings. Our research revealed that the predominant group of users are male individuals between the ages of 18-34 who believe gaming will always be a part of their life.

DEFINE

Ensuring a smooth loot redemption process

We reviewed user test notes and screen recordings to make an affinity map to group the pain points. Then we used a 2x2 to identify and select the most important pain points that impact users and business the most. The implementation difficulty was plotted on the y-axis and the level of impact was on the x-axis. Here were the main takeaways:

painpoints

IDEATE

Designing a system that's easy to implement

After nailing down the main points we wanted to focus on, we started sketching out the wireframes for potential designs we can implement. Some components of the sketches I drew up were voted by the Product Manager from Amazon to be included in the final designs as shown in green to the right. 

uisketch

Steps to encourage gamers to take action

After sketching out potential solutions for the loot card page and agreeing on the components, we created low fidelity wireframes on Figma. From there, we tested out the low fidelity with users around San Francisco and crafted different iterations until coming to a version that the client and users were comfortable with

iteration

PROTOTYPE

Enhancing the loot redemption process for gamers

After verifying our design proposals with the client and users, we drafted our high fidelity for the two different states. I then presented the two versions to Twitch Prime's senior leadership in Seattle. We received valuable feedback regarding the copy and information hierarchy, which were implemented in the subsequent versions of the high fidelity. 

finalv1
copy

Actionable Copy

The redesigned portion above the fold includes copy that excites the user by highlighting the exclusivity of the offer and social proof of peers claiming the loot. 

Clear Prime Benefits

For gamers who are considering Twitch Prime membership, a section with Prime membership's immediate value-add is showcased in the loot page. 

benefits
redemption

Understandable Process

Gamers who are new to Twitch Prime can now easily understand the redemption process with a 3-step instruction. 

OUTCOME

A loot page for gamers. By gamers.

To validate our proposed design, we asked seven users in San Francisco to test out our proposed loot page. In conclusion, 7 out of 7 users were able to successfully understand how to claim their loot and fully understood the benefits and value of Twitch Prime. Prior to this proposal, only 4 out of 7 understood how to claim their loot and 2 out of 7 understood the benefits and value of Twitch Prime. 

Selected Works

Twitch PrimeWeb • Template • Information Prioritization • Visual Improvement

Credit SherpaResponsive Web • Financial Recommendation Flow • Branding

SitejabberWeb Application • Information Architecture • Visual Improvements

Hotel TonightiOS • Usability Case Study

Crafted with care by Kevin Kim © 2019
Email | LinkedIn | Instagram | Dribbble