Cinema
App Design
My Role
Project Lead
Contributions
Research
Personas
Wireframes
Design
Course
Google UX Certificate
Duration
3 months
Tool
Figma
User Testing
When starting this project, I wanted to understand my users' needs and how they think and feel. I decided to use the Design Thinking process - an approach that helps designers create solutions that address real user problems. This is an iterative process of five phases: empathize, define, ideate, prototype, and test.
The goal was to design an app for Cinema that allows users to explore movies showing near them, watch movie trailers, and buy tickets in one place.
While designing the Cinema app, I learned that my initial visualization is only the the first step in the process. Listening to user needs through usability studies and peer feedback influenced each iteration of the app’s designs.
01
In order to understand my users I conducted user interviews. Based on the pain points I found in my research, I created personas and journey maps.
02
I sketched wireframes based on user pain points. This helped me quickly iterate on different design options. My focus was on making the design clean and intuitive.
03
I created the initial designs with focus on useful button locations and visual element placement.
Visualization of the menu made it easy to navigate
Easy access to the movie details and watching the trailer
04
I conducted usability testing on a mobile app to identify areas for improvement and ensure that the app was user-friendly.
Study Type
Unmoderated usability study
Location
USA, remote
Participants
5 participants
Key Insights
Users desired a less cluttered navigation menu.
Users requested landscape-mode functionality while watching trailers.
Users wanted an option to change location.
05
I applied design changes based on the insights from the usability study.
Before
After
New
I revised the design so the navigation menu will be a side menu for a less crowded layout
I added the option to change location
New navigation menu
Before
After
I gave the option to change the view mode
06
Next, I made a style guide and a high-fidelity mockup. I wanted to keep the design clean and joyful. I chose colors that look like a neon signs to give the user a movie theater feel. I also conducted another round of usability study, and made some iterations based on it.
There was frustration about the size of text and objects on the movie plot page. So I changed the page to fit the whole screen
