Let's Stream

I designed Let's Stream, an media streaming platform that connects people from around the world to share experiences with their favourite movies and tv shows.

DESIGN CHALLENGE

Due to COVID-19 Lockdown, people are unable to attend in-person activities including going to the theatre with friends and family.

Design a website that allows people to celebrate shared stories together through communal and authentic experiences.

Personalized

Engaging

Community Strengthen

MY SOLUTION

1. Personalized Content +

Watchpal Matching

The system records streaming data and preferences indicated in the onboarding quiz, use the info to:

Curate a list of favourite streaming content
Match user with likeminded others

*Click on picture to enlarge

2. Live Stream and Chat

Different kinds of chatting function that satisfies different needs:

Sharing instant thoughts - flying comments
Deep conversation - discussion sidebar

*Click on picture to enlarge

Flying Comments

Discussion Board

3. Stream Together

Host or join private/public watch party and enjoy seamless synchronization of your favourite content with anyone that you invited.

*Click on picture to enlarge

My Process

DEFINE

Due to the short timeframe of this project, I decided to do some light user research (e.g., having casual one-on-one and group conversation with 6 of my friends) instead of sending out surveys and interview request because:

1. My friends represent the target group of this product

2. I can gather all useful information from my friends more easily and efficiently

3. Lots of new ideas are generated from our conversation (since it's more casual).

Define

IDEATE

User Flow

Branding - Color

Before designing Let's Stream, I thought about following the convention (using red and black as the theme colour) because you can never go wrong with the convention.

But is that what my users want?

After talking to my friends I realized that people my age are tired of the traditional design. They want something vibrant, something new and exciting.

Then I thought about the colour yellow.

It contrasts well with black, its vivid but not distracting, it's young and elegant. Most importantly,

it matches the idea of fun and social - the theme of Let's Stream.

Branding - Icon

As introduced in the beginning, what makes this streaming platform special is its ability to connect people to share authentic experiences.

Therefore, I aim to tell the same story with the icon.

Version 1

Version 2

Version 3

Version 1 -> 2:

At first, I incorporated the spotlight to convey the feeling of a movie theatre, but I soon found it distracting as it has nothing to do with the theme of Let's Stream.

So then I decided to use more symbolization:

The circle represents the individual user
The line represents people seating in a line and watching the content together, which symbolizes the social group.

Version 2 -> 3

I have adjusted the location of the circle and line to create a sense of interaction between these 2 items.

Though the circle emphasized the letter "S" (Indicating US),

the small distance between the circle and the line implies that users have the freedom to choose to stream by selves or with others based on their needs.

All items follow the WCAG 2 AA contrast ratio guideline

Ideate

WIREFRAME

Key pages design

<Sign Up Page>

<Onboarding Quiz>

Users will complete 4 questions that allow the system to curate a more personalized experience for them.

<Homepage>

The use of tabs: "Recommended," "Recently Watched..."

Helps to significantly reduced scrolling and makes this website more accessible than others that have unlimited scrolling.

<Movie Specific Page>

This page not only includes info about the movie but also friends who liked the movie and other movie watchers' review and rating - helps to further build the sense of community.

<My Collection Page>

User Control: Users can create different playlists and organize saved content according to their needs.

<Regular Movie Viewing Page>

Chat/see live comment while watching, avoid missing out on comment or content. Flying comment (inspired by BiliBili’ )

User Control: If users find it distracting, they can also close the comments with a click of a button.

<Watch Party Movie Viewing Page>

Comments appear in the side window.

The host can choose to post different discussion topics during the movie and allows all viewers to engage in meaningful discussion while watching.

<Watch Party Page>

Users can see a list of all upcoming watch party lists in chronological order on this page.

Error Prevention: the most recent watch party is highlighted on the top, which serves as a reminder.

<Schedule Watch Party Page>

Convenience: Users can easily schedule private/public watch parties by filling out this form.

<Profile Page>

User can see their view report analysis on this page, they can also talk with existing friends or match with other users who share similar interests.

<Others' Profile Page>

Users can see other people's profiles and decided whether they want to match with each other.

Wireframe

ITERATE

Iterate

I have asked 5 UX designers to review my wireframe, then edited the wireframe based on their feedbacks.

See Full Storyboard with Design Review Feedback

here

REFLECTION

Aesthetic is important, but design for accessibility is the top priority:

When working on this project, I noticed myself struggling between choosing the better-looking design and the more accessible design. It is not an easy choice of course, as I want my design to stand out. But I then realized that the 'prettiness' of my design is worthless if people can't use or access the product properly.

Yes, aesthetics is something worth considering, but as a UX designer, whether our users can effectively and comfortably engage with the product is more important.
I might encounter the same kind of struggle later on in life, but I will keep reminding myself that I am a UX designer - My user > Everything else.

Let's Stream

I designed Let's Stream, an media streaming platform that connects people from around the world to share experiences with their favourite movies and tv shows.

​

​

​

​

​

​

​

​

​

​

​

DESIGN CHALLENGE

Due to COVID-19 Lockdown, people are unable to attend in-person activities including going to the theatre with friends and family.

​

Design a website that allows people to celebrate shared stories together through communal and authentic experiences. ​

​

​

Personalized

​

​

Engaging

Community Strengthen

MY SOLUTION

1. Personalized Content +

Watchpal Matching

The system records streaming data and preferences indicated in the onboarding quiz, use the info to:

​

Curate a list of favourite streaming content

Match user with likeminded others

​

​

*Click on picture to enlarge

​

2. Live Stream and Chat

Different kinds of chatting function that satisfies different needs:

Sharing instant thoughts - flying comments

Deep conversation - discussion sidebar

​

​

​

​

*Click on picture to enlarge

​

Flying Comments​

Discussion Board

3. Stream Together

Host or join private/public watch party and enjoy seamless synchronization of your favourite content with anyone that you invited.

​

​

​

​

*Click on picture to enlarge

​

My Process

DEFINE

Due to the short timeframe of this project, I decided to do some light user research (e.g., having casual one-on-one and group conversation with 6 of my friends) instead of sending out surveys and interview request because:

​

1. My friends represent the target group of this product ​

2. I can gather all useful information from my friends more easily and efficiently

3. Lots of new ideas are generated from our conversation (since it's more casual).

​

​

​

IDEATE

User Flow

Branding - Color

Before designing Let's Stream, I thought about following the convention (using red and black as the theme colour) because you can never go wrong with the convention.

But is that what my users want?

​

After talking to my friends I realized that people my age are tired of the traditional design. They want something vibrant, something new and exciting.

Then I thought about the colour yellow.

​

It contrasts well with black, its vivid but not distracting, it's young and elegant. Most importantly,

it matches the idea of fun and social - the theme of Let's Stream.

​

​

​

Branding - Icon

Design a website that allows people to celebrate shared stories together through communal and authentic experiences.

Flying Comments

1. My friends represent the target group of this product