We’re excited to announce the beta version of the Goodfilms mobile site! We’d like to talk a bit about the goals for building this, and some of the design inspiration behind it. We’ll also talk a little about how its put together using the absolutely excellent AngularJS.
The site’s optimised to give existing users of our site access to their Queue whenever they need it and the ability to rate a film when they’ve just seen it. And, of course, to help them keep up with what movies their friends have been watching, or want to go see.
We asked our users what they most wanted out of a mobile version of Goodfilms, and we came up with the following three use cases:
I want to search for and rate a film I’ve just seen (while walking out of a cinema)
I want to see what’s in my queue (while at the video shop or at a friend’s house)
I want to see what my friends have been watching or queueing up, to give me ideas.
From this, we decided we’d need 4 main elements:
- A list of films, whether search results or those films in your queue.
- A detail view of a film.
- Navigation menu with search field
- The ‘feed’, much like the current Goodfilms home page.
Of these, the Feed presented the most variety of options, and the most challenges.
As the main page in the desktop site, the Feed lets you follow which movies your friends are watching or plan to watch, and we wanted to maintain that as our users log in from their phone. This is what the feed looks like now:
We love that the posters are the dominant visual element, and we wanted to carry that over to the mobile site. Layouts like Facebook work well for irregular information and conversations, but not necessarily posters.
Instagram, on the other hand, because each activity is based around a square image, devotes an entire screen to each update, placing the image right in the middle.
We adopted a one-activity-on-screen approach, but because movie posters are taller than they are wide, we went with a sideways swipe to see the next film:
The site is built with AngularJS, which saved us an incredible amount of time. It allows us to express our interactive components very naturally. We’ll be blogging in more detail about the build, but we thought we’d show a quick example of how that works.
The corresponding HTML:
The clear mapping between interactive elements and the subsection of the HTML that it applies to makes it far easier to decompose an interactive application into managable parts.
Goodfilms is a way to share the movies you watch with your friends. We rate movies on two criteria - ‘quality’ and ‘rewatchability’, so you can admit to your guilty pleasures and properly capture the feeling you get when a film leaves you exhausted. Sign up now and keep track of the films you love, and find great, challenging or silly new ones to watch.