UX CASE STUDY
Twitch + Nike Jordan tasked us with creating an engaging experience for viewers of the Quai 54 street basketball tournament streamed live on Twitch. We designed District 23 — an interactive Twitch experience featuring three unique, basketball-themed mini-games that keep viewers entertained during tournament breaks. It also offers educational content, immersing viewers in the rich history of Parisian street basketball. Figma file of sample work here.
Overview
Context
HMW leverage downtime in a Twitch stream to maximize viewer engagement and participation in a connected event?
To keep viewers engaged during Jordan Brand's Quai 54 street basketball tournament, I collaborated with designers and developers at Stink Studios to craft a minigame experience for Nike's Twitch stream.
🎉 The District 23 experience is LIVE throughout July and August here on Twitch and here on the Jordan website! 🎉
Here's a side-by-side of our early prototype and the final version live on Twitch:
Early prototype of the Twitch x Nike Jordan District 23 experience on the left. Final LIVE District 23 experience on the right.
This annual event coincides with the Paris Summer Olympics this year, raising its profile significantly. To capitalize on this synergy, Twitch partnered with Nike Jordan to feature live streams by various content creators throughout the event.
Here's a look at the event timeline:
My role
I worked closely with my London based colleague, Patch Mccabe on delivering the user experience and functionality guidelines for this project. We collaborated with Stink Studio designers Viv Greywoods and Christine Zhang, and freelance developer Pim De Wit to craft the experience.
Client goals
01
Maximizing user engagement during the live events on Twitch.
02
Implementing accessibility measures and establishing functional guidelines for game designs across mobile and desktop.
03
Minimizing onboarding friction for new users, while also encouraging sign-ups.
Challenges
01
How do we engage users that are new to Twitch?
To mitigate this, we focused on perfecting the game onboarding flow to limit friction. Additionally, we encouraged team spirit and reward engagement through shout outs and Twitch points.
02
How do we design games that are accessible and engaging for both desktop and mobile users?
Since our Twitch audience is split evenly between desktop and mobile viewers, we designed the game functionality and controls to be intuitive for both. This means using clear and simple visuals, ensuring buttons are large enough for easy tapping on mobile screens, and keeping keyboard controls straightforward for desktop users.
Understanding the concept
Designing a Twitch stream extension
Designing a Twitch stream extension for the Jordan Summer of Basketball Culture Twitch event to keep viewers informed, engaged, and up-to-date. The extension overlays the entire Twitch stream with an interactive map of Paris with hotspots for selected Districts to highlight their history with basketball.
The main feature of this extension is a series of minigames that will be playable throughout the event to engage users during stream downtime and promote Twitch sign-ups. Users will be encouraged throughout the event to earn points for the district they fall under and compete for Twitch rewards.
Here's how it works:
Team Selection: Upon entering the interactive map, users will be assigned a team for the event.
Minigame Drops: New mini games will be progressively unlocked throughout the event on the interactive map. Each minigame that is released is harder than the last.
Competing for Points: Attendees can compete against other participants in these minigames.
Climbing the Leaderboard: Every point earned contributes to the participant's district score, moving the district up the leaderboard.
We aim to maintain a sense of progression throughout the festival by weaving the user flow into a narrative.
UX Challenges
Challenge 01
Achieving smooth access for all users: how do we engage users that are new to Twitch?
We identified 3 key users to craft our user journeys around:
First time, logged in
Returning, logged in
Logged out
Diving deeper into the specifics, we created a detailed use case table for the Twitch event. This process assisted us in building out our wireframes as individual flows, documenting each aspect of the user’s interaction.
To ensure a comprehensive user experience, we created a detailed use case table for the Twitch event. This process assisted us in building out our wireframes as individual flows, documenting each aspect of the user’s interaction.
How did we limit friction for new users while also encouraging sign-ups?
01
Effortless Onboarding
We prioritize a seamless experience for all users, whether new or returning. This is achieved through a captivating narrative that guides them through the game seamlessly.
02
Team Spirit & Rewarding Engagement
The game fosters a sense of community, encouraging user interaction through shout-outs, comment integration, and potential rewards like access to exclusive events and products.
Challenge 02
Significant differences in device size: how do we design games that are accessible and engaging for both Desktop and Mobile users?
Initially, we focused solely on the desktop experience due to the significant design differences required for mobile. However, upon receiving feedback from Twitch highlighting their 50/50 user split between desktop and mobile, we pivoted our approach mid-discovery. We incorporated mobile compatibility into our designs, prioritizing a consistent user experience across both platforms.
How did we design for cross-platform accessibility?
Initially, we focused solely on the desktop experience due to the significant design differences required for mobile. However, upon receiving feedback from Twitch highlighting their 50/50 user split between desktop and mobile, we pivoted our approach mid-discovery. We incorporated mobile compatibility into our designs, prioritizing a consistent user experience across both platforms.
01
Making the game mechanics (controls) accessible across devices — thinking mobile-first
We prioritized mobile users when designing the game's controls. This means using clear visuals, simple interfaces, and large buttons that are easy to tap on a touchscreen.
02
Balancing difficulty for a fair experience
Some game mechanics, like balancing a ball, are naturally easier on mobile devices. To ensure a balanced challenge on both platforms, we've implemented controls that slightly limit performance for mobile players. This creates a level playing field regardless of the device being used.
03
Modifying navigation for mobile users
Because of screen size limitations, mobile users can only interact with the game navigation. Desktop users, on the other hand, have access to both the game navigation and the livestream.
Reflection
The importance of storytelling in crafting compelling digital experiences
Throughout my career, I've been drawn to the power of games to craft compelling narratives, innovative digital interactions, and impactful brands. This project ignited a renewed passion for the intersection of creativity and technology. By collaborating closely with creative technologists, I gained invaluable insights into building immersive experiences within existing platforms like Twitch. This project reinforces my belief in the potential of gamified interactions to captivate audiences and bring stories to life in unique and engaging ways.
A key lesson I learned during this project was the importance of simplicity in game mechanics and development. By focusing on core functionalities and a clean user interface, we were able to create a robust and engaging experience efficiently. This streamlined approach allowed for rapid iteration in our lean design approach, ensuring the final product effectively met the project's goals.