MOCi is a responsive trailer web for a movie theatre. By searching or browsing movies on the web pages, and accessing comprehensive movie info, movie lovers can find the most suitable movies for them and be easily redirected to the ticket website.
OVERVIEW
My role
As a UX researcher and UX designer, I was responsible for every aspect of this two-week-long design project, including user research, wireframing and prototyping.
The problem
Many people feel frustrated when choosing movies due to the lack of movie info on the ticket website. They also don’t have a place to help them record movies that they plan to watch later.
The goal
Design a website to offer comprehensive movie info to users to help them make decisions, as well as offer a watchlist for users to keep track of watched and to-watch movies.
USER RESEARCH
Summary
In the initial stages of designing MOCi, my research approach incorporated in-depth interviews with an online survey reaching a diverse audience, and an analysis of user reviews on existing ticket websites. Participants from various demographics illuminated significant frustrations in the movie selection process, emphasizing the critical need for more detailed information. Users expressed a desire for comprehensive plot summaries, cast details, and user reviews. Moreover, a clear demand for a centralized watchlist platform surfaced, as participants currently lack an efficient means to manage their movie preferences. Overall, this research provides essential insights guiding the design strategy, addressing frustrations, implementing an efficient watchlist, refining transitions, and fostering community engagement for the success of the movie trailer website.
Challenges
It is hard for people to choose a movie before knowing it enough.
It is easy for people to forget the movies that they plan to watch.
People frequently miss the screening period of movies.
Solutions
The website will provide a great variety of info about movies.
The website will provide a watchlist for users to organize their preferences.
The website provides the screening period's progress bar to notify users about the deadline.
Persona: Bruce
Bruce is a movie lover who needs to find enough movie info before buying a ticket because he feels lost when choosing movies for his family.
User Journey Map
My goals in this stage is to find potential issues that may occur during the use of this web. By simulating the entire searching and browsing process, I identify some of the negative emotions that Bruce may have during different stages, and propose improvement methods to adjust the web’s features to make him happier.
START THE DESIGN
Sitemap
User flow
Paper wireframes
Laptop screen
Phone screen
Digital wireframes
Laptop screen
Phone screen
USABILITY TEST
Research goals
Determine if users can complete core tasks within the prototype of MOCi.
Determine if MOCi can make any changes to serve the users better.
Research questions
The research result should make me able to answer these questions:
How long does it take a user to select a movie and find the specific info about this movie using the web?
What can we learn from the user flow, or the steps users take, to find a movie?
Are there parts of the user flow where users get stuck?
Are there parts of the user flow that users dislike?
Are there more features that users would like to see included on the web?
Do users think the web is easy or difficult to use?
KPIs
Time on task
Use of Navigation vs. Search
System Usability Scale (SUS)
Methodology
Moderated usability study
Location: Canada, remote (each participant will complete the study in their own home)
Length: Each session will last 5 to 10 minutes, based on a list of prompts
Participants are people who watch movies at the cinema on a frequent basis.
Findings
Two rounds of the usability study of MOCi were conducted with five participants each to gain insights based on their behaviours and feedback.
Users want to access more types of info on movies.
Users want to know the screening period of movies.
Users want to have a more organized navigation for the web screen.
Users think there's a lack of emphasis on the trailer on the movie detail page.
REFINE THE DESIGN
1. Some participants suggest more info could be added to enrich the web and highlight its value. Therefore, I added more categories such as music and accolades.
2. Some participants would like to have a days count so that they are less likely to miss the movie they prefer. Therefore, I added a progress bar to indicate the screening period.
3. Some participants thinks the trailer is not visually appealing enough at the top of the detail page. Therefore, I adjust the size of the poster to make the trailer box stand out.
Before usability study
After usability study
4. Some participants think the navigation on the laptop screen is a little messy. Therefore, I ordered the navigation elements together to create a consistency.
Before usability study
After usability study
Final mockups
Starting from the home page, users can use the search bar or "Find movies" from the navigation to find current movies in the theatre and browse comprehensive details of each movie. Once they decide to watch a movie, they can choose the date and time, and be redirected to the ticket website to purchase tickets. Users can also save a movie to their watchlist for watching later.
Laptop screen
Phone screen
Accessibility
The website is designed in a responsive format, enabling users to access it from both laptops and cell phones.
The interface uses dark blue and white as neutral colours to create a high contrast.
There are language options for users to choose from.
CONCLUSION
Takeaways
"The visuals are sleek and streamlined, featuring well-defined buttons for easy navigation. The colour palette is inviting, ensuring the poster content stands out with a compelling touch of modern tech vibes. It amps up the excitement to dive into the world of cinematic trailers."
— Study participant
"Using this website was a breeze! I liked how it looked – dark blue background with white and light blue letters. It felt kinda classy. The buttons were easy to find, and I could check out details and watch trailers for any movie. The cool part was I could keep track of movies I wanted to see later. There's this progress bar thing for upcoming screenings, which I thought was neat, so I wouldn't miss them. Overall, it's a handy place for movie stuff without being too complicated."
— Study participant
Next steps
According to suggestions from some of the study participants, there are a few updates that can be made in future iterations to enhance the functionalities.
Ticketing systems can be added so that users don't have to jump to another site to purchase tickets.
Profile page for every member of the cast and crew can be added for users to access more info.
Based on the ticketing system, an electronic ticket stub commemorative album can be built to bring more meaningfulness to movie lovers and therefore encourage users to watch more movies.