Epilogue

Concept

A speech at the end of a film that comments on what has happened. This inspired me to start working on my own movie review app.

Epilogue was born from a love of discovering, sharing and reviewing movies I watch with my friends.

Define

Know the problem and uncover as many constraints as possible.*

This idea isn't very new.

But just because an idea isn't revolutionary, doesn't mean it should not be explored.

I love movies. I mean I really love movies. But what I really really love is watching movies and discussing them with friends. Finding out what they thought about a film, are there any other similar films that I should check out? Were there any references or homages that I may have missed etc.

The film itself is a wonderful artefact, but it is only in the preceding conversation with friends where it can really take on a life of it's own.

Current solutions

I feel that the current solutions for discussing movies aren't suited for the needs of a cinephile.

In my personal opinion these products oversimplify movie reviewing, often condensing it down to an overall 5 star rating. This is obviously done to make it as quick and easy for the user as possible, but I feel that there is so much more to a film beyond a broad 5 star rating.

This led me to start thinking about how to break a movie down into the individual parts that might influence the users appreciation it, whilst also considering usability and the time taken to input ratings by the user. Things like narrative, director, actors, script, cinematography etc all combine to give you an overall impression of a film (knowingly or unknowingly).

I wrote out a list of the variables I feel go into someone's appreciation of a movie. I'm sure there are more but these were the ones I scribbled down before starting.

How am I going to power it?

I'll be pulling the movie data from the lovely folks at TMDb, so really digging into what their API offers uncovered some great insights that informed the design.

For example I know I want to allow the user to review individual actors and TMDb offers a great data set for each film called Top Billed Cast which nicely pulls out the top 6 cast members giving me a nice constraint to use in the rating flow.

An example of a Top Billed Cast on TMDb.

Explore

Generate as many solutions as possible while exploring the problem space.*

There was a balancing act between too little and too much.

The app basically lives and dies by whether users input reviews. If it's too long-winded they'll drop off. If it's too general the product won't solve the problem of over general movie reviews. I mentioned some of the variables earlier but had to draw the line as nobody wants to sit and do 20 ratings for each movie.

Introducing constraints into your design process magnifies creativity and propels you to deliver a more considered and more personal product.

Moodboards

Next up I started researching common design patterns for card based feeds and rating/reviewing as these make up the bulk of the app.

Here are a few of my moodboards:

A few of my moodboards for researching design patterns.

Digging into beautifully designed feeds gave real inspiration on how to express information. Apps like Dojo use custom text on each tile to really enhance the bespoke nature of the app which I'm sure is very time consuming for their design team. Whereas Hyper use gifs within each tile to make the app feel alive and interactive, but again is also bespoke for each tile which would not work for Epilogue as the user could add any movie from the 500,000 or so movies in existence.

Researching design patterns for reviewing/rating also proved incredibly informative as there are a multitude of ways you could approach this with modals, gestures, buttons etc.

Sketching

I began sketching out as many potential solutions to each part of the app including the feed, rating, profile, notifications and adding a review.

One of the pages from my notebook with sketches of the feed.

Refine

Validate which solutions work before distilling down the simplest design.*

I designed the early phases of Epilogue as fast as I could so as to churn through ideas and highlight the best solutions.

I experimented with different variations of each element including a newsfeed tile, a graphical way of showcasing data and the method to get reviews from users.

Some experiments with different UI elements including showing part of the review on the tile, a radar graph of different genres to showcase which genres you watch most, and a modal for reviewing a movie.

Build

Translate this design into reality.*

I've been looking for an excuse to explore animations/transitions in Principle and this felt like a great opportunity.

Deciding on the right fidelity to express your designs is paramount. Often I use Marvel on a large project as it's really fast to upload files and stitch them together to approximate an experience. Epilogue being a personal project meant I had a little more time to focus on the details so decided to use Principle.

It's amazing how much more native the experience is when using Principle. Being able to really consider how page loads might look, and how the user transitions from the navbar to searching for a movie to review really brought the design to life.

Exploring the empty state before the content loads was fun to experiment with in Principle.

The blue highlight subtly pulling the user's eye to the search field at the top of the screen is a great way to make it clear what the next step is.

Learn

Understand whether the design was successful and what needs further work.*

I'm currently sharing the Marvel prototype with other film geeks to gather insight on whether I'm asking for too much input on each review.

If you'd like to share your thoughts please reach out to me on Twitter.



*My design process is based around the design process at Buzzfeed.