Social network for movie lovers or how not to get stuck in a rut developing one more social network.

Redesign or slightly more?

Oleg
Aug 18, 2017 · 6 min read

Last autumn I was approached by a prospective client with a request to develop an iOS app for movie lovers with quite a broad array of functionality. There was a beta version of the app by that time, but the UI was, to put it mildly, quite primitive. The task was described as: redesign and “slight fine-tuning” of functionality. Right away I started to suspect that this will entail way more than a simple redesign, but I had no idea how massive this project will turn out to be. And I loved the challenge.

I started by searching for feasible UI solutions. Obviously, the first step was a research broad of existing apps in the market in the similar fields. We evaluated dozens of movie recommendation services, from well-known IMDB and Rotten Tomatoes to newly established apps.

Research broad of existing apps in the market in the similar fields

Social Network or Recommendation Service?

The research resulted in two types of UI, which were significantly different not only visually, but also in their concept.

The first UI solution comprised a dark interface, usually associated with cinema and movies. Bright elements, reminiscent of “EXIT” signs in theatre clearly suggested the app’s purpose.

The second option absolute was a complete opposite in terms of its style: white background color combined with grayish elements that were used to separate functioning blocks. This sort of combination closely resembled a social network with quality content.

Research and variations

The choice between the two posed another, bigger question: what is the main purpose of the app — recommendation service or social network for cinema fans? Decision was made for the latter. It was that moment I realized the complexity of the project I was getting involved into. But for whatever reason I was not scared; contrary, I was excited — I’ve never dealt with such a task before.

Flow

Considering the new vision, it would be naive to use the existing flow: some functions required new solutions, while others were absent from the prototype in the first place. Based on my experience, I knew that fixing existing project is much harder than starting from scratch. Indeed, it turned out to be the case: eventually we utilized at most 15% of the existing code and interface.

Wareframes

We proceeded to further develop the second version of UI with a focus on social network. Aiming for a clear emphasis on the content, we decided to abandon most colors. The only distinct color was to remain was bright blue (kind of the blue system color you see in Windows) and several shades of gray for text. A universal Open Sans was selected as the main font; while, for the headers, I used one of my favorite fonts — Montserrat.

I started with developing an interface for one of the main screens — Movie Page. There are a lot of elements.

List of Movie Page elements:

Name, Duration, Release Date, Genres, Synopsis, Director, Cast

Besides, movie page also contains ratings of credible movie sources:

IMDB, Rotten Tomatoes, Raters Friends — average rating given to this film by user’s friends, who are followed by him/her. This rating is one of USP (Unique Selling Point) of the app.

Finally, the movie page has two command buttons — Rate and To Watch. The former is used to rate the movie and to write a review, the latter adds the movie to user’s ToWatch list. These actions are mutually exclusive, meaning that only one of them can be active at any point of time.

It was quite challenging to position all the necessary information on one screen without overloading it. Result can be seen below:

I then proceeded to other screens — Timeline, Raters Friends, Comments Page, Login/Registration screens, different sub-screens of Profile Page as well as dozens of other screens.

As to the Profile page, its design turned out to be one non-trivial parts. Apart from basic user info, this screen contains Rated and ToWatch movie lists, as well as Following and Followers lists. Navigation between those 4 different views was implemented by the use of tabs.

Unsurprisingly, structural flow ended up to be quite complex. Each screen contained various elements unique to its own, but their commonality among the screens was represented by indents, headers, menu, as well as distance among the elements, to be in line with movie posters format.

Iconography

Navigation bar at the bottom of the app contains simple, clear icons that are used to navigate between main screens of the app:

1. imeline

2. Search

3. Notifications

4. Profile

More complex illustrations were created primarily for the Landing Page, despite also being used in the Onboarding process.

App Icon

Initial symbol of the app used to be a star — a universal representation of ratings that is used in virtually all rating systems. However, with the goal to communicate the cinema aspect of the app, it was decided to use an element associated with cinema. I tried filmstrip, clip art, and movie counter. However, the final outcome became a star symbolizing a movie projector.

Why do we need another movie rating platform, apart from IMDB, Rotten Tomatoes and others?

That was the question I was asking myself at the start of the project. Apparently, that’s what most people do when they hear about Raters for the first time. However, the answer becomes obvious shortly after one starts using the app: IMDB, RT and other platforms present you ratings of critics and other people whom you don’t know personally. The philosophy of Raters is the following — opinions of friends and other people whose taste is similar to yours are more relevant to you than average rating of tens of thousands of users you don’t know. Apart from rating movies and writing reviews, Raters lets you follow people whose movie taste you trust and trace their movie-watching activity. The goal is to invite friends and/or discover people with movie taste similar to yours, so you can get more relevant Raters Friends ratings.

Why should an app bother with a website?

After a detailed elaboration of all elements of the interface and all layouts, the time has come for Landing Page. I believe that any respectful app should have a proper landing page, and Raters is not an exception. While app was under development, landing page was needed primarily to collect emails for the announcement of the app’s release at launch. After the release, the goal of the landing page becomes navigating visitors to App Store (and potentially Google Play), while at the same time demonstrating and explaining the main features of the app.

This is how a recommendations service transformed into a social network. Naturally, this project will never be fully complete, since, as any other social network, it will be constantly developing to catch up with the most recent trends.

Currently there are several planned updates for the next versions of the app. But in order for that to happen, Raters needs more users; the way to get them is a completely different story.

37

37 claps
Oleg

Written by

Co-owner and CEO in ION Digital