Dylan Dinh Portfolio

New Features/Redesign - Livestreaming Website

New Features/Redesign -

Livestreaming Website

New Features/Redesign - Livestreaming Website

The Brief

In the current day and age, streaming services are taking over all over media for TV shows and movies. This is simply due to the convenience it provides. Available on virtually every device, users can watch almost any piece of cinema at the click of a button.

Role

UX/UI, Research

Tools

Figma, Figjam,

Maze

Timeline

3 Months

Team

1 UX Designer

The Problem

Filler

Although the content is free to watch, non-paying viewers must watch ads. Oftentimes, a viewer's immersion is broken if the ads are suddenly played during a stream. Even though it is just a few minutes, the viewer can miss out on crucial moments.

The Solution

Filler

Add more and improve features to the platform to create a more immersive experience.

🔬 Research

9 participants were interviewed

Viewers love interacting with each other and hate missing out on what's happening during the livestream

“I like being a part of the audience”

“I love interacting with other viewers”

“Immersion is crucial for me”

“I just want to watch without any interruptions”

“I like being a part of the audience”

Competitive Analysis

Real-time chat interaction with viewers is a must

All are invested in other categories of live-streaming
aside from gaming

Real-time chat interaction with viewers is a must

All are invested in other categories of live-streaming
aside from gaming

Competitors

Real-time chat interaction with viewers is a must

All are invested in other categories of live-streaming aside from gaming

Personas

🌉 Information Architecture

Feature Roadmap

Create an optional game that viewers can engage in and compete with other viewers during ad breaks

Reasoning:

Combating Twitch’s ad problem is a must. A simple interactive game utilizing Twitch’s picture-in-picture feature does that perfectly while also improving viewer immersion.

Create an optional location sharing feature for travel streamers

Reasoning:

Following the path that other features (channel points, polls, etc.) haven taken, this feature is designed to help strengthen the bond between streamers and their communities.

Create a optional stream highlights pop-up

Reasoning:

Helping viewers who joined late get up to speed, by directing them to crucial moments that happened earlier in the stream

User Flow

🔨 Development

Since my Features are so minimal compared to the rest of the website, I used modified screenshots from twitch as a base for my wireframes

Ad Starts

Playing

Ad Starts

Playing

Game

During

Twitch's

Picture-in-

Picture

Mode

Twitch's

Picture-in-

Picture

Mode

Click to

show

location

Click to show

loca-

tion

Click to

show

location

Map

Highlights Menu

Highli-ghts Menu

Made

darker

Highlight

what

part of

stream

clip is

from

Highli-ght what

part of stream

clip is from

Highlight

what part of

stream clip is

from

Made menu darker

Alternate Pop-up

Altern-ate Pop-up

Joined

stream

late

Continue

or Quit

options

after

ad & game

finishes

Continue

or Quit

options

after

ad & game

finishes

Map

Pop up

giving user

option to

either

Watch
livestream in
a smaller
video
player
during ad
Play game
against
other viewers
during ad

Pop up

giving user

option to

either

Watch
livestream in
a smaller
video
player
during ad
Play game
against
other viewers
during ad

Low Fidelity Wireframes

Game during Ad Break

Game

during Ad

Continue or Quit

options after

ad & game finishes

Optional Location Sharing Feature

Highlights Option Feature

Highlights

High Fidelity Wireframes

No changes were made to the Game During Ad Break & Location Sharing Wireframes

Highlights Option Feature

Alternate

pop-up

screen

Game during Ad

🔎 Testing

Details

5 participants in a moderated usability test
Measured on ability to successfully complete tasks, and in a timely manner
Asked which Highlight pop-up screens they preferred

Task Tests

Task Test 1 - Choose to play a game during an ad break, then return to the stream

Task Test 2 - View the streamer's location

Task Test 3 - View some highlights after joining the stream

Findings

What Worked

Consistent with Twitch branding
Cohesive look
Good concepts behind features

What Didn't Work

Very busy UI
Small text/icons
Need more noticeable CTA

Key Observations

Inexperienced users of the website had trouble at first, but as the test went on, they understood the flow of the site
Users with prior experience had a much easier time, navigated through the new features effortlessly

💡 Iteration

No changes were made to the Game During Ad Break Feature

Optional Location Sharing Feature

Highlights Option Feature

Dark Overlay

over screen

Dark Overlay

over screen

Made

link

into

button

Dark

Overlay

Over

Screen

Added White outline

stroke for better

notice-

ability

White Stroke

Outline

Dark Overlay

over screen

Made link into a

button for better

notice-ability

Made link into a

button for better

notice-ability

Made link into a

button for better

notice-ability

Try out these new Features!

View Prototype

🤔 Reflections

Challenges

With such a compact, busy UI it was difficult to make space for 3 new features
Didn't know how to make new features stand out

How I overcame them

Compact, busy UI - Took note of Twitch's current features, and went from there. Utilizing Picture-in-Picture mode, space in the chat box, and also innovating with pop-ups.

How to make new features stand out - Subtle UI changes that make them pop. Dark overlays, white stroke outlines, and pop-ups.