top of page

Group Project (Sep. 2021 - Dec. 2021)

Popcorn: Your Gateway to
New Media and
Community Connection


Popcorn is a social media platform that revolves around TV shows and movies. It is a place where users can see their friends’ recommendations, leave comments about something they’ve watched, recommend media to others, and chat with friends.


Popcorn’s goal is to make watching TV shows or movies an enjoyable and social experience, which will hopefully bring friends and family closer together without the need to be physically present. 

The idea for Popcorn grew from our group’s common frustrations with terrible AI recommendations and the hours we wasted scrolling through recommendations. We thought that there must be a solution to fix the arduous process of finding a movie or TV show to watch. So we set out to explore the idea and find answers.

My role in this project is UX/UI designer and UX researcher.

Timeline & My Contributions


> Interview  

> Empathy Map & POVs

How Might We...

Prototype Building & Iteration

> Ideation  

> Paper Prototype  

Usability Testing

> Lo-Fi Prototype  

Heuristic Evaluation

Visual Design

> Hi-Fi Prototype  

> Concept Video  


The project focuses on the consumption of media, specifically music, TV shows, and movies. We aim to explore the connection between sharing and media, including the interactions that might develop from consuming media.

> Interview

5 potential users from various demographics were interviewed to find insights of the media consuming experience. Each interview was noted down and transcribed. I interviewed 2 interviewees and took notes for 1 interview.

头像 (1).png



Band member

头像 (10).png



Anime fan

头像 (5).png



Pro. in media

头像 (12).png


Mother of 3

Leisure watcher

头像 (3).png



Thoughts sharer

> Empathy Map & Point of View (POV)

media consumption - Frame 1.jpg
media consumption - Frame 1.jpg
media consumption - Frame 1.jpg

Although the interviewees' perspectives might be quite different on the surface level, what they suggest is that consuming media can be a solitary activity, but there is also a major community aspect that exists. Sometimes the community can be inaccessible whether because of physical distance or differing schedules. Even simply, afraid of bothering their friends.

3. How Might We... (HMW)

We brainstormed 30 HMW sentences and picked the Top 3, which were the most representative and promising ones for all interviewees. The main pain points are exploring media without feeling guilty, preserving ideas, and strengthening the connection with users' own communities by sharing those ideas.

media consumption - Frame 2.jpg

Prototype Building & Iteration

The final solution integrated multiple ideas from the last stage, which is a platform to connect with friends over media through clips, timestamped comments, friend recommendations lists, and ratings. The final design evolved from rough sketches > paper prototypes > low-fidelity prototype > high-fidelity level. 

> Ideation (Sketches)

1. Mobile Application

2. Kiosks in theaters

4. Commenting during watching

Rough sketches_00.png
Rough sketches_02.png
Rough sketches_03.png

3. Website

Rough sketches_01.png

Considering the accessibility (small screens may lead to difficulties in operation and watching), implementation feasibility, and continuity of the experience, we decided to move on with #3.

> Paper Prototype

The paper prototype is the completion of sketches, which has relatively comprehensive user flows and can be used for further usability testing. Despite the main pages, I also created overlays with different sizes to imitate “pop-up" windows in reality.

Paper prototype_00.png
Paper prototype_02.png
Paper prototype_04.png
Paper prototype_01.png
Paper prototype_05.png
Paper prototype_06.png
Paper prototype_07.png
Paper prototype_09.png
Paper prototype_08.png
Paper prototype_03.png
Paper prototype_13.png
Paper prototype_11.png
Paper prototype_12.png
Paper prototype_10.png

> Usability Testing

My role during this phase was to conduct the usability testing as a facilitator. And 3 major issues were found in the test:

> Users didn’t visit profile pages.

May be due to the artifact (The avatar box is not obvious on paper prototypes)

> Users were confused about some headers such as“trending now”

Need to think more about wordings

> Users were looking for interactivity with posts including like, comment and share

> Lo-Fi Prototype

From sketches to wireframes we made several improvements, including rephrasing the title "Trending now" to "Popular Among Friends" in order to avoid ambiguity; allowing users to interact with their friends by comments, forward, and like; allowing users to set up their profile description and manage friends. I was the main responsible person for the low-fidelity prototypes. My role is to revise the prototype based on feedback from usability testing and comments from team members.

> Heuristic Evaluation

Our peers (from other project groups) helped us spot numerous heuristic violations with our lo-fi prototype, the most serious ones are: 

> Lack of user control and freedom: no cancel button to exit editing.

> The flow of creating posts is inefficient and the add button is confusing.

> The order of "like", "forward", and "comment" does not follow the conventional order.

We corrected these violations in Hi-Fi prototype.​

Visual Design

Home page_edited.jpg
Home page - rated-1_edited.jpg
Home page - Reply.png
mask small.png
Your Page - Edit 1_edited.jpg
Your Page - Edit 2_edited.jpg
John's Page.png
Search Result.png
safari - on_edited.png
Movie search.png
Home page - search_edited.jpg

> Concept Video

The concept video is presented at the beginning. My role in this phase was to edit the video and add effects.

This is all about the Popcorn project, now you can

bottom of page