Back To My Work
Savoy
Savoy
PROTOTYPING
PROTOTYPING
PROTOTYPING
USER TESTING
USER TESTING
USER TESTING
FIGMA
FIGMA
FIGMA
UX RESEARCH
UX RESEARCH
UX RESEARCH
DESIGN SYSTEMS
DESIGN SYSTEMS
DESIGN SYSTEMS
My Role
User research: Empathy maps, Interviews, Competitive analysis, Personas, Affinity diagrams, User journey maps
UX design: Crazy 8s, Iterative wireframing, Storyboards, Testing sessions, User flow diagrams, Accessibility accommodation Prototyping, Usability studies, Insight generation
Communication: Storytelling & Narrative
User research: Empathy maps, Interviews, Competitive analysis, Personas, Affinity diagrams, User journey maps
UX design: Crazy 8s, Iterative wireframing, Storyboards, Testing sessions, User flow diagrams, Accessibility accommodation, Prototyping, Usability studies, Insight generation
Communication: Storytelling & Narrative
User research: Empathy maps, Interviews, Competitive analysis, Personas, Affinity diagrams, User journey maps
UX design: Crazy 8s, Iterative wireframing, Storyboards, Testing sessions, User flow diagrams, Accessibility accommodation Prototyping, Usability studies, Insight generation
Communication: Storytelling & Narrative
Project Context
May 2022 - Jan 2023 (part-time) Coursework project
May 2022 - Jan 2023 (part-time)
Coursework project
May 2022 - Jan 2023 (part-time)
Coursework project
Tools
Figma
Adobe suite
Mural
Figma
Adobe suite
Mural
Figma
Adobe suite
Mural
Summary
Designing a Savoy app that performed 2× faster than their site—with better accessibility, personalisation, and convenience.
Designing a Savoy app that performed 2× faster than their site—with better accessibility, personalisation, and convenience.
Designing a Savoy app that performed 2× faster than their site—with better accessibility, personalisation, and convenience.
Background
I enjoy watching films and going to the theatre, and I came across Savoy Cinema, a UK cinema chain serving over 100,000± customers. Savoy provided a typical cinema experience. They allowed users to book tickets only through their website or at physical locations. Their goal was to attract customers via their website, social media, and word of mouth.
I enjoy watching films and going to the theatre, and I came across Savoy Cinema, a UK cinema chain serving over 100,000± customers. Savoy provided a typical cinema experience. They allowed users to book tickets only through their website or at physical locations. Their goal was to attract customers via their website, social media, and word of mouth.
I enjoy watching films and going to the theatre, and I came across Savoy Cinema, a UK cinema chain serving over 100,000± customers. Savoy provided a typical cinema experience. They allowed users to book tickets only through their website or at physical locations. Their goal was to attract customers via their website, social media, and word of mouth.
Problem
Savoy’s site and competitors had poor UX making basic tasks like changing location difficult. Savoy lacked personalisation, accessibility, and a dedicated app—putting them at risk of losing users. This opened the door for a well-designed app to attract more cinema-goers.
Savoy’s site and competitors had poor UX making basic tasks like changing location difficult. Savoy lacked personalisation, accessibility, and a dedicated app—putting them at risk of losing users. This opened the door for a well-designed app to attract more cinema-goers.
Savoy’s site and competitors had poor UX making basic tasks like changing location difficult. Savoy lacked personalisation, accessibility, and a dedicated app—putting them at risk of losing users. This opened the door for a well-designed app to attract more cinema-goers.
Process
I followed an iterative user-centered design process.
Process - I followed an iterative user-centered design process.
It allowed me to generate a solution, involve users with testing, and end with a better design with iterative improvements.
It allowed me to generate a solution, involve users with testing, and end with a better design with iterative improvements.
It allowed me to generate a solution, involve users with testing, and end with a better design with iterative improvements.
Challenges
I faced a few challenges that I had to overcome. Overcoming the colour system was a major breakthrough for the quality.
Challenges - I faced a few challenges that I had to overcome. Overcoming the colour system was a major breakthrough for the quality.
01. Visually unbalanced design
Red with white text matched the website's palette but hurt readability. I used a 60-30-10 palette with black as the primary, boosting legibility and adding a cinematic feel.
Red with white text matched the website's palette but hurt readability. I used a 60-30-10 palette with black as the primary, boosting legibility and adding a cinematic feel.
Red with white text matched the website's palette but hurt readability. I used a 60-30-10 palette with black as the primary, boosting legibility and adding a cinematic feel.
Empathise. 1
I interviewed 5 diverse users and developed user bios and empathy maps to capture their feelings, frustrations, and needs.
Empathise. 1 - I interviewed 5 diverse users and developed user bios and empathy maps to capture their feelings, frustrations, and needs.
In interviews with diverse participants, I asked them to describe their experiences and challenges when finding movies to watch. Also their decision-making process, motivations for going to the theatre and their feelings about watching trailers.
In interviews with diverse participants, I asked them to describe their experiences and challenges when finding movies to watch. Also their decision-making process, motivations for going to the theatre and their feelings about watching trailers.
In interviews with diverse participants, I asked them to describe their experiences and challenges when finding movies to watch. Also their decision-making process, motivations for going to the theatre and their feelings about watching trailers.
Participant characteristics:
Participant characteristics:
Participant characteristics:
Seen a movie in theatres in the past year (solo or with company).
Does not have to be the ticket buyer.
Likes to stream shows and watch movies.
Has experience using movie trailer apps or websites.
Include participants of different ages, genders, and abilities.
Seen a movie in theatres in the past year (solo or with company).
Does not have to be the ticket buyer.
Likes to stream shows and watch movies.
Has experience using movie trailer apps or websites.
Include participants of different ages, genders, and abilities.
Seen a movie in theatres in the past year (solo or with company).
Does not have to be the ticket buyer.
Likes to stream shows and watch movies.
Has experience using movie trailer apps or websites.
Include participants of different ages, genders, and abilities.
Research goals:
Research goals:
Research goals:
To understand motivations and frustrations in the user journey from movie selection to final viewing at the theatre (solo or with company).
To understand the frustrations of finding films to watch.
To understand frustrations faced when using existing apps and websites to watch trailers.
To understand the effect of trailers on the feelings of users.
To understand motivations and frustrations in the user journey from movie selection to final viewing at the theatre (solo or with company).
To understand the frustrations of finding films to watch.
To understand frustrations faced when using existing apps and websites to watch trailers.
To understand the effect of trailers on the feelings of users.
To understand motivations and frustrations in the user journey from movie selection to final viewing at the theatre (solo or with company).
To understand the frustrations of finding films to watch.
To understand frustrations faced when using existing apps and websites to watch trailers.
To understand the effect of trailers on the feelings of users.
Pain Points
Bad recommendations:
Platforms for viewing trailers for upcoming movies gave irrelevant recommendations.
Non-personalised notifications were viewed as spam, causing frustration.
On some platforms, users had no intuitive way to control notifications.
Platforms for viewing trailers for upcoming movies gave irrelevant recommendations.
Non-personalised notifications were viewed as spam, causing frustration.
On some platforms, users had no intuitive way to control notifications.
Platforms for viewing trailers for upcoming movies gave irrelevant recommendations.
Non-personalised notifications were viewed as spam, causing frustration.
On some platforms, users had no intuitive way to control notifications.
Censorship:
Some platforms for viewing trailers did not allow users to voice their opinions.
Users wished they could see expert movie critic ratings.
Users wanted to know more about the potential movie quality from other users.
Some platforms for viewing trailers did not allow users to voice their opinions.
Users wished they could see expert movie critic ratings.
Users wanted to know more about the potential movie quality from other users.
Some platforms for viewing trailers did not allow users to voice their opinions.
Users wished they could see expert movie critic ratings.
Users wanted to know more about the potential movie quality from other users.
Usability + IA:
Some platforms were text heavy with high cognitive load (perceived effort).
Users had to rely on external search engines to switch showtime locations.
Some basic user flows like finding specific movies and their schedules were not intuitive
Some platforms were text heavy with high cognitive load (perceived effort).
Users had to rely on external search engines to switch showtime locations.
Some basic user flows like finding specific movies and their schedules were not intuitive
Some platforms were text heavy with high cognitive load (perceived effort).
Users had to rely on external search engines to switch showtime locations.
Some basic user flows like finding specific movies and their schedules were not intuitive
Insecurity:
Not watching trailers caused less excitement and created more insecurity about movie quality.
Not watching trailers caused confusion around what the movies are about.
Not watching trailers caused less excitement and created more insecurity about movie quality.
Not watching trailers caused confusion around what the movies are about.
Not watching trailers caused less excitement and created more insecurity about movie quality.
Not watching trailers caused confusion around what the movies are about.
Empathise. 2
User Personas
Empathise - User Personas
I generated a few personas after analysis of the data gathered from interviews, to represent the needs of a collective group of users. I used the user personas when brainstorming features to ensure I addressed their specific needs. For example Bradley here would require a feature to limit movie recommendations he's notified about.
I generated a few personas after analysis of the data gathered from interviews, to represent the needs of a collective group of users. I used the user personas when brainstorming features to ensure I addressed their specific needs. For example Bradley here would require a feature to limit movie recommendations he's notified about.
I generated a few personas after analysis of the data gathered from interviews, to represent the needs of a collective group of users. I used the user personas when brainstorming features to ensure I addressed their specific needs. For example Bradley here would require a feature to limit movie recommendations he's notified about.
Define
I employed a variety of research methods to define the product.
Define - I employed a variety of research methods to define the product.
After learning about potential users and their pain points I conducted further research with competitor analysis and user journey maps. And then defined solutions through various statements, to give a direction when generating ideas.
After learning about potential users and their pain points I conducted further research with competitor analysis and user journey maps. And then defined solutions through various statements, to give a direction when generating ideas.
After learning about potential users and their pain points I conducted further research with competitor analysis and user journey maps. And then defined solutions through various statements, to give a direction when generating ideas.
Ideate
Building on the opportunities identified in my research, I generated a range of ideas then created paper and digital wireframes.
Ideate - Building on the opportunities identified in my research, I generated a range of ideas then created paper and digital wireframes.
Using insights from my research, I ideated features with Crazy 8’s, created paper wireframes, and iteratively refined screen versions—ultimately merging the best elements of each screen into one.
Using insights from my research, I ideated features with Crazy 8’s, created paper wireframes, and iteratively refined screen versions—ultimately merging the best elements of each screen into one.
Using insights from my research, I ideated features with Crazy 8’s, created paper wireframes, and iteratively refined screen versions—ultimately merging the best elements of each screen into one.
Key design areas:
Key design areas:
Key design areas:
Making a fast movie discovery process with clear movie information
Making a more personalised content recommendation system
Having an easy and intuitive review system and flow
Having simple and intuitive navigation for the main user flows
Having equitable design for users with disabilities or particular needs
Making a fast movie discovery process with clear movie information
Making a more personalised content recommendation system
Having an easy and intuitive review system and flow
Having simple and intuitive navigation for the main user flows
Having equitable design for users with disabilities or particular needs
Making a fast movie discovery process with clear movie information
Making a more personalised content recommendation system
Having an easy and intuitive review system and flow
Having simple and intuitive navigation for the main user flows
Having equitable design for users with disabilities or particular needs
Paper Wireframes
Prototype. 1
I moved on to creating digital wireframes and then compiled the wireframes into a low-fidelity prototype so users could understand and test the product concept.
Prototype. 1 - I moved on to creating digital wireframes and then compiled the wireframes into a low-fidelity prototype so users could understand and test the product concept.
I made sure to consider user needs from research. I wanted it to have easy navigation and to have it work with assistive technologies.
I made sure to consider user needs from research. I wanted it to have easy navigation and to have it work with assistive technologies.
I made sure to consider user needs from research. I wanted it to have easy navigation and to have it work with assistive technologies.
Movie discovery
Reviewing
Location selection
Test
The prototype was tested in a usability study by 5 diverse users who had the characteristics of potential final users.
Test - The prototype was tested in a usability study by 5 diverse users who had the characteristics of potential final users.
A SUS survey was also done. All of this was done to identify tasks where users struggled. An affinity diagram was used to find themes and gather insights for improving the product. Some of the key areas of improvement are shown below.
A SUS survey was also done. All of this was done to identify tasks where users struggled. An affinity diagram was used to find themes and gather insights for improving the product. Some of the key areas of improvement are shown below.
A SUS survey was also done. All of this was done to identify tasks where users struggled. An affinity diagram was used to find themes and gather insights for improving the product. Some of the key areas of improvement are shown below.
Main Insights
1
More intuitive trailer viewing:
Users need better cues to watch trailers for on-schedule movies.
Users need better cues to watch trailers for on-schedule movies.
Users need better cues to watch trailers for on-schedule movies.
2
More intuitive reviewing:
Users need a more intuitive way to access the review section.
Users need a more intuitive way to access the review section.
Users need a more intuitive way to access the review section.
3
Better location page copy:
Users need better-worded cues for the location-changing process.
Users need better-worded cues for the location-changing process.
Users need better-worded cues for the location-changing process.
Iterative Improvements
Added an intuitive "play trailer" CTA:
Changed the play button to “play trailer” for better accessibility, more widely understood by non tech-savvy users.
This creates a more intuitive process and is more screen reader friendly.
Higher contrast colours are easier to see and gets noticed quicker.
Changed the play button to “play trailer” for better accessibility, more widely understood by non tech-savvy users.
This creates a more intuitive process and is more screen reader friendly.
Higher contrast colours are easier to see and gets noticed quicker.
Changed the play button to “play trailer” for better accessibility, more widely understood by non tech-savvy users.
This creates a more intuitive process and is more screen reader friendly.
Higher contrast colours are easier to see and gets noticed quicker.
Added a simple review button:
Added a review call to action button above the fold.
This reduces the effort the user needs compared to scrolling to the bottom.
Above the fold position means it's more likely to catch the user’s attention.
Added a review call to action button above the fold.
This reduces the effort the user needs compared to scrolling to the bottom.
Above the fold position means it's more likely to catch the user’s attention.
Added a review call to action button above the fold.
This reduces the effort the user needs compared to scrolling to the bottom.
Above the fold position means it's more likely to catch the user’s attention.
Simplified copy & added hierarchy:
Changed the wording of assistive copy to a call to action style.
This is shorter and easier to process for the user.
New visual hierarchy better catches attention.
Changed the wording of assistive copy to a call to action style.
This is shorter and easier to process for the user.
The font style has been changed for new visual hierarchy which better catches attention.
Changed the wording of assistive copy to a call to action style.
This is shorter and easier to process for the user.
The font style has been changed for new visual hierarchy which better catches attention.
Prototype. 2
I created mock-ups to reflect the final design and built a high-fidelity prototype to help users test and visualise the concept.
Prototype. 2 - I created mock-ups to reflect the final design and built a high-fidelity prototype to help users test and visualise the concept.
I iterated using the latest design patterns and trends for features like the date selector.
I iterated using the latest design patterns and trends for features like the date selector.
I iterated using the latest design patterns and trends for features like the date selector.
Results
After usability testing, I delivered a final prototype that was more accessible, user-friendly, and aligned with modern design patterns than their existing website.
Results - After usability testing, I delivered a final prototype that was more accessible, user-friendly, and aligned with modern design patterns than their existing website.
01. Find movies based on location 2x faster
Find movies based on location 2x faster than their website. Users don't have to rely on an external search engine to switch showtime location.
Find movies based on location 2x faster than their website. Users don't have to rely on an external search engine to switch showtime location.
Find movies based on location 2x faster than their website. Users don't have to rely on an external search engine to switch showtime location.
02. Easily share critique
Users can read reviews from movie critiques, and share their own reviews. This was absent in 75% of competitors I analysed.
Users can read reviews from movie critiques, and share their own reviews. This was absent in 75% of competitors I analysed.
Users can read reviews from movie critiques, and share their own reviews. This was absent in 75% of competitors I analysed.
03. Personalised recommendations
Users can add movies to a notify list for personalised recommendations—a feature missing in 75% of competitors.
Users can add movies to a notify list for personalised recommendations—a feature missing in 75% of competitors.
Users can add movies to a notify list for personalised recommendations—a feature missing in 75% of competitors.
Interactive Prototype
Interactive - Prototype
Test Final Interactive Prototype
Interactive Prototype - Test Final Interactive Prototype
Test Final Interactive Prototype
Design System
I adopted Savoy's typefaces and colours to maintain brand consistency, while adjusting colour contrasts to meet WCAG guidelines.
Design System - I adopted Savoy's typefaces and colours to maintain brand consistency, while adjusting colour contrasts to meet WCAG guidelines.
Other Work
PadmadKenya
How I redesigned PadmadKenya’s site for a seamless UX and boosted conversions by 30–60%+.
How I redesigned PadmadKenya’s site for a seamless UX and boosted conversions by 30–60%+.
How I redesigned PadmadKenya’s site for a seamless UX and boosted conversions by 30–60%+.
CharmLife
How I transformed start-up CharmLife's web app for better UI/UX and responsiveness in 4 months.
How I transformed start-up CharmLife's web app for better UI/UX and responsiveness in 4 months.
How I transformed start-up CharmLife's web app for better UI/UX and responsiveness in 4 months.
UI Showcase
Explore a vibrant collection of various designs on Dribbble, each one crafted to perfectly suit a unique purpose.
Explore a vibrant collection of various designs on Dribbble, each one crafted to perfectly suit a unique purpose.
Explore a vibrant collection of various designs on Dribbble, each one crafted to perfectly suit a unique purpose.
