Cineflix
THE PRODUCT:
A responsive ticket ordering flow designed for a high end movie theatre. The target customers are interested in watching movies and short films or who simply want an outing in search for entertainment.
PROJECT DURATION: 15 day sprint in September 2021
MY ROLE: UX Researcher, UX/UI designer, designing the app from conception to testing.
SOFTWARES USED: Adobe XD, Figma, Miro, Photoshop
Project Overview
Competitive analysis
Apart from these, I also analyzed the Carnival cinema's app which has almost the same issues as the above and pretty much basic in UI and interaction.
User research: Summary
I conducted interviews and based on that created empathy maps, which helped me understand the users, their needs and pain points.
Primary user group were very much interested in new releases and upcoming movies and wanted to be up to date about them.
This user group has issues like getting in a long que waiting for booking, missing the movie because of delay.
Secondary user group wanted to spend quality time and looking for entertainment opportunities in there free time along with their loved ones.
This group of users had issues with not finding movie tickets online according to there time schedule and didn’t have enough time to book offline.
Red cards - Against booking online
Blue cards - Favor booking online
Yellow cards - Not relevant
Personas
Based on the empathy maps and interviews I came up with two types of personas.
Noah - who was very much interested in new releases and upcoming movies and wanted to be up to date about them.
Mia - who wanted to spend quality time and looking for entertainment opportunities in there free time along with their loved ones.
PROBLEM STATEMENT
Noah is an animation student and freelancer who wants to be able to place orders online without getting in line because he doesn’t like wasting his time and missing movie scenes.
PROBLEM STATEMENT
Mia is a Lawyer who wants to book tickets without spending much time thinking about it because she wants to spend her leisure time with her loved ones and enjoy.
User flow and Site map
Based on the Competitive analysis, I created a very basic user flow for the ticket ordering process of the app. I wanted the user to feel in control of the app by availing them the option to search according to there needs.
Example, if the users are bored and just want to open some movie app looking for any good movies currently playing. They can simply select there location and time and look for the available movies in that slot. If the trailer and overview looks good, they might just order and go for the movie. Or they can have another option for some short films in the app itself.
Many such other options can be made available in the app for the perfect entertainment of the users.
User flow indicating a Boolean approach towards movie selection giving the user opportunity to explore.
A primary site map for the site. This will evolve for further entertainment options that can be provided to users in future as explained above.
Design
After the information architecture and user flow has been figured out for the app, I moved to the design phase of the project.
Here I started by creating a mood board before any sketching or further process. This helped me to get some ideas about the color combinations, which color would help users focus on the actual information. I also looked at some other case studies and apps which were indirectly related like Netflix, for a better understanding on what they did to provide focus on desired elements.
I chose this range of colors because it felt like a very natural gradient, And it also helped me provide the impact and right amount of emphasis on the important elements and features.
Sketching
Sketching plays a major role in ideating and conceptualization phase of any project for me.
I usually make some iterations of the first page which helps e get in the flow and then slowly work on to the other pages. I like my sketches to be clean and try to make them on scale so that I can have an approximately clear view of the app and make quick iterations if I don't like it.
Low-fidelity prototyping
Since this project is for a responsive website and app, I started with the mobile first approach. Where the app is first made for a mobile and then for other screen sizes.
I chose this approach because most of the users are going to be using this app on the go or on there mobile, which concluded in this approach being the best to go for
Usability testing
Research questions
-
What are the features that the users can use to improve UX?
-
Where do users get stuck?
-
Does user think the app is easy or difficult to use? Why?
-
What might be the reason people hesitate to use the app?
-
How long does it take the user to book a ticket?
Participants
-
5 participants
-
Two male, two female users and one nonbinary individual between ages 17 and 45.
-
Participants are mostly movie goers with jobs or are students who go mostly on the weekends.
-
Participants also watch short films or want an outing in search for entertainment.
Methodology
Unmoderated usability study.
Location: INDIA, remote.
Length: Each session - 5 to 10 minutes, based on a list of prompts.
Users were asked to book tickets on a low-fidelity prototype.
Usability study: findings
Round 1 findings
-
Elements in desktop version were too large.
-
CTA buttons were very small.
-
All seats were not visible in a single fold which created confusion for users.
Round 2 findings
-
CTA buttons were still not as prominent.
-
Color combination was not serving the purpose of the app.
CTA buttons were made bigger and prominent by using complementary color scheme.
Movie list size was reduced
All seats were made visible in a single fold for better user's understanding.
CTA buttons are not prominently visible
Buttons and UI improved by adding complementary color scheme
Seat selection for a desktop site was a hassle as all seats are not visible on a single fold
Page had been improved by decreasing the size and bringing everything a single fold.
This also helped increase users focus on the flow because of less eye movement across the screen.
High-fidelity prototyping
The final high-fidelity prototype presented cleaner user flows for movie selection and interactions.
-
Early designs used bigger images for movie posters and films, but after the usability studies I found that it was too big and the users had to make a lot of eye movement when it comes to desktop site which could be uncomfortable and distracting. So the the poster sizes were reduced in both the mobile and desktop sites.
-
The CTA button sizes, placements and designs were improved.
Designing for Accessibility
While designing products one must always design for all. Designing for accessibility focuses on designing in a way that everyone — including users with impairments are able to use your products.
-
I checked the color contrast between foreground text and the background and made sure they comply with WCAG standards.
-
Used detailed graphics for elements to help all users better understand them, along with description of their usage and other relevant information.
-
Used font sizes based on the heading and paragraph tags which helps in developing app which is screen reader friendly.
Learnings
This project was my second UX project and it has been a great experience for me it again validated the fact that it doesn't mater how long we have been using a type of app, there are always some scope for improvement and perspectives that we can't see.
This app helped me understand how much colors and there combinations can effect the apps UI and interaction experience of the user.
Next Steps
For the future iterations I would like to add some features like
-
A log in page so users can keep track of activities and booking experience becomes easier.
-
Feature that allows users to give reviews in app and also share the movies they want to see with their contacts.
-
Include the ratings from sources like rotten tomatoes and IMDB within app.