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.
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.
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
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.
EMPATHIZE
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
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:
IDEATE
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.
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.
PROTOTYPE
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.
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.
For gamers who are considering Twitch Prime membership, a section with Prime membership's immediate value-add is showcased in the loot page.
Gamers who are new to Twitch Prime can now easily understand the redemption process with a 3-step instruction.
OUTCOME
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