Menu
R O L E S & R E S P O N S I B I L I T I E S
UX Research – User Personas, Customer Journey Maps, Competitor Audits & Market Research.
Design Thinking & Planning – Design Sprints & Brainstorming (with accessibility front and centre).
Responsive Website Design (Low Fidelity) – Paper Wireframes & Prototypes, Digital Wireframes & Prototypes.
Responsive Website Design UX Design (High Fidelity) – Visual & Interaction Designs.
Usability Testing – Planning & Executing Usability Studies, Data Collection, Organisation, Pattern Identification & Data Synthesis to gather actionable Insights.
Finally – Design Iterations Based on Usability Study Findings.
T H E P R O B L E M
Currently, cinema ticket booking websites in the UK appear to only sell tickets for one brand of theatre. Other ticket selling websites were found to have a complicated user flow and confusing navigation, forcing movie lovers to buy tickets elsewhere.
R E S E A R C H
As part of my research, I carried out competitor audits to reveal elements of competitor websites that had failed tests in different areas. For example, websites that failed accessibility tests, had a lack of content or their site lacked branding (for example). I have found that conducting these audits can reveal potential ‘gaps in the market’ and highlight opportunities where the new website or app can excel past the competition.
U N D E R S T A N D I N G T H E U S E R
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users had busy lifestyles or wanted to spend less time searching the internet for tickets or movie reviews, and more time watching movies on the big screen. This put many people off going to the cinema all-together or caused them to go to a local theatre hoping to find something worth watching.
Problem statement
As a busy husband and father of 2 children, I want to be able to instantly view current movies out in theatres according to age suitability and user reviews and ratings, see what cinemas are screening my chosen movies and pre-order and pay for the movie from home, so myself and my family can drive straight to my chosen cinema, show our tickets, and watch our chosen movie.
I created a user journey map of Daves’ experience using the site to help identify pain points and improvement opportunities.
T H E S O L U T I O N
A responsive website design and prototype in Adobe XD that sells movie tickets to different theatres local to the user. The website will provide trailers, theaters and the various movies that are screening all in one place, whilst providing the user with a clear and straight-forward navigation and booking process.
I created the site information architecture (IA), like the one shown in the diagram below.
P A P E R W I R E F R A M E S
Next, I sketched out paper wireframes for each page in my website, keeping user pain points like an easy user flow and intuitive navigation in mind.
The home screen paper wireframe variations to the right focus on optimizing user flow and experience for users.
Because users access the internet on a variety of different screen sizes and devices, I began to work on designs for additional screen sizes to make sure the site would be fully responsive.
D I G I T A L W I R E F R A M E S
Moving from paper to digital wireframes made it easy to understand how the redesign could help to address user pain points and improve the user experience.
Prioritising buttons on display in the top bar and hiding additional menu items that were not needed at the beginning of the user flow was a key part of streamlining the initial user flow.
L O W – F I D E L I T Y P R O T O T Y P E
Next, a low fidelity prototype was created in Adobe XD in preparation for usability testing.
Based on insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes was by splitting and rearranging one of the forms on the site so it was more logical, which also made the task less daunting by splitting the form up into small step-by-step chunks.
Click here to see the prototype in your web browser.
Note: Recommended on a desktop screen for this version of the prototype.
U S A B I L I T Y S T U D I E S
Based on insights from the usability study, I made changes to improve the site’s checkout flow.
One of the changes made was by splitting one of the forms on the website so that it appeared simpler and more intuitive. This made booking a movie less daunting for users.
Also following the usability study, I added options for users to browse movies by ‘Top Rated’ and ‘New Releases’, plus altered the main menu label to say ‘Movies’. The new menu provided more movie filter choices, so the user could browse movie releases how they wanted.
H I G H – F I D E L I T Y M O C K – U P S
Below shows the original desktop screen size web pages that were designed using adobe XD. The image below the desktop pages show the same web pages, but at different device screen sizes.
H I G H – F I D E L I T Y P R O T O T Y P E
Once all the pages were made in high-fidelity, I moved on to create a high-fidelity prototype in preparation for usability testing.
The image below shows an overview of the prototype and its connections.
A C C E S S I B I L I T Y C O N S I D E R A T I O N S
During the design iterations following usability studies, I added an option for users to use an in-app screen reader option for accessibility purposes.
Usability studies revealed that this feature would be helpful to many users of all characteristics and abilities. Other considerations implemented are set out below:
I used headings with different sized text and weights to provide visual hierarchy.
I used landmarks to help users navigate the site, particularly for those users who rely on assistive technology.
K E Y T A K E A W A Y S
Participants who used the website at high fidelity and tested the prototype shared that the design was engaging and the flow from watching a trailer to buying tickets was a straight-forward and easy to use process.
I learned that when creating responsive websites, it is important to test the usability of the site especially where touch screens and smaller devices are concerned.
The main take-away here though was that the needs of the users are far more important than having a visually pleasing or eye catching website.