[MEL21]




Key Dates

18 March - Launch Deadline
15 April - Standard Deadline
13 May - Late Deadline
8 July - Judging
15 July - Winners Announced
10 August - Awards Presentation

Village Cinemas website [DRAFT]



Website

Project Overview

Village Cinemas is an Australian-based film exhibition brand. They needed a new public-facing website that focused on making the ticket purchasing experience as seamless as possible with an overall user experience that better reflected their suite of premium products.

Project Commissioner

Village Cinemas

Project Creator

MASS

Team

MASS

Project Brief

We were engaged by the team at Village to help them create a website that, at its core, would make it easier for moviegoers to purchase movie tickets.

More than that though, the challenge put to us was more about how we could create a digital experience that mimicked going to the movies in person.

We were also tasked with figuring out how to emphasise and better reflect the many premium product and experience options they have at Village, such as Gold Class, VMax and 4DX.

The team at Village had done an extensive amount of work before we officially started, which allowed us to really hone in on these key aspects from the get go.

Project Innovation/Need

We worked with Village Cinemas to establish processes and behaviours early on that would ultimately help them deliver a great website. More importantly, though, we wanted to ensure that they would be set up to create better products and better customer experiences well into the future. As a by-product of our work, we started to see a shift in the internal culture at Village, with other areas of the business keen to follow a similar process for their own projects.

Data and analytics played a huge role in shaping our approach from the outset. We committed to a mobile first approach because it was clear the majority of traffic was coming from people using mobile devices. This informed not only how we designed, but what we chose to prototype and test.

Our highly collaborative relationship allowed us to legitimately put customers first, with user testing conducted almost every sprint. We iterated on our prototypes weekly and tested with casual moviegoers, highly engaged members and internal staff and key stakeholders. We made our testing and progress completely open and transparent to all staff, and we showcased our work regularly throughout the design process.

As with a lot of our other website projects, we approached the design work for Village with a digital product mindset. This resulted in a suite of flexible and content manageable components, optimised to be responsive across all common device widths.

Design Challenge

One of the challenges we set for ourselves internally at MASS was to do justice to all the work that was done before we started; to really elevate the design work to a level where we would all be proud by the time it went live.

This involved not only ensuring that the site was usable, but also ensuring that it looked and felt great. We looked at how we could integrate elements of the brand into the interface, specifically how we could take elements or moments from the cinema experience and weave them into a set of signature interactions.

The project itself was run using Agile and with user testing more or less happening every 2 weeks, it meant that we were consistently under pressure to produce prototype-worthy work. This actually worked in our favour, with the ability to gain insight and iterate on the fly resulting in better outcomes.

We also had a responsibility to ensure that the site was designed and set up in a way that would allow content authors to easily update and maintain content via the CMS. Image selection and curation was a particular challenge; we ended up creating a set of fairly robust components that could handle almost all image types (with a bit of direction) while making sure all text and other UI elements were legible and accessible.

User Experience

We redesigned the ticket booking process by focusing on two main calls to action — search by cinema or search by movie — and made it obvious on mobile by 'sticking' it to the bottom of the interface. We made the following sequences as simple as possible and provided more options for power users.

We established a unique visual concept that meant experiential content like movie descriptions and trailers appeared on dark backgrounds, and transaction sequences like buying a ticket featuring on lighter screens.

We animated the 'v' in the background and incorporated a spotlight effect that follows users as they scroll.

The use and overall art direction of the photography meant that we could really entice customers to learn more about the features and benefits of the premium product and experiences Village offer.

Even though the website launched in September last year (during COVID-19 restrictions) it will take some time to fully understand the impact of our work. With moviegoers attending cinemas in larger numbers again, we hope that we can get a better and more accurate picture on how the site is performing.

It is worth noting that we did have UsabilityOne, a third party usability consultancy agency, benchmark test our prototype and and they concluded that we had improved the overall usability of the experience from an initial score of 77.2/100 to a new score of 90.9/100.




This award celebrates innovation and creativity in design of a unique user experience in the combination of text, audio, still images, animation, video, and interactivity content for websites. Consideration given to clarity of communication and the matching information style to audience.

 

More Details