Reimagining Ads for Gamers
A shopping experience inside Yahoo TV app for e-sport fans.
STEP 1: User Research
Map the customer’s journey to see where we’ve made a mess of things.
I interviewed with an Overwatch super fan. He watches game play on youtube almost everyday. Every time, he spends average 30mins ~1hr watching it. 90% of the time using his phone and 10% of the time using his laptop. While watching the game, he usually feel lazy to sit in front of the computer and lie comfortably on his bed using his phone. He will be really concentrate on the game and no one can disrupt or stop him.
I identify the user needs from the interviews and usage observation. The user told me their rigid user need (must fulfill, otherwise won’t use):
“I need a delightful game watching experience without disturbed by mindless ads.”
The user told me their latent user need (great if fulfilled, won’t care if not):
“I want interesting interaction”
I also found an interesting user behavior during the study. User will alway watch the game on landscape mode(go full screen). Because the mobile screen is too small to watch the game on portrait mode.
This makes creating interaction harder, simply because there is no space to insert interaction without interrupting the video. The existing ads experience on landscape video are pretty bad.
These user insights leads me to craft the problem statement as follow:
STEP 2 Brainstorming
Diverge on the best ideas before picking the one that matches the solution best.
Gaming users told me, problems with ads during video:
“I don’t want to be taken out of the storytelling experience by a merchant trying to sell something to me, but stay in the imagination world the whole time.”
“What if I can interact with the live streaming platform just like playing games”
The user quotes remind me of playing Mario run. I remember those exciting moment interacting with the moving avatar on the screen.
I can’t help but ask myself:
“What if I can interact with a moving avatar from the game at the game streaming platform”
STEP 3 Rapid Prototyping
I am going to mock up the experience and learn what is working and what isn’t
I ask myself how might we tell a story to keep the user in the imagination world of the game? The answer is using a character from the story to tell the story. I choose to design a pilot avatar of my favorite Overwatch hero, Tracer.
I also captured Tracer’s most important skills in the game. Her ability to move from one location to another faster than the light into the motion design.
I use sketch to build the avatar, the avatar is designed with pixel art style to make user goes back to the happy Nintendo days.
After design the avatar I start to design the flows for the interaction, there are 4 scenarios:
Then I design the wireframe in sketch.
And then animating and Prototyping in Principle.
Finally, I did post production using Premier.
In oder to find the best timing to display the interaction, I study the user journey again.
The pre-highlight discussion session seems to be the most ideal part to insert interaction. Because user no longer needs visual attention on the screen since the game is over. But user will still stay on the streaming platform waiting for the highlight of the game. Here is a demo for the experience:
User Feedbacks & Next Step
I gave the clickable prototype to the Overwatch super fan and he loved it! The avatar animation and interaction looks so much better on a phone than in the demo video. The avatar really pops out and the user has a “wow” moment when he saw the avatar comes out. Instead of being annoyed and feel disrupted, the user actually wants to see more avatar coming out and excited to interact the avatar.
Some learnings and feedbacks from the user including presenting the ads(avartar) at post-game discussion. User wants to see more avatars and the avartars shows their special skill, ex: Genzo coming down from the side of the screen. User also wants to have more ways to interact with the avatar. In addition, for the call to shop experience, the user would love to use the heart button on the card to save the product, and come back to finish shopping latter after the game.
More suggestions included using machine learning to identify who is the highlight character and use this character to display ads after. Another is to extended the avatar interaction to the browser experience.