Deepening the connection between users and theaters for a better movie experience
Role
Sole Designer (Research, Wireframing, Prototyping, Visuals, Motion)
Duration
2 months (November - December 2023)
Sole Designer (Research, Wireframing, Prototyping, Visuals, Motion)
2 months (November - December 2023)
I created this project as part of the "Google UX Design Professional Certificate". I've been familiar with User Interfaces, but everything other than that was new to me.
This project has been a great opportunity to better understand the Design Thinking Process and get started in the world of UX Design.
Interviews
Pain Points
User Personas
Problem Statements
I tried to be as much empathetic as possible - that translated into both detailed and vague questions, that allowed the interviewed people to answer freely and without any influence.
When writing my questions, I considered the whole experience of watching a movie - both before and after it - so I assumed that a big part of them would answer the same way. It turned out that some of them have different experiences, needs and pain points that need to be faced.
Some users feel uncomfortable using third-party services to purchase tickets, that are often dated and unreliable.
Users don’t like waiting in line, mostly because they usually don’t have time to get there early and wait.
Sometimes not having a comprehensive way to check current movies make people not want to go to the theater.
Sometimes people prefer to schedule movie nights when knowing that the theater won't be too crowded, because of parking spots and waiting times.
After gathering all the needed info, I came up with two personas who represent the kinds of relationship people have with movie theaters.
Gianmarco is a cinema geek who needs a movies hub because he wants to keep up with the cinema world.
Gianmarco is a Computer Engineer living in Modena with his girlfriend and 1 dog. He's a big cinema geek, and loves the experience of the big screen to death - for this reason, he wants to ensure the best seats. Moreover, he loves documenting himself about newly accounced movies. He goes to cinema by car, and he’s not bothered by a busy theater.
Camilla is a student who needs a way to know if the theater is too busy because she wants to enjoy her free time.
Camilla is an Economy student and shares an apartment in Bologna with 2 roommates. Having a busy life, she wants to escape her daily routine by doing relaxing things. Even though she’s not a geek, she enjoys going the theater alone. Having not so much free time, she goes to the theater by car: every inconvenience can make the overall experience worse.
In Italy only bigger chains offer first-party platforms, while for smaller theaters it is more common to use aggregators - so I went overseas and explored solutions like what AMC Theaters offers.
I made a deep dive into these services, to better understand what are common layouts and patterns for both mobile and desktop versions, and features that I would like to adopt in my product, and also the ones I would avoid.
2-step process for choosing seats. First you choose what kind of seat, then you choose them from the minimap.
Informative description of the movie, including cast, duration, genre and trailer.
Non-existent mobile apps or outdated designs for almost all services.
Screens are too cluttered with info, making the booking process difficult to follow.
User flows
Information Architecture
Paper wireframes
Digital wireframes
Low fidelity prototype
Usability studies
To start the designing phase, I asked myself if the design process should’ve been following a mobile-first philosophy over a desktop-first philosophy. To get an answer, I went back and checked my personas.
I then opted for a mobile-first approach and then design for bigger screen through the practice of progressive enhancement, in which I adapt existing elements to the new layout and possibly add new ones.
This was honestly the most fun, yet complex part of the project - thinking about features for the platform.
My goal was to make the platform stand out among other competitors, but I didn't want it to lose it's main function: inform users and reserve seats without worrying about losing time.
After lot of brainstorming, these are some features I came up with:
Some of these features like notifications are not to be implemented in the desktop version due to obvious limitations.
The first step of the actual design was creating user flows: the platform would be used from different devices and screens, so I tried to create user flows that could easily adapt on every device.
Above: example of user flow for reserving a seat.
Designing the IA has been the most crucial point: creating a platform that both works on different screens and offers the same kind of experience required more time and attention to details. The content had to be flexible, intuitive and easily discoverable.
During the wireframing part, I tried to get as many layout ideas as possible and transferred them into paper. I then chose the features I liked the most to get in the final design.
After sketching, I took the ideas i liked the most and merged into a single UI. After defining basic components, I started building the UI around the Information Architecture in order to get to the prototyping stage.
Welcome screen
Movies
Food & drinks
Theater
Fidelity card
Movie details
Welcome screen
Movies
Food & drinks
Theater
Fidelity card
Movie details
I spent quite some time crafting solutions that could make CineMax an accessible platform. These are some of the considerations I came up with.
Be default, all screens feature a tall app bar that compresses itself as the user scrolls, to make the content easier to reach.
Users can make food orders directly from the app, as stand-alone orders or while buying tickets. It's also possible to choose a time for the food to be ready to pick up.
The platform features a page dedicated to theater info such as directions, floor maps, affluence and parking.
Users can follow newly announced movies and get a notification when they are available at the theater.
Layout grids have been fundamental to define different breakpoints in which the layout changes. Taking inspiration from design system by Apple and Google, I decided to use breakpoints for three different screens sizes.
Unmoderated study
Italy, remote
6 participants
10-15 minutes
Some of the participants noted that having a search feature can be really useful alternative to a potentially long list of movies.
At this point, I've built a search page accessible from the home page that allows to search for a specific movie or cast member.
High fidelity prototype
Stickers sheet
Accessibility considerations
Designing for larger screens
Welcome screen
Movies
Food & drinks
Theater
Fidelity card
Movie page
Welcome screen
Movies
Food & drinks
Theater
Fidelity card
Movie page
Building the overral visual design of the platform has been the most fun yet complex part.
Considering different UI elements and contexts, icons have been built in two different sizes (24pt and 18pt) while keeping the same optical weight.
Headings and paragraphs use two different fonts: Staatliches offers boldiness and character and is best suited on short headings, and Supreme Variable matches the headings' geometric style while being more legible.
To guarantee enough contrast between colors, I picked a primary, secondary and neutral color and created their respective tints and shades.
I spent quite some time crafting solutions that could make CineMax an accessible platform. These are some of the considerations I came up with.
Colors have been accurately picked in order to pass WCAG minimum requirements.
For example, text on buttons use a lighter tint of the primary color, and are tested on the lightest surface color.
Seats in the minimap are represented by different shapes, in order to help colorblind people.
Layout grids have been fundamental to define different breakpoints in which the layout changes. Taking inspiration some of the most famous design systems, I implemented two grid sizes.
In tablet and desktop screen, destinations move to the left and there's more space for content.
Movies
Movie page
People's feedbacks
Takeaways
Next steps
CineMax helped me understand the design thinking process by applying it to a real everyday issue.
In particular, I had the chance to focus on other people's words and feelings, allowing me to offer the best possible solution for their pain points, and put my perspectives and bias aside.
I also recognize that I can improve in different areas: listening to people is easy, but finding their problem is more difficult then I imagined.
I have a lot of ideas and improvements for this project: considering this is the first version, I want to make some updates in the future.
Implement better movie filters, such as 3D, IMAX, and languages.
Consider more options for food, other than popcorn or generic drinks, and probably redesign the page to not make it too cluttered.
Explore new solutions to make the minimap more clear with seat numbers.
I hope you appreciated this reading as much I enjoyed building Cinemax.
I put a lot of effort into the whole process that helped me shape myself as a UX designer.
