Mar 2023
Cinema's Website
About project
Village Cinemas is an Australian film exhibition brand that caters to movie lovers of all ages with a variety of pricing options. With a focus on providing an enjoyable movie-watching experience
Existing service
I started my redesign project by identifying the pain points of the current website, including issues with accessibility, a cluttered design, an inefficient movie browsing system, and a confusing seat reservation process.
Existing Village Cinema's website
To ensure the success of the project, I conducted a thorough analysis of website statistics to identify opportunities and set Key Performance Indicators (KPIs). Through empathy mapping and research on the target audience, I gained a deeper understanding of the customer needs and preferences.
Village Cinema's website metrics
User research
I searched the internet to find information about the chain's customers, and then I created empathy maps to better understand the target user and their needs. I discovered that many target users reserve seats through the website to save time and feel confident about movie sessions.
This creates an enjoyable interaction experience with the brand and gives customers the opportunity to stay up-to-date with movies.
One of the two persons
Pain points
1
Navigation. Cinemas website designs are often cluttered, which result in confusing navigation
2
Interaction. A seat reservation process always too difficult, which sometimes leads users to make mistake
3
UI. Cinemas website don’t provide enough visual experience to engage users
User journey map
To enhance the user experience of the Village Cinemas booking flow, I visualized the process and explored new possibilities.
Customer journey map of Village Cinema's customers
Information architecture
Understanding that navigating the website was a major pain point for users, I created a sitemap to clearly present information architecture and make the website easier to understand.
Site map of the website
Wireframing
To bring my ideas to life, I first created paper wireframes that incorporated the user's pain points and needs. By moving to digital wireframes, I was able to better assess how the redesign would address these pain points.
Wireframes from Adobe XD sceenshot
With the recognition that customers access the site on various devices, I made sure to design for different screen sizes, ensuring a fully responsive experience. The focus of my strategy was to improve navigation clarity.
Prototyping
To test the redesign, I connected all screens involved in the primary user flow of seat reservations to create a low-fidelity prototype. I obtained feedback on the overall design structure and made improvements that addressed user pain points based on the feedback received.
Adobe XD screenshot of prototyped flows
Interesting fact
Recent advancements in technology and design have allowed for new and innovative ways to enhance the movie-watching experience, such as virtual reality (VR) and augmented reality (AR).
For example, the movie theater chain, Cinemark, has created a VR experience that allows viewers to explore the world of a movie before the show begins. Additionally, the startup, MovieMask, has created a portable AR device that can be used in theaters to enhance the viewing experience by providing subtitles, translations, and other information.
These advancements in technology and design are changing the way we experience movies, and the possibilities for further innovation in this field are exciting.
Usability study
These were the main changes covered by the usability study:
1
Add a “Movie info” button
2
Add more “Payment method” options
3
Change movie info structure
4
Revise checkout process
Mockups
To enhance the user experience, I considered various screen sizes in my mockups and optimized the website for mobile and tablet devices.
Then created a high-fidelity prototype based on the low-fidelity prototype and made changes from usability study results for a smooth and intuitive booking flow.
Home page mockup with responsivness
Accessibility considerations
I ensured clear visual hierarchy on the website by using headings with different sized text, as well as including landmarks to aid navigation, especially for users with assistive technologies. In addition, I incorporated alt text on each page to facilitate smooth access for screen reader users.
"Accessibility: It's About People". WCAG website screenshot
Therefore, it is important to test if the new symbols won't have any negative impact on the app's usability before implementation.
Takeaways
After receiving feedback from the target users, I discovered that the design was intuitive to navigate, more engaging with images, and demonstrated clear visual hierarchy.
Final mockups of the new website
This taught me the valuable lesson that even small design changes can have a significant impact on the user experience. Overall, my key takeaway was the importance of focusing on the real needs of the user when generating design ideas and solutions.
