The Scene Club
Cinema mobile app. Freelance project, 2017.
- Business context: annual cinema festival in Dubai.
- Client: Tigerspike.
- My role: manage and execute the whole project.
- Goal: create an Android native mobile app that streamlines the exploration, selection, purchase, and check-in process (B2C).
- Target audience: independent movie lovers of any age.
- Competitive review: cinema mobile apps in the global market (Sundance, Toronto, Berlin, Cannes, etc.)
- Approach: engage new users, improve customer experience and increase mobile checkout conversions.
The Scene Club is currently a relatively small festival with ambitious plans for it to increase in scale over the next few years. Also a non-profit film club that showcases the best of world independent cinema twice a month in Dubai. Further info here.
A competitor analysis was conducted through a brief selection of cinema mobile apps in the global market, both Android and iOS. Each one provides its own data sheet (brief description, rating scale, and website).
Qualitative data would have provided richer info on what customers are saying, suggesting UserTesting for unmoderated sessions and face-to-face interviews for moderated ones. Quantitative data through Google Analytics as well as Crazy Egg or similar would have provided richer info on what customers are doing.
User scenario: Anywhere, anytime: while taking a stroll around the streets of Dubai, while going to work by the Dubai Metro or when travelling with Emirates Airline connected via in-flight wifi, for instance.
User personas: Fatima and Amélie. Both are coworkers in the same digital magazine company, and decided to check out a movie at the festival. With no time to print out tickets, they used their accounts on the mobile app to download them.
This stage implements several guidelines regarding not only to the visual style, but also the digital experience: 1. Information architecture; 2. Design guidelines: metrics and keylines of Google Design Guidelines.
Team brainstorming within a squad, multidisciplinary small team would have helped reward more ideas and maximize productivity.
In addition, these design guidelines include corporate colours to keep brand consistency as well as the sans-serif typeface family developed by Google as the system font for its mobile operating system Android (Roboto).
The solution. I start with ideas that come to life faster through paper wireframes. I also take notes to untangle my thoughts and let them all flow onto paper.
After making low-fidelity wireframes in Sketch, several mockups were used to provide visual details such as colours, imagery and typography. The user flow displayed below goes through Ticketing, once this section is selected on the sidebar menu.
The landing page provides an annual membership subscription when registering. Not a member? A gift voucher can be exchanged for 2 tickets.
Explore allows to browse through playlists, genres, directors, and featured films. A version of iOS according to the iOS Human Interface Guidelines is also displayed.
Ticketing allows to get into the movie without printing tickets. There are two layout versions: 1. Cards: default view; 2. Grid: used when there is a high number of movies.
The second step launchs a quick 1-2 minute preview of a movie that includes info and synopsis. The share icon opens a lighbox popup with the following features: share, message, mail, Facebook and Twitter.
A seating map allows to click and drag, zoom in or out, along with three different prices: member card, voucher code, default price.
The checkout confirmation should include the 3-D Secure system or similar to establish the identity of the card owner before making a payment.
Finally, users can share or download the online ticket, receiving a copy by email automatically. The user journey follows the story behind Fatima and Amélie, who are already members of the club once provided their bank account details to register.
As a result, they can preview their online tickets on the screen and download a copy in PDF which includes bar code or QR scanning. Below, animated example of this journey: it’s Showtime!
In conclusion, a simple prototype in Marvel / InVision or a high-fidelity one in Axure to test the app on a mobile device could potentially enrich the design stage. On the other hand, sharing wireframes in Sketch with developers via Zeplin would improve team collaboration.
Want more? Find the whole UX design process below:
I didn’t have the budget and time to completely address this challenge, but in the future, I could revisit the project and focus on collaborative aspects of task management.