Screen Shot 2020-06-26 at 5.24.48 PM.png

REELTIME

UX/UI 

MY ROLE

UI/UX Design

Prototyping

TOOLS

Adobe XD

TEAM

Chelsea Shum, Lulu Li, Christina Poon (me)

TIMELINE

48 Hours, June 2020

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 web site 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.

website mockup.png

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.

Schedule 1.png

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.

Ideation Board 2.png

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?

 ideation Board 3.png

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.

Ideation Board 16.png

General user flow

We mapped out a general user flow helped us understand and visualize what might happen once a user enters a screening.

Ideation Board 17.png

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. 

Screen%20Shot%202021-02-07%20at%203.23_e

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.

Ideation Board 19.png
people.png

Flow assigned: Lulu

User flows

Low Fidelity 1.png

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. 

Style Guide 2.png
1.png

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 your objective and prioritize your key features. 

For the future

  • Give users the ability to watch a private screening

  • Conduct further research and user testing on the target audience