TIMELINE
August 17- October 24 2022
(2 months)
MY ROLE
Solo student project for Google UX Design Certificate
TOOLS
Figma, Photoshop, Illustrator
OVERVIEW
For my Google UX Design Certificate, I was given the prompt to "design a movie reservation app".
Sounds vague right? That's because it is. But it was this vagueness that gave me the opportunity to identify whitespaces of current movie apps and think outside of the box. I didn't want to design just any movie reservation app, I want to create an app that can genuinely reach out to users and build touch points that would elevate their movie experiences through cross-border functionality.
PROBLEM STATEMENT
There isn't an app that all users love 😟
When we asked users why they used a certain movie app to reserve tickets, most of them talked about
convenience rather than actually enjoying the process. This sparked the question - why was there this disconnect between users and movie apps?
THE SOLUTION
Lights Out, an app that bridges users and movie booking platforms through cross-border functionality
01
Discover
Discover latest movie recommendations before deciding what to watch
Share movie news and initiate discussions through creating discover posts
02
Reserve
Easy & intuitive process of selecting showtimes
Reserve for tickets of your favorite movies in just a few clicks
03
Engage
Don't know where to discuss movie endings and plots?
Join community groups to engage in movie discussions & share interests
GOALS
Address user pain points and build a platform that is easy to use, artistically creative, and fosters a genuine relationship between its users.
Integrate key components of the movie-viewing experience including showtime/ ratings information, an intuitive booking process, and a space for engaging community conversations.
Incorporate human-centered design principles into the user interface and provide an experience that is smooth and personalized.
RESEARCH PROCESS
1. COMPETITIVE ANALYSIS
There is no app that "does it all"
I analyzed the 3 most popular third-party movie booking apps to understand and identify areas of improvement. I analyzed each app based on navigation, visual design, and user engagement. It turns out that all three lacked visual design and responsive customer service. It was impossible to differentiate one from another. They all felt incomplete to me and didn't seem to address common user pain points. Even though each has a significant user base, there isn't one app that is visually appealing, well-integrated, and cares about its users. This then became my opportunity for a solution...
Fadango
Flixster
Atom
2. USER INTERVIEW
With those insights in mind, I interviewed 7 movie enthusiasts to learn more about their movie experiences and habits. I wanted to identify unresolved user pain points and incorporate my research into my design process to elevate their experience.
Interview Questions
-
Where do you usually book movie tickets? If you use apps, what makes you choose one over the others?
-
How do you usually“discover” and “search” for showtimes and decide which movie to watch?
-
What were the enjoys/frustrations you encountered while booking tickets?
-
Where do you usually search for movie information?
-
Walk me through your movie journey (from discovering a movie to watch to post movie discussions)
-
What do you think will make your movie journey more enjoyable and easy?
Click here to learn about my insights from my user interviews
From these insights, I've identified three "pillars" that address whitespace opportunities...
01.
Integrated Platform
Build an integrated platform where users can discover, book, and engage all in one app
02.
Loyal Community
Improve user loyalty and retention by building an in-app community for movie enthusiasts
03.
Premium Experience
Provide the ultimate experience for users to make sure they feel "taken care of"
USER PERSONA
From there, I developed a persona based off of my research.
WIREFRAMES
-
I started out with multiple sketches of my home page containing elements I wanted to include. I then circled the sections I liked and integrated them into my final sketch.
-
Following the design process for my home page, I designed the rest of the frames that I wanted to include in the prototype
MOOD BOARD & AESTHETICS🎨
Exciting & Playful
I drew inspiration mainly from posters, trailers, and other visuals of popular block buster films. I understand what users appreciate and wanted to make the digital experience "fun" and "enjoyable". To do so, I decided to spend a lot of time making sure each page, each image, and each letter was aesthetically pleasing and fits the theme of my app.
USER TESTING
After designing my low-fi prototypes, 9 peers and mentor tested out my app. Even though they were not use to the newly designed lay out, they were immediately impressed by how intuitive and easy to use the app was. Furthermore, they LOVED the discover feature and was surprised that they were able to chat with friends/join different communities. There were still a few things that they suggested that could improve...
I decided to keep the good designs ideas from before while incorporating the users feedback into my final prototype
Peers recommended that I clean up the homepage and make it easier to navigate because they thought it was counter intuitive and difficult to use.
AFTER
BEFORE
BEFORE
Instead of old school chat boxes, peers felt like it would be more interesting to organize communities like channels.
AFTER
I created community "rooms"and added icons to simplify the interface.
THE FINAL PRODUCT..(WHAT & WHY)
Cross Border Functionality
-
Weaving social aspects into the movie journey to create engaging consumer experience
-
A way to nurture in-app community & build user loyalty
Nowhere to engage in a movie community?
Lights out has it all
Posts directly linked to movie reservations and discussion communities
Engage & interact with other users through replying & liking comments
Personalized movie content by users that shares current movie trends, discussions, and recommendations
Spoiler alert for posts that may contain movie spoilers so users wouldn't get spoiled while engaging in community conversations
Join community rooms to discuss movies with other users with shared interests
Need a seamless & premium movie booking process?
Reserve through Lights Out with just a few clicks
Users can set up seating preferences so they wouldn't need decide where to sit every time
Saved seating options when users exit booking page
Direction: Directed to maps to guide theater directions
Transfer Ticket: Transfer ticket to friends so users no longer have to wait for all to enter
Add to Wallet: Entrance conveniency
Add to Calendar: Remind movie dates
Get notified with movie starting times so users can better track time
Order food & drinks in advance and get it delivered to your seat
Lights out will make your movie journey more intuitive & enjoyable than ever 😉
Check out the prototype!
REFLECTIONS
Lessons I learned and what I'll do differently next time
This is my first UI/UX project for my Google UX Design Certificate. (yay!!) 🥳. I would say that the result is not too shabby for a first UX project 🙂 but I am more satisfied with what I was able to achieve at the end and my learnings throughout the process. Here are a few key takeaways from this experience:
1. Do not overthink 💭 - When I was trying to tackle the problem, I realized that I sometimes drown in the details of design and end up overthinking the problem. I did not start out with a schedule, but I noticed along the way that having a timeline allows me to focus on and prioritize the to-dos for this project. In the end, I was able to overcome overthinking by planning out my tasks and adjusting them based on feedback from peers and mentors.
2. It is okay to ask for feedback 💬 - Because this is my first project, I spent the majority of my time learning the fundamentals of design and studying the target users. Throughout this experience, I encountered some obstacles such as not knowing what tools are available and how to use available tools in Figma. Whenever I experience difficulty, I found it to be the most helpful to reach out to experienced designers and professors around me. I want give a huge shout out to everyone who has supported me throughout my journey! I couldn't have done this without you. 😊
3. Iterate and learn through the process 📘 - In the initials prototypes, I was unfamiliar with Figma and inexperienced in design. However, as I invested tons of time into learning Figma (through tutorials online and mentors), I started to gain a grasp in how to turn my ideas into reality. From not knowing how to create icons to being able to create my own high fidelity prototype, I've learned so much throughout the process and understood the importance of dedication. If you are willing to learn, you will be able to succeed at achieving what you want.
