Overview
Yahoo Entertainment launched a video content app where users could easily consume the latest entertainment latest news and get rewarded through interactive shows.
In order to support interactive features on mobile, I helped build the flow and features for both mobile and Creator tool, which was an internal editing program that allowed continent makers to upload videos and add interactivity such as quizzes, AR filters, and shopping cards.
Goal
Over 85% of Yahoo users are in their mid 30s. We wanted to entice a younger demographic, including Gen Z - the latest generation graduating into adulthood, and convert them to loyal users using the live trivia app trend.
Category: UX/UI design
Role: Lead product designer
Year: 2019
Two main users supported by two platforms
I defined and designed flows for two targeted users: Gen z users and content makers. For this project, I supported both mobile design for the front-end users and desktop design of the creator tool, which our editors used internally.
Main interactive features
Time indication
Points + Correct answer indications
User feedback was that we didn’t give any indication when they ran out of time. Because users focused on reading questions and answers, they ended up not answering within the limited time frame. We added a clock buzzing animation to grab a user’s attention.
When we user-tested various options to display points, showing earned points immediately was enough for users to understand the concept of collecting points without displaying a checkmark icon.
Add interactive features through Creator Tool
01. Quiz
Homepage
The main page of Creator Tool displays a list of projects. There’s a published status which allows editors to easily filter out published projects versus draft projects.
Create a project
Editors can enter a title for a project, add a video link, and choose a type of project
Settings
When editors choose a trivia type of project, they can select the settings they want once, which will then automatically apply to all quizzes.
Interactive cards
Editors can add additional interactive features individually, even if they already created a certain number of quizzes through the trivia pre-settings.
Add a quiz card
Editors can still edit an individual quiz card even though they used pre-set settings in the beginning of the process. In a quiz card, a correct answer section will be available. Editors can upload images if they want to create an image/gif question.
Preview mode
Editors can preview on different devices before they publish a project.
After publishing a project
Editors will be able to see users’ votes coming in live. The correct answer will be highlighted in green.
02. Poll
Since there are no correct answers in polls, we display the user’s selected answer in a theme color that an editor chooses from Creator Tool.
03. Prediction
Current quiz format
The existing quiz format displays a question card followed by the results card. In order to support a prediction trivia show, I needed to figure out a way to separate quizzes and results, but without modifying the existing format to allow our engineering team to implement it easily. The existing flow of the quiz/poll card showed a results page which displayed a process bar to show the number of votes coming in live after publishing a project.
Explorations
Idea 1.
We could simply separate a quiz card and a results card by default.But this required our editors to recreate the same project starting from a scratch when announcing results.I needed to figure out a way for editors to create a show one time and separate questions and results that would be announced a few days later.
Idea 2
We could export only the results part of the quiz to either a new project or an existing project. However, the problem with this flow is that it seemed a bit hidden and could be complicated for some editors to figure out how to make a prediction show by themselves.
Idea 3 - Final design
Since over 2,000 editors are using the creator tool across the world as an editing tool, I wanted to make this feature intuitive enough for them to use without any training sessions. I added a link to connect or disconnect a question from the results. The “hide” button will be activated when tapping on the link icon to disconnect a question from the results.
App flow
(1) Submitting stage
(2) Submitted stage
(3) After revealing answers
Once editors submit the answers from Creator Tool and re-publish the project, users will get notified, if the users turn on notifications. Users should receive the points right away as soon as editors submit the answers, if users got the questions right.
04. Shop card
While users are watching a show, we could feature a shop item that is available on our shop page using Creator Tool, which allows editors to add a shop item. Data of individual shop items will be transferred from our internal shop management tool.
Add a shop card through Creator Tool
External shop links
We allow editors to add external shop links. Since there’s a possibility that a product image won’t perfectly fit into our shop card size, an image cropping and reposition feature was necessary.
Internal shop links
While users are watching a show, we could feature a shop item that is available on our shop page using Creator Tool, which allows editors to add a shop item. Data on individual shop items will be transferred from our internal shop management tool.
Launch highlights
We received over 20,000 downloads and over 180,000 video streams within the first 2 weeks of launch.
Over 60 percent of our audience is under 35, and we have 27 percent of generation Z users, who are under 24. We’re bringing in a younger user base to Yahoo.
