In this multi-part series, I’m sharing the process of developing an app for iOS. OurMovies is a “social” movie sharing app I’m creating as a way to learn more about the design and development considerations of making modern mobile apps.

From a design perspective, I’ll be getting to know iOS’s native UI elements and I’ll be using Xcode’s more recent design features like auto layout and stack views. From a development perspective, I’m making the app in Apple’s new programming language, Swift, and will be exploring how to make an app which is responsive, stores data in the cloud, uses a third-party API, and looks and feels like a modern social media application.

User Profiling

The desired functionality of the “OurMovies” app starts out very simply: It will provide a way for people to share their favourite films with each other. It’s designed to be shared by two people, to keep a note of the films they either:

  • have already watched, or
  • would like to watch.

When paired up in the app, each person will be able to see a live feed of their, and their partner’s, seen and wishlisted movies. Imagine you’re on the bus, browsing upcoming movies… you add one to your wishlist, and your partner who’s sitting at home will immediately see that movie pop up in their app. Indecision over what movie to watch together that evening will be a thing of the past!

Maybe 🙂

Functionality & Technologies

OurMovies will look and feel like a modern social media app. The main screen will be a live feed of information, which updates on both devices whenever one user adds or removes a movie from their list. We’ll be using Firebase for user authentication, and to store information like the movies which have been seen or wishlisted. Each user will have a login, and will then be able to add another user as a friend. Both will then share their viewed and wishlisted movies.

Meanwhile, TheMovieDB’s (TMDB) API will supply movie information, posters and backdrops, and we’ll be interfacing with the TMDB API using Alamofire (although a new package on Github, TMDBSwift, is also a possibility I’ll be considering).

From a user experience point of view, we’ll need to keep the app responsive, so we’ll need to limit the amount of network usage where possible. For example, we’ll keep movie poster images in local storage (on device) rather than requesting them over the network every time the user scrolls through their feed.

Initial Wireframes

Sketching out the core UI, I decided there should be four main views:

  1. Login/Signup screen
  2. User’s list of movies (main screen)
  3. Search screen (finding movies to add)
  4. Movie details screen (add to list as ‘seen’ or ‘wishlisted’)

Initial sketches showing the views we’ll need to build… (tap to zoom and see captions):

Design Direction

OurMovies will, eventually, be a modern looking app with a dark user interface, because it will mainly be used in the evening/at night. Other apps in this space also sport a dark UI. Existing movie/video/tv apps on iOS include Netflix, Vimeo, YouTube, IMDb, iPlayer, Sofa, and Letterboxd. Here’s what their login/feed views look like:

Personally, I really like the look & feel of Letterboxd, especially the “Films” and “Reviews” screens… so OurMovies’ main feed will be shooting for a similar design aesthetic.

Building the Foundations

Getting started, I’ve built out our initial screens using four separate view controllers in Xcode. After several iterations and a lot of tinkering, this is what we’ve got:

The layout of our four initial views in Xcode (login/signup, movie list, search, and movie details) with the latter 3 views embedded in a navigation controller.

In order, these are:

1) Login/Signup

A standard view with a segmented control up top, allowing the user to choose whether they’re creating a new account or signing in to an existing account. Depending on the mode selected, fields are revealed or hidden programatically: e.g. the “Name” field (for the user’s display name in the app) only need appear when creating a new account, and should be hidden if a user is signing in to an existing account.

2) Movie List

A UITableView with custom designed cells. Each cell will contain a movie poster thumbnail image, the title of the movie (and year of release), plus a short description. In addition, cells will be decorated with icons to denote whether a movie has been seen or wishlisted (or both, in the case that you might want to re-watch a movie you’ve already seen). We’ll explore adding more information for each movie later on (e.g. popularity/rating, or perhaps the date the user last watched the movie?)

3) Search

Adding movies will require the user to search for a movie in TheMovieDB. Our search screen will contain a text field, search button, and table to hold search results. Each cell in this table will need to hold the name of the movie, perhaps with the year of release (to differentiate easily between similarly-named movies/remakes) and a disclosure indicator which will segue to…

4) Movie Details

…our final screen which will show a larger poster image, longer description of the movie, and buttons to allow the user to mark the movie as ‘seen’ or ‘wishlisted’, adding it to their feed.

The Movie Details screen should also be reachable via the user’s feed – tapping a movie in the main feed will also segue to the movie detail screen (in which case, the ‘seen’ and ‘wishlisted’ buttons should reflect whether the movie is already seen or wishlisted).

With the initial iterations of these screens made up, here’s how things are looking:

From left: Login/Signup screen; Movie List; and Search screen (showing results for ‘star wars’).

In Part 2: Adding UI components for filtering to the Movie List screen.