loncine
website design
LONCine is a one-stop movie ticket-purchasing platform that offers detailed information about movies playing in all cinemas across London. Customers can easily compare the prices and available showtime of movies in different cinemas and conveniently purchase tickets for desired times and locations from the platform. The website aims to provide a user-friendly interface, ensuring a seamless experience for users to explore and stay up-to-date with all the current and upcoming movies across different cinemas in the area.
My Role: UX designer designing the website for LONCine from conception to delivery
Design Platform: Adobe XD
This project is one of the coursework (Design a Responsive Website) from Google UX Design Professional Certificate, not a project for a real organisation.
The Problem
Whenever users want to watch a movie in a cinema, they have to go to the official website of different cinemas to check the available showtime of movies and compare the price, time and location in order to make the purchase decision. The process is somehow annoying and time-consuming.
The Goal
The website serves to provide a platform for users to easily compare the available showtime, prices and location of movies they want to watch, in order to make the best purchase decisions. The platform not only provides detailed information about showing movies but also upcoming movies, also remind customer when new movies are showing.
User Research
1
Interaction
Small buttons on cinema websites make item selection difficult, it's frustrating that users need to navigate in between websites to compare the offering
2
Time
There are limited available timeslots for a movie at desired cinema location
3
Pricing
The price of movie tickets only shown at a very late stage of the website navigation
4
Experience
Cinema websites don’t provide an engaging browsing experience
Personas
JAM
Age:
Education:
Hometown:
Family:
Occupation:
22
Bachelor of Psychology Manila, Philippines
Single with a dog
Full-time student, part-time research assistant
“Watching movies in a cinema is my escape from my responsibilities”
pROBLEM sTATEMENT
Jam is a full-time psychology student and part-time research assistant who needs watching movies at the cinema to relax because she got stressed from schoolwork and other responsibilities.
gOALS
-
Become a psychologist
-
Bigger buttons and improved placement for more accessible navigation
-
Less cluttered navigation and layout for easier browsing
-
More options of movies and cinemas close to her
fRUSTRATIONS
-
“Cinema website layouts and navigation are complicated and confusing.”
-
“Why is it so difficult to find the right timing for a movie in a good location?”
-
"I hate that i need to check different websites for comparing their offerings"
BIO
Jam is a 22-year-old psychology student and full-time student who lives with her parents with a dog. She studies during the day and works as a research assistant at night and during weekends, and she enjoys watching movies at the cinema during her free time to relax.
She is frustrated with the movie ticket purchase on mobile websites because of the size of the buttons and complicated navigation. She also feels disappointed that sometimes she couldn’t find good movies to watch instantly at cinema near her.
Personas
kevin
Age:
Education:
Hometown:
Family:
Occupation:
35
Master of Civil Engineering London, UK
Married with 2 kids
Senior Civil Engineer
“I enjoy spending time with my kids, especially watching movies with them”
pROBLEM sTATEMENT
Kevin is a Senior Civil Engineer with 2 kids who needs to watch family movies with the 2 little girls because watching a movie together helps to build family bonding.
gOALS
-
Be able to spend quality time with his kids
-
Less cluttered navigation and layout for easier browsing
-
More options for family movies
-
More information about the cinema
fRUSTRATIONS
-
“I wish there are more choices of movies that are suitable for family.”
“Cinema website layouts and navigation are complicated and confusing.” -
“I struggled with the buttons and seat selection for purchasing the ticket”
BIO
Kevin is a Senior Civil Engineer who lives in London, he is also a father of two lovely girls. He works during the day and spend time with his kids at night and during weekends. Sometimes he will bring the kids to watch movies and play in the mall nearby.
He finds it difficult to purchase tickets on mobile websites because of the size of the buttons and complicated navigation. He also feels disappointed that sometimes there are not many movie options for family.
SITEMAP
-
Difficulty with website navigation and juggling around different cinema websites are pain points for users, so I create a sitemap based on the frustration.
-
-
My goal here was to make strategic information architecture decisions that would improve overall website navigation and combine all information from different cinemas. The structure I chose was designed to make things simple and easy.
PAPER WIREFRAMES
-
Taking the time to sketch the iterations of each screen of the website on paper ensured that the elements to be included in the digital wireframes would be well-suited to address user pain points.
-
The home screen paper wireframe variations to the left focus on optimising the browsing experience for users, and to make sure the website interface is easy to understand.
Refined paper wireframe
PAPER WIREFRAMES
SCREEN SIZE VARIATIONS
Because users access the site of LONCine on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
digital WIREFRAMES
-
Moving from paper to digital wireframes, I made sure to do screen designs based on feedback and findings from the user research, also bear in mind to address user pain points and improve the user experience.
-
I also made sure all graphics in my design aligned and the indication for action is clear by prioritising useful button locations and visual element placement on the home page.
-
Quick search for movie ticket
-
Easy access to movie currently showing, and the website is optimised for easy browsing by images and audience rating
-
Providing options with detailed information was a key user need to address in the designs, also equipping the website to work with assistive technologies should be considered.
-
allow users to learn more about the movie by checking the trailer, the synopsis, genre, rating, producers & casts and reviews. Suggestion of movie will also be available for personalised experience
-
Users could check the showtime of selected movie and know the prices of different timeslots at different cinemas
-
Seat selection with the floor plan and selected movie showtime information
DIGITAL WIREFRAMES
SCREEN SIZE VARIATIONS
Mobile Version
Desktop Version
LO-FIDELITY PROTOTYPE
Using the completed set of digital wireframes, I created a low-fidelity prototype by connecting all the screens involved in the primary user flow. The primary user flow I connected was checking the details of the movie, the showtime at different cinemas, choosing the seats and proceeding to check out, so that the prototype could be used in a usability study.
At this point, I received feedback on my designs from potential users about things like the placement of buttons and the scale. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
USABILITY STUDY
Study type:
Unmoderated usability study
Location:
France, remote
Participants:
5 participants
Length:
20-30 minutes
These were the main findings uncovered by the usability study:
-
Users found the ratio scale of the screen is too big for navigation in general.
-
Users expect to have more alternatives to purchase tickets and warning messages when they proceed with the purchase for tickets.
-
Users are confused about the labelling and function of features
MOCKUPS
Based on the insights from the usability study, I made changes to the ratio scale of the website to make it more comfortable for users to navigate around the website. Users do not need to keep scrolling down for browse the website.
Before Usability Test
I added alternative route in the home page for users to quickly access the available showtime of selected movie with desired location and time.
After Usability Test
After Usability Test
To increase the accessibility and understanding of different features of the website, I added a path for reaching the watch list and a profile page for users to have better manage their user journey within the platform
key mockups
Showtime
Check Out
Order Confirmation
Seat Selection
Order Summary
Ticket Selection
List of Cinema
MOCKUPS
SCREEN SIZE VARIATIONS
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimise the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
Mobile Version
Desktop Version
high fidelity prototype
The high-fidelity prototype presented more than one user flows, including the design changes made after the usability study. Users could purchase a movie ticket through different pathways, either through a quick search or a direct comparison. And there is a user profile page for users to check their watch list, liked movies, tickets and their activity histories.
accessibility considerations
Used headings with different-sized text for clear visual hierarchy
Used imagery to help all users better visualise the movie and seating of the cinema
Designed the site with alt text available on each page for smooth screen reader access
TAKEAWAYS
impacts
Our target users shared that the design was intuitive to navigate through, and they found it useful and time-saving if they are looking for a movie to watch in a cinema.
learn
I learned that even a small design change can have a huge impact on the user experience. Making good use of the sitemap to helps a lot in planning the user journey. Also, I realised that getting feedback is very important for creating better iterations and designing products that address the needs of users.
NEXT STEPS
1
Conduct follow-up usability testing on the website, collect feedback to refine the design
2
Develop features like suggestion based on location, diversified filter options
3
Identify any additional areas of need and ideate on new features
Thank you for your time reviewing my work on the LONCine Website!