About the project
This is a design proposal I did for the Moviepass IOS app redesign.
Stakeholders were asking for a UI that could have a more ‘theatre’ ambiance.
Also, they were asking for something that could highlight the brand a bit more and a UI that could be easy correlated with the brand.
On the other hand, they wanted to be possible to extend some of the created visuals to the website.
Moviepass
MoviePass, Inc. is an American subscription-based movie ticketing service majority-owned by Helios and Matheson Analytics. Founded in 2011 and headquartered in New York City, the service allows subscribers to purchase up to three movie tickets per month for a monthly fee. (wikipedia)
Timeframe
This project was finished almost one year and a half from the date this post was published.
I was working remotely from Portugal for almost 6 months.
Tools
Sketch, Zeplin (for the development handoff), Flinto, pen, and paper.
I used Evernote to share some initial ideas and register our weekly call discussions.
My roles
User Research, User Experience Design, Visual Design, and Interaction Design.
Research
My first mission was to put the things together and trying to correlate what the app already had and what was the core of the business.
Then I was able to start doing some research.
What were the Users saying about the app?
What were the Users’ main pain points using the product/service?
What was the impact of the app usage on all products/services?
To understand that I did some research on the news about moviepass: on forums where clients were sharing their experience through the app and/or moviepass service in general; on Twitter (following the moviepass support team account, to get to know what were the main complaints regarding the product/ service/app).
Problems found
1 — The old app of Moviepass didn’t have too much complexity, although some features were not that easy to find or to interact with.
2 — The concept of e-ticketing was kind of ambiguous and it wasn’t explicit what the Users needed to do if they didn’t have a card yet.
3 — The entire menu was available in the same place (accessing by using the hamburger menu) which wasn’t necessarily bad but that solution didn’t allow the user to understand easily the correlation between each action.
4 — The movie/cinema search was not that easy to navigate and the choice between the two types of the search wasn't always be presented to the user.
5 — The user needed to be logged in to enter the app and access all the content.
6 — The UI didn’t have any specific rules which make understandable why the same elements sometimes have different behaviors or appearance during the app navigation.
Solution
During the first sketches, one of the first things that come into my mind was that maybe the Users should get familiar with moviepass before they want to register and subscribe to the service.
What were the advantages of the services?
How can the user get to know the service before they make the decision?
How the app can help the users to get engaged with the brand?
So first, I’ve tried to build a flow where the user can navigate through the app without the need to be logged in. In this flow, the User could explore nearby cinemas and movies available. The registration or login process only started when the User started a purchase or if the User wanted to do it deliberately.
Login / Sign-up
The first time the Users enter the app they have a group of onboarding screens where they can see a brief of what they can do in the app although they can skip it at any time and start to explore the app or even log in or sign up immediately (at the first time using the app Users could already have the moviepass card).
So that means that the Users could do almost anything in the app until they need to purchase something or ask for a membership.
Find a theater
or a movie you want to see
Also, the user can see the movie details before buying a ticket (using force touch).
Choosing the seat(s) and menus
Sign-up / Membership
On the previous version of the moviepass app, the users should associate their zip code. To simplify a bit after the first step the app automatically suggests the zipcode based on geolocation.
Simplifying the choice process
Most of the times aren’t easy to explain to the user the benefits of different kind of subscriptions. To simplify these I purposed a series of different subscriptions’ package naming so the users could understand better what adjusts to them.
Payment phase
Introducing the credit card scanning that was not available on the previous version of the app was one of the major improvements.
Also, it was really needed to explain to the user how moviepass works (after paying the subscription). To use moviepass the user needs to receive the subscription physical card at home to start using moviepass at the cinemas.
Collecting movie tickets
It’s something in common regarding those who love to go to the cinema so one of the goals of this redesign was to make it more pleasurable and enjoyable to go to the section of reservations.
Within the new version, the user would be able to rate and write a review regarding the movies they have seen in the theaters.
Empty states
The old moviepass app got blocked or broken easily so to better give feedback to the user I’ve designed some empty states for the critical moments of using the app. By seeing this the user should get some hints about what to do next or what to do in order to prevent those situations.
Rebranding moviepass app
For this redesign, I’ve purposed a new color palette.
The choice to change a bit the original color palette of moviepass brand was based mostly on the lack of accessibility of the previous palette.
The lack of contrast between the colors was one of the aspects but also the idea of having a dark theme was one of the points to make the decision of purposing the new color palette.
Also, I’ve used the moviepass logo font — TEX GYRE ADVENTURE for all the font styles.
Final user flow
Conclusions
This project was really challenging regarding not only the fact that I was working within a remote team but also because I was responsible for redesigning a product with one million users (at that time frame).
It was also my first time working remotely in the US and also for a fast-paced startup that was growing exponentially at that time.
Some things didn’t work as expected and the product isn’t reflecting all the work that was done at that time (one year and a half ago).
