Golden Village
Redesigning the web and mobile app experience of Golden Village, Singapore's leading cinema exhibitor.
Project Overview
My Role
Design Lead | UX Researcher | UI/UX Designer
My Tools
Figma | Mural | Optimal Workshop | Adobe Photoshop | Trello
Timeline
2 Weeks Sprint
Platform
Website | Mobile App
Team
Myself | Daniel Aw | Niger Ang | Shuchita Gupta
Design Process
Introduction
Background of Golden Village
Founded in 1977, Golden Village is Singapore's leading cinema exhibitor since 1977 with 13 multiplexes, housing 104 screens. GV aims to bring the best theatrical experiences to audiences, offering the widest choice of movies, state-of-the-art design, convenience and unparalleled comfort.
Project Objective
Redesigning GV’s experience by enabling moviegoers to find and book their movies more efficiently to drive sales for Golden Village.
Project Planning & Management
As the Design Lead, I am responsible for keeping everyone aligned throughout and ensuring that the team meets all the objectives at the end of the project. The following are some principles that I applied in managing the team and project.
Planning
As a team, we identified the project phases, tasks and milestones so as to keep track of our progress and ensure we were on track. Each task was time-boxed and the project progress was monitored very closely using Trello.
Divide & Conquer
After identifying our individual's strengths and weaknesses, I planned and distributed tasks amongst the team to maximise the teams' efficiency.
Time-consuming activities such as user interviews & usability tests were split evenly across the team to minimise work fatigue and maximise team efficiency. Since our team are required to design for both the website and mobile app, I split the team into 2 teams when it comes to designing the prototypes for each platform. I worked mainly on the website with Shuchita, while constantly over-seeing the mobile app design progress as well.
Teamwork
The whole team was involved in all the different project phases, instead of working in silos, especially during research synthesis we will all regroup and synthesise the data and findings together. This approach ensured that the team to be able to close all the gaps and keep us aligned and on the same page moving forward.
I encouraged open communication among the team, ensuring everyone's opinions or ideas was heard throughout the process. During the design phase where the team was split to work on different platforms, I also made sure there was constant synchronisation across both group to ensure consistency.
02. Define Phase
User Personas
From our affinity mapping results, 2 user personas were formulated to represent users with varying goals, needs and frustrations.
Customer Journey Map (CJM)
We created customer journey maps for each persona to map out the booking journeys to give us a better context on the needs, touch-points, channels, emotional journey and potential opportunities that we can look into.
Features Prioritisation
With the consideration of our personas' customer journey map, heuristic evaluation, usability tests and competitive analysis, our features were prioritised based on the MoSCoW method.
Website:
Mobile App:
Information Architecture
To find out how users interpret and categorise the products and services offered by GV, we conducted a hybrid card sorting study with 15 users. This would help us validate and/or generate meaningful labels for the navigation labels so that users can navigate easily on both the website and the mobile app.
Top Navigation Bar
With the proposed features and validated labels, we finalised on the main navigation labels as follows.
User Flow
Subsequently, we started creating the steps and actions that the user will perform via user flow.
03. Develop Phase
Sketches
We proceeded to hand-sketch the following sketches to rapidly translate our ideas into tangible solutions.
Website:
Mobile:
Wireframes
Website:
Mobile App:
Usability Testing
With the lo-fi interactive prototypes, we conducted 2 rounds of usability tests, 5 unique users each, to evaluate the key concepts and identify usability issues.
Post-test analysis was conducted for all the usability tests using SUS rating. GV's website scored a massive improvement with a score of 93.5, while the mobile app also scored an excellent score of 83.
Website:
Mobile App:
Design Improvements
Through task success rate analysis as well as my observation during the usability tests, two major feedbacks and design improvements are summarised as follows:
01. Missing Information at Seats Selection Page
02. No Clear Receipt of Booking Page
Design Style Guide
With the wireframes completed, I led the team in design and delivery of the design style guide, to ensure efficiency and consistency across the platforms.
04. Deliver Phase
Key Takeaways
01. Effective Project Management
Through this project, I have learnt that managing and leading the team can be very challenging, especially when everyone has different opinions, ideas and work at a different pace. It is imperative to ensure everyone's voice is heard and be on the same page in making significant contribution to the success of the project.
02. Working with Constraints
Pertaining to UI redesign, we do not have much leeway in terms of design freedom as we need to stick by the Golden Village branding. Hence, we learnt to work with the existing constraints.
Finally, a huge shout-out to my team-mates Shuchita, Daniel and Niger for the great effort and support throughout the 2 weeks. I'm delighted that we managed to pull through together as a team!
01. Discover Phase
Business Analysis
01. Main Profitability
-
Ticket Sales
-
Food & Beverages
-
Movie Merchandises
-
Screen Advertisement
02. Definition of Success
-
Sold out theatres
-
Increase in F&B Sales
-
Increase advertising opportunities
03. Direct Competitors
-
Cathay Cineplexes
-
Shaw Theatres
-
WE Cinemas
-
Filmgarde Cineplexes
Competitive Analysis
To identify the common features as well as opportunities that by learning from our competitors, we conducted a Feature Inventory study. We identified that the existing website does not reflect the price breakdown after seats were selected in the booking process.
In addition, we also conducted a Task Analysis with a couple of our competitors, so as to compare the number of steps needed to complete a movie ticket booking. From our analysis, we discovered that GV requires the most number of steps during the booking process. From this analysis, we also validated that GV's booking process needed to be streamlined for users to book their tickets efficiently.
Heuristic Evaluation
To uncover the usability and UI problems on both the existing website and mobile app, we conducted Heuristic Evaluation based on Jakob Nielsen's 10 Usability Heuristics. The following are the summary of our findings with the highest severity rating of 4 in usability, which also means it is imperative for us to fix it before it can be released.
Website:
Mobile App:
Usability Test on Existing Platform
We conducted usability test with 5 users using GV's existing website and mobile app to uncover the usability problems from the users point-of-view. Our findings further validated the need to streamline the movie tickets booking process. The following is an example of our findings from our testing, when selecting seats.
User Interviews
A total of 8 users were interviewed to understand their goals, expectations and frustrations when it comes to deciding and booking a movie at the cinema.