Responsibilities:
Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The problem:
Busy people lack the time to look for movies to watch.
The goal:
Design an app that makes it easy for users to book tickets and get recommended movies from friends that they think they would like.
My role & softwares used:
Ux designer. Designing an app for Mooviz movie theater from conception to delivery.
Figma, Adobe photoshop, Adobe Illustrator.
PROJECT OVERVIEW
User research: summary
I interviewed people about how they go about finding new trailers to watch, how they keep updated on new movies, and what struggles they have finding new movies to watch.
I noticed that many of them don't want to spend too much time searching for movies and trailers. They take the time to watch a trailer when it has been recommended by a friend or family member.
I also noticed that the people who enjoys watching multiple trailers and stay up to date with what's new, have to go on multiple websites to stay updated.
User research: pain points
Money
Can't afford to go to the movies as often as they like. Create a reward system for recommendations.
No time
Don´t have time searching for trailers. Need friends and and app to recommend trailers.
Too many places
Have to go on multiple websites to stay updated on the latest movies. Need a one stop shop for news.
3
2
1
Brand colors
#121111
#012A36
#E0479E
#FAF9F9
Personas
I created personas to ensure the design remains focused on the real needs and behaviors of our target users. These personas were developed based on insights gathered from interviewing real users, allowing me to capture their goals, challenges, and preferences.
By using these fictional profiles, I can better empathize with users and make more informed design decisions. Personas help guide the team in prioritizing features, aligning design choices with user goals, and ensuring we create a product that truly addresses the challenges and preferences of our key audience. This approach helps us avoid designing based on assumptions and instead centers the experience around the people who will actually use the product.
Paper wireframes
I took the time to draft iterations of each screen of the app on paper to ensure that the elements that made it to digital wireframes would work and address the pain points.
Digital wireframes
Recommend the movie to friends on the app, and get points when friend book ticket.
When collected enough points, you can redeem rewards.
Rate and see ratings of the movie.
Based screen designs from feedback I had collected about what the user wanted.
The points page is key to this app as it allows users to save money when collecting enough points and motivate them to recommend movies to friends.
Shows points you have collected as well as how much you need.
Low-fidelity prototype
I created a low-fidelity prototype to visualize the core structure and functionality of the design. You can explore the prototype by clicking the button below, which will take you to Figma. From there, you can scroll through the screens and interact with the prototype to get a better sense of the user flow and layout.
Usability study: findings
Round 2 findings
I conducted two rounds of usability studies. Findings from the first study helped me approve the design from the wireframes to the mockups. The second study used a high-fidelity prototype revealed what aspects of the mockups needed refining.
Users could not read what the link said on the ticket page.
3
Users found it confusing when adding bank account and not getting a confirmation.
1
Users did not understand the 10 points underneath recommended movies.
2
Round 1 findings
User wants an invite feature for friends.
3
User finds ticket icon confusing.
1
Users want to be able to search by name and not just username.
2
Mockups
Before usability study
After the second usability study I also removed the points collected underneath the recommended movies since users just found it confusing and unnecessary.
After usability study
Mockups
Before usability study
After the second usability study, many users pointed out that they could not read the link in blue on the screen. I changed it to the brand color print to make it more visible and more on brand.
After usability study
high-fidelity prototype
I created a high-fidelity prototype to showcase the final design with detailed visuals, interactions, and functionality. You can click the button below to view the prototype in Figma. From there, you can scroll through and interact with the design to experience the full user journey and polished interface.
Final Thoughts
Mooviz is a movie theater app designed to streamline the experience of booking movie tickets, recommending films to friends, and earning rewards. The app allows users to collect points that can be redeemed for free tickets or snacks and beverages at the theater. Throughout the project, I conducted user research, created personas, and developed both low and high-fidelity prototypes to ensure the app meets user needs. By focusing on usability and seamless interaction, I aimed to create an app that not only simplifies ticket booking but also enhances the overall movie-going experience with social and reward-driven features.
