Mobile App UX/UI Design
About the project
Going to the cinema can sometimes be challenging. Boulevard Cinemas wants to build a digital product that can help users have a better cinema going experience. This project was done in the context of the Google UX Design Certificate and was my first UX/UI Design project.
My role
UX/UI Designer
TIMELINE
Oct ‘21 -> Dec ‘21
TEAM
Solo
Tools
Figma & Figjam
The Goal
The goal of the Boulevard Cinemas Mobile App designed is to facilitate the buying of tickets and snacks by its clients.This Mobile App can ease the buying of tickets by clients (clients do it on their own), reducing waiting time at the cinema counter and solving potential sales and client assistance bottlenecks.
The Design Process
The Design Process
Competitive Analysis
The apps analysed are from well known cinema chains from Portugal, Spain and the UK. The premise that I stand on is that these companies have already done their UX Research and have created mobile apps that address the customers needs. Hence, I wanted to learn from them and build an equivalent or even better mobile app for Boulevard Cinemas.
Cinemas NOS
Yelmo Cines
Odeon
Competitive Analysis
The apps analysed are from well known cinema chains from Portugal, Spain and the UK. The premise that I stand on is that these companies have already done their UX Research and have created mobile apps that address the customers needs. Hence, I wanted to learn from them and build an equivalent or even better mobile app for Boulevard Cinemas.
Cinemas NOS
Yelmo Cines
Odeon
The NOS app’s UX design is very simple and clean. This is the best app I’ve analysed and offers easy navigation and usability while showing important details about the movies and schedule that helps the user in their purchases.
The ODEON app has a severe usability issue: users can only buy one ticket at a time.
 Other than that, the overall usability is of reasonable level while the aesthetics and visual design are top of the class. The visual design served as inspiration.
The NOS app’s UX design is very simple and clean. This is the best app I’ve analysed and offers easy navigation and usability while showing important details about the movies and schedule that helps the user in their purchases.
The ODEON app has a severe usability issue: users can only buy one ticket at a time.
 Other than that, the overall usability is of reasonable level while the aesthetics and visual design are top of the class. The visual design served as inspiration.
Interviews
I conducted interviews to get first-hand opinions from regular cinema-goers, understand their Pain Points and see in which way a mobile app can be valuable to their cinema going experience.
2 men | 2 women
24 - 30 years old
Moviegoer 1-2 times per month
Lisbon, Portugal
Pain Points Identified
Time Lost
Users have to spend time queuing to buy tickets and snacks. This can be time inefficient and create stress, frustration and boredom in the user.
Seats availability
When users buy tickets, their preferred seats may not be available. That can cause frustration and diminish enthusiasm for the experience.
Lack of convenience
Users have to go to the movie theater counter to buy tickets. This process is not the most convenient.
Other Observations
Option to see the theaters around the user
It can be convenient to have an option for quickly selecting the cinema theaters around a user.
Users value information about movies
According to users, it is important to have general info about a movie in the app. It helps with the decision-making process of going to the cinema.
Quick login with Google, Facebook and Apple
Users showed some reluctancy in investing time to create an account. A quick login with Google, Facebook and Apple could be a solution to this concern.
User Persona
Catarina is the persona I built to embody the motivations and goals of the users I interviewed. It was important for me to build the app with taking into account Catarina’s desire for convenience and quickness in the process of buying tickets.
Catarina Silva
30 years old
Business Degree
Consultant
Lisbon, Portugal
Married, 1 child
Female
“I often go to the cinema on weekends for relaxing after a busy week behind. I usually either go with my husband or with friends. I want the experience to be as pleasant and easy as possible so I can really enjoy the little time that I have for myself. Sometimes, when I arrive at the cinema theatre, the movie is about to start and there is a line to buy the tickets. That frustrates and stresses me. If only there was a nicer and simpler way to avoid the queue and get in the room.”
Wants & Needs
“Watching a nice movie is a great way to get away from the work routine.”
“I tend to have a very stressful working and family life. My time is of utmost importance.”
Frustrations
Feels stressed arriving at the cinema just minutes before the movie and not having bought the tickets.
Feels frustrated when she has to queue in order to buy the tickets and snacks.
Defining the Value Proposition
Details on movies
Users demonstrated the desire to see in-app descriptions of the different movies, their cast and access to the trailers.
Access to tickets
Users have to have access to the cinema tickets through the app so they can skip the lines at the cinema and just scan the tickets to get in the theater.
Snacks purchase
Users shown the desire to purchase the snacks directly at the app. That way, they would only have to go to the counter, upon arriving at the theater, to pick the snacks up.
Seamless ticket buying sequence
The buying sequence should include movie session scheduling, number of tickets to buy, seat selection, snack purchase and an easy checkout/payment feature.
Easy loginicket buying sequence
Users have shown the need to have fast ways to login. They do not want to have to create an account in order to buy cinema tickets.
Cinema sessions overview sequen
Users should be able to easily choose which session to book and they should have the most complete overview of the sessions possible.
Defining the Value Proposition
Details on movies
Users demonstrated the desire to see in-app descriptions of the different movies, their cast and access to the trailers.
Access to tickets
Users have to have access to the cinema tickets through the app so they can skip the lines at the cinema and just scan the tickets to get in the theater.
Snacks purchase
Users shown the desire to purchase the snacks directly at the app. That way, they would only have to go to the counter, upon arriving at the theater, to pick the snacks up.
Seamless ticket buying sequence
The buying sequence should include movie session scheduling, number of tickets to buy, seat selection, snack purchase and an easy checkout/payment feature.
Easy loginicket buying sequence
Users have shown the need to have fast ways to login. They do not want to have to create an account in order to buy cinema tickets.
Cinema sessions overview sequen
Users should be able to easily choose which session to book and they should have the most complete overview of the sessions possible.
Sitemap
I included the main features and functionalities of the app in its Sitemap.
I found it important that users may be able to select a movie that is showing in a particular theater and select a theater that is showing a particular movie. These two options are represented through the “Movie by theather” and the “Theaters by movie” items below, respectively.
Sitemap
I included the main features and functionalities of the app in its Sitemap.
 I found it important that users may be able to select a movie that is showing in a particular theater and select a theater that is showing a particular movie. These two options are represented through the “Movie by theather” and the “Theaters by movie” items below, respectively.
Wireframes
At this stage, I already had ideas for the placement of the different elements on each screen. 
I proceeded with giving shape to those ideas through wireframing, always with the Sitemap above in mind.
Ticket purchasing flow
After the clients select the movie session and location, they enter the ticket purchasing flow. The screens sequence is as displayed below, with the user making their selections and moving forward until they finally pay for the tickets and snacks purchase.
Usability Studies
After doing the wireframes and building a working prototype, I wanted to see if:
There were any missing features
The users could complete the ticket purchasing flow easily
If users can seamlessly navigate through the app and can access all the necessary information about a movie or a cinema theater
Participants profile
3 men | 2 women
20 - 58 years old
Moviegoer 1-2 times per month / 2 months
Lisbon, Portugal
Some of the main insights
The “Food and Beverages” menu should be changed or removed
Users don’t see the relevance of having this option only by itself. They would not buy snacks if they are not going to the cinema.
There is a need for a Home button space space space space spac
Users want to quickly go back to the Homepage. They could not really see how to do it in the early version of the wireframes.
There should be a way to filter for different types of movies
A way to filter for different types of movies would aid usability and benefit the whole experience.
It’s unnecessary to always be showing the purchase info
Users don’t need to always be seeing the reservation information throughout the ticket purchasing flow. That can also save screen space and offer a more pleasant user experience.
Making an additional screen with the purchase info just before the checkout
Instead of always showing this info, there should be a purchasing review screen just before payment.
Include other forms of payment (only had credit card)
Users would like to see alternative payment options such as Apple Pay and Paypal.
Usability Studies
After doing the wireframes and building a working prototype, I wanted to see if:
There were any missing features
The users could complete the ticket purchasing flow easily
If users can seamlessly navigate through the app and can access all the necessary information about a movie or a cinema theater
Participants profile
3 men | 2 women
20 - 58 years old
Moviegoer 1-2 times per month / 2 months
Lisbon, Portugal
Some of the main insights
The “Food and Beverages” menu should be changed or removed
Users don’t see the relevance of having this option only by itself. They would not buy snacks if they are not going to the cinema.
There is a need for a Home button space space space space spac
Users want to quickly go back to the Homepage. They could not really see how to do it in the early version of the wireframes.
There should be a way to filter for different types of movies
A way to filter for different types of movies would aid usability and benefit the whole experience.
It’s unnecessary to always be showing the purchase info
Users don’t need to always be seeing the reservation information throughout the ticket purchasing flow. That can also save screen space and offer a more pleasant user experience.
Making an additional screen with the purchase info just before the checkout
Instead of always showing this info, there should be a purchasing review screen just before payment.
Include other forms of payment (only had credit card)
Users would like to see alternative payment options such as Apple Pay and Paypal.
Revised wireframes (examples)
High-fidelity Design
Wireframes to High-Fidelity
In translating the Wireframes to High-fidelity designs, I adopted a Dark Mode with tones of black, grey and yellow.
‍Below I show the changes I did to the ticket purchasing flow, from the usability revised Wireframes to the High-fidelity designs.
Wireframes to High-Fidelity
In translating the Wireframes to High-fidelity designs, I adopted a Dark Mode with tones of black, grey and yellow.
‍Below I show the changes I did to the ticket purchasing flow, from the usability revised Wireframes to the High-fidelity designs.
Other screens
Style Guide
Typography
Avenir Next
Work Sans
Color Scheme
Black
#111111
#222222
#333333
Grey
#888888
#CCCCCC
White
#FEFEFE
Yellow
#F9D555
Blue
#484F67
Other screens
Style Guide
Typography
Avenir Next
Work Sans
Color Scheme
Black
#111111
#222222
#333333
Grey
#888888
#CCCCCC
White
#FEFEFE
Yellow
#F9D555
Blue
#484F67
Key Takeaways
This project was my first UX Design project ever, done in the context of the Google UX Design certificate.
I had the opportunity to learn the entire UX/UI design process, from the initial research to the final output and handover to development.
Learning how to design in Figma was certainly a valuable outcome. I was able to try many design options along the way and was very happy with the good software skills that I developed.
Customers are more unpredictable than what I initially thought
The different opinions and feedback gathered during the interview phases surprised me. I initially thought that their ideas would converge with mine, which was not always the case.
Nonetheless, I must say that I found many commonalities among the different interviewees’ feedback.
Always look at the competition and other products for inspiration
I found myself looking at many different apps and ideas and trying many different solutions. I believe that many of the problems that I may be addressing as a UX/UI Designer may have already been successfully addressed by other companies and designers. I find the Competitive Research to be invaluable.

Other projects

Tide Weather Forecasting

Responsive Web App UX/UI Design

SparkCare

SaaS software for Healthcare UX/UI Design

Moon NFT Marketplace

Mobile App UI Design

Boulevard Cinemas

Mobile App UX/UI Design