Skip the line, order your cinema snacks in advance
The challenge:
Long queues at the cinema when ordering snacks are negatively affecting customer experience.
Long queues at the cinema when ordering snacks are negatively affecting customer experience.
The solution:
Design a responsive website that allows users to quickly order, track and collect cinema snacks.
Design a responsive website that allows users to quickly order, track and collect cinema snacks.
My role:
UI/UX designer for the Cinesnax website, from conceptualisation to mockups.
UI/UX designer for the Cinesnax website, from conceptualisation to mockups.
Project duration:
March - April 2023
March - April 2023
Tools:
Adobe XD, Google Workplace, pen and paper
Adobe XD, Google Workplace, pen and paper
Google UX Design - Project No.2
1. User Research
The user research and competitive audit for Cinesnax were carried out in Project No.1 of the Google UX Design course.
The target audience are users who enjoy going to the cinema regularly and prefer ordering food online to save time.
2. Wireframing
Paper wireframes
After carrying out a competitive audit and researching some common website layouts, I sketched some rough iterations of the homepage, in desktop, tablet and mobile screens sizes.
I prioritised a quick ordering process to aid users save time, along with a visually balanced structure that can be easily scanned.
Connecting the main user flow: customising and adding items to order, reviewing the order and proceeding to checkout.
Cinesnax website: Low-fidelity wireframes in Adobe XD
3. Interactive Prototype
After establishing the colour palette, typography and images, the high-fidelity prototype comes together.
I went for colours that remind the user of delicious treats and kept the palette small in order to maintain brand cohesion.
Modern typography and images that work well with the website theme tie the mockups together.
Overlays
Users may customise order items and see the nutritional info of a snack item.
They can also choose to save the payment details to save time on the next order.
They can also choose to save the payment details to save time on the next order.
'Select location' screen
'Order confirmation' screen
Prototypes
Connecting the main user flow: selecting location -> browsing menu -> customising snack item -> summary and payment -> confirmation screen.
4. Responsive Design
Homepage elements were modified to seamlessly adapt to a mobile screen, without distorting text, images or buttons.
View the complete mockups here.
5. Usability studies
Two rounds of usability studies were conducted for the Cinesnax responsive website. Findings from the first study helped guide the designs from wireframes to mockups.
The second study involving the high-fidelity prototype revealed what aspects of the mockups needed refining.
The second study involving the high-fidelity prototype revealed what aspects of the mockups needed refining.
6. Ensuring Accessibility
• Ensured colours and contrasts are accessible to users with vision impairments and avoided relying on colour as the sole factor communicating important information.
• Implemented a familiar UX and visual components, achieving an intuitive navigation throughout.
• Multiple language options make it user-friendly for non-native speakers.
Going forward
Impact
The Cinesnax website makes users feel like their wants and needs are being met when ordering cinema snacks online.
“The website is easy to use and the steps from start to finish are straight forward."
- Peer quote from usability study.
- Peer quote from usability study.
What I learned
During this project I learned about common website layouts and how these can be used
to create a visually interesting and intuitive product.
to create a visually interesting and intuitive product.
Next steps
• Finish designing the full prototype and add conduct a third usability study.
• Conduct more user research to determine any new areas of need.
Want to get in touch? Drop me a line.
Thank you!
