Group Project (Sep. 2021 - Dec. 2021)

Popcorn Helps You
Explore New Media and
Connect with Others


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 frustration for 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.



  • Interview 

  • Empathy Map & POVs

  • How Might We...

Prototype Building

  • Ideation

  • Paper Prototype

  • Usability Testing

  • Lo-Fi Prototype

  • Heuristic Evaluation

Final 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.

N.1 Interview

5 potential users from various demographics were interviewed to find the insights of media consumption 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

N.2 Empathy Map & Point of views (POVs)

The interview results were collated and make analyzed by Empathy Map and Point Of Views (POVs) methods. This phase was completed by the whole group together.

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.

N.3 How Might We... (HMW)

We phrased 30 HMW sentences and picked the Top 3, which were the most representative and promising ones. Based on these HMWs, we brainstormed possible solutions. This phase was also completed by the whole group together.

media consumption - Frame 2.jpg


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 and eventually reached high-fidelity level. 

P.1 Ideation

My responsibility was to sketch out the ideas that generated by all the group members.

Rough sketches_00.png

1. Standalone application

Rough sketches_02.png
Rough sketches_03.png
Rough sketches_01.png

2. Kiosks in theaters

3. Website

4. Post real-time comments during watching

P.2 Paper Prototype

In this stage, I was responsible for drawing all the paper prototypes.

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

P.3 Usability Testing

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

  • Users didn’t visit profile pages.

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

  • Interactivity with posts including like, comment, and share buttons were missing.

P.4 Lo-Fi Prototype

I was the main person responsible for the low-fidelity prototypes. My role is to revise the prototype based on feedback from usability testing and comments from team members.

Key Modifications:

Home page.png

Rephrase the title

Add interactivity 

Jack's Page.png

Add profile description 

Add new features

Full Version:

P.5 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, retweet, comment  does not follow the conventional rules.

We corrected these violations in the next phase.​


With the findings from our low fidelity testing and heuristic evaluation, we developed our high fidelity prototype. 

F.1 Hi-Fi Prototype

​During this phase, I collaborated with one of my group members on the high-fidelity prototype.

Home page.png
Home page - Reply.png
Home page - rated-1.png
Your Page - Edit 1.png
Your Page - Edit Banner.png
mask small.png
John's Page.png
Home page - search.png
Search Result.png
Movie search.png
Your Page - Edit 2.png
Search Result - tv shows.png

Extension: Plug-in

safari - on.png
live comment.png

F.2 Concept Video

The concept video is the one shown at the beginning of this page. My role in this phase was to edit the video and add effects.

Back to Top