Snacks at your fingertips.
Project details
Challenge:
Long queues at the cinema when ordering snacks are negatively affecting the customer experience.
Long queues at the cinema when ordering snacks are negatively affecting the customer experience.
Solution:
I designed a mobile app that allows users to quickly place and collect orders, either at the cinema or in advance if their arrival.
I designed a mobile app that allows users to quickly place and collect orders, either at the cinema or in advance if their arrival.
Role:
UI/UX Designer for the Cinesnax app, from conceptualisation to delivery.
UI/UX Designer for the Cinesnax app, from conceptualisation to delivery.
Project duration:
November 2022 - March 2023
November 2022 - March 2023
Tools:
Figma, Adobe XD, Google Workspace, Pen & Paper
Figma, Adobe XD, Google Workspace, Pen & Paper
Google UX Design: Project No. 1
1. User research
Target audience
Anyone who enjoys going to the movies regularly but has little time
or is unable to wait in line for prolonged periods of time.
or is unable to wait in line for prolonged periods of time.
Pain points
• Users don’t like standing in the queue or showing up extra early
at the cinema to order snacks
• Cinema-goers want to be sure that their favourite popcorn will be available when they get there
• Language barrier may make it difficult for some to order snacks
at the cinema to order snacks
• Cinema-goers want to be sure that their favourite popcorn will be available when they get there
• Language barrier may make it difficult for some to order snacks
Personas
Personas were created in order to better understand potential user needs when ordering snacks at a cinema. View them here.
User journey maps
Next, potential areas of improvement were identified with the help of user journey maps. View them here.
2. Wireframing
Paper wireframes
After conducting a competitive audit, the homepage wireframes were sketched on paper, making sure to include all the necessary components.
Low-fidelity wireframes
The low-fidelity prototype connected the primary user flow of customising and adding menu items to order, and checking out.
Homepage
Menu item overlay
3. User Flows
View the low-fidelity prototype:
https://www.figma.com/proto/RqJncNj1Tq54MqU0R5CH0F/CineSnack-%3A-Wireframes?type=design&node-id=156-5670&scaling=scale-down&page-id=155%3A2041&starting-point-node-id=156%3A5670
https://www.figma.com/proto/RqJncNj1Tq54MqU0R5CH0F/CineSnack-%3A-Wireframes?type=design&node-id=156-5670&scaling=scale-down&page-id=155%3A2041&starting-point-node-id=156%3A5670
5. Interactive Prototype
Interactive elements and smooth animation enhances the high-fidelity prototype, in order to provide a delightful experience for the user.
View the high-fidelity prototype here:
https://www.figma.com/proto/RqJncNj1Tq54MqU0R5CH0F/CineSnack-%3A-Wireframes?type=design&node-id=269-4321&scaling=scale-down&page-id=214%3A2572&starting-point-node-id=269%3A4321
https://www.figma.com/proto/RqJncNj1Tq54MqU0R5CH0F/CineSnack-%3A-Wireframes?type=design&node-id=269-4321&scaling=scale-down&page-id=214%3A2572&starting-point-node-id=269%3A4321
6. Usability Studies
Two rounds of usability studies were carried out during this project to assess app functionality and how easy the users complete tasks within the Cinesnax app.
Reducing the number of icons in the nav menu, and replacing the Pizza icon with a Popcorn icon, to improve navigation.
Users wanted a way to track their order, so an additional screen with order details was created, with the option to edit and cancel the order within a time limit.
7. Ensuring Accessibility
• Used descriptive text labels for buttons, avoiding using ambiguous symbols or icons that may be confusing to users with cognitive impairments or language barriers.
• Provided proper labels for UI elements, ensuring correct reading order, and making sure that all content is accessible through screen readers.
Going forward
Impact
The Cinesnax app provides convenience to cinema-goers by allowing them to order snacks from their smartphones. It reduces potential errors in order taking, and ensures that customers receive their snacks promptly, enhancing customer satisfaction levels. The app can also increase revenue for cinemas, by suggesting combo deals or limited-time offers.
What I learned
During this project I gained a deep understanding of target users, their needs and behaviours. I particularly enjoyed creating the Cinesnax brand and designing active components, functional wireframes and visually appealing prototypes in Figma.
Next steps
• Increasing accessibility by creating more versions in other languages, as well as adding alt text to images to help users with vision impairments.
• Finish designing the homepage, along with the rest of menu items and overlays to complete the final prototype.
• Conduct additional usability studies to determine further areas of improvement.
• Conduct additional usability studies to determine further areas of improvement.
Want to get in touch? Drop me a line.
Thank you! Your message has been submited.
