My Role
UI/UX Design
Prototyping
Tools
Adobe XD
Teams
Chelsea Shum, Lulu Li, Christina Poon (me)
Timeline
48 Hours, June
Prompt
Netflix invests in creating and giving a platform to stories that connect people and cultures from around the world. How might we help families and friends utilize this platform and share their experience with content such as series, television shows, and movies they love?
Challenge
Design a third-party desktop website or desktop app where the community can celebrate shared stories together through communal and authentic experiences.
Solution
Introducing ReelTime
Reeltime is designed for independent film fans. Due to the low-budget and their inaccessible real-life screenings, our audience remains disconnected either by distant locations or lack of resources such as time and money to access these screenings and talk to like-minds.
Our project re-imagines a live film screening experience that is enhanced through shared group activities and discussions in an intimate environment before, during and after the movie.
The Schedule
After independently looking over the design brief, our team immediately determined our schedule for the 48-hour deadline. We video called each other on FB Messenger and opened a Google Jamboard to virtually discuss initial thoughts and scheduling ideas.
Initial Ideations
We began by breaking the problem: how can we create a unique experience for movie lovers? and writing down key takeaways from the prompts provided to us in the design brief to get a better understanding of what we needed to accomplish.
Questions
We asked ourselves questions such as:
-
Who is our target audience?
-
How do people engage with movies and what aspects of the film make the audience excited?
-
How can these aspects be organized in an application?
We started a mindmap to help us find our target audience and goals.
Final Ideation
After we brainstormed and let our thoughts out, a solid vision started to form. We focused on three main features:
-
Time-based screenings.
-
Facilitated discussion.
-
Intimate group sizing.
General user flow
We mapped out a general user flow helped us understand and visualize what might happen once a user enters a screening.
Target Audience
Primary demographic: Indie film lovers who can't watch an abundance of indie films due to limited real-life screenings.
After conducting some research we realized that:
-
There is no centralized community for remote independent film-lovers
-
For film-watchers who lack resources and time, they cannot have the experience of film appreciation.
Competitive Analysis
As we finalized our core features, we began to conduct market research to further explore areas of opportunities to address. One of our primary goals for the webpage is to facilitate meaningful discussions, therefore we searched for movie discussion forums/groups that are already in the market.
Moviechat
-
Too many chat/thread categories like summer movies, anime, action, etc.
-
Too many chats with no replies. The environment does not remain engaging and that discourages discussion.
-
Lacking in terms of visual design.
System Map
We began by consolidating all of our ideas and research insight into a system map. This helped us map out the overall layout and features of the app. We wanted our interface to be direct and intuitive. Every user can enter the screening and participate without onboarding. The user may either watch the currently scheduled film or view upcoming showtimes.
Movie Schedule
Flow assigned: Lulu
User flows
After we created our system map and user flows, we began creating low and mid fidelity
Home/landing page
Wireframes
Style Guide
The dark theme is chosen to resemble the darkness in a movie theatre. Our monochrome colours are used to allow the colourful film posters and trailers to remain as the main focus. A yellow accent colour was used to help establish a visual hierarchy and to add a pop of colour.
Homepage
Find the movie you want to watch
The interface is direct and intuitive. No onboarding or collecting of information. Just enter a theatre with a username and that's it!
The user may either watch the currently scheduled film or view upcoming showtimes.
Preshow
Let's chat before the movie
Screenings have a max of 30 viewers for intimate discussions.
Movie Discussions
Share your thoughts during the movie
Engage with the movie with our movie prompts. Share your liked and disliked moments.
Temporary chat/activities during the movie instead of permanent chat throughout the movie to encourages in-the-moment engagement.
Post movie thoughts
Let others know what you think
Start a discussion with our post-movie prompts by answering, replying and liking the thread.
Review the in-movie discussions to see what others thought.
Conclusion
It was a delight to work with such talented designers to effectively execute our product. My team and I had never turned in a project in such a short period of time. Nevertheless, We are so thankful for this learning experience and to have received such insightful constructive criticism from senior designers at Netflix and Adobe. We learned to always stick to our objective and prioritize our key features.
For the future
-
Give users the ability to watch a private screening
-
Conduct further research and user testing on the target audience
Other Works
Super |
Mobile & Web Design
Ligo |
UX/UI