Snacker Website

Snacker is a responsive snack-ordering website for moviegoers who don’t like to wait in queues to order at the counter.

Role:
UX Designer & Researcher

Deliverables:
UX Research, Wireframes & High-fidelity Prototypes

View Prototype Learn More

Empathizing and Defining User Needs

Snacker website is based on the research gathered for the Snacker app.

Following the design thinking process, I started by empathizing with the users to understand their needs, frustrations, and experiences. Deriving from that research I defined the user problems and ultimately built the goal statement for the app.

Follow the link for a more detailed case study.

LEARN MORE

My Design Process

After developing user personas and understanding user journeys, I developed the site map for the website.

The main strategy behind this information architecture was to provide an intuitive navigation for the user. So I developed a simple user flow for the website to allow easy and simple navigation throughout the user journey.

Designing for Multiple Screen Variations

I developed multiple screen variations for the Snacker website including desktop and mobile screens to make responsive designs.

Desktop Version

I started sketching paper wireframes to visualize the website design while considering user pain points. After multiple variations, I refined the design for a clean, concise, and easy-to-understand user flow.

Mobile Version

Since Snacker’s customers access the website from various devices, I also developed a mobile screen size variation of the wireframe to make it a fully responsive website.

Creating Digital Wireframes

Upon feedback, I designed the digital wireframes for both screen variations while considering the user’s pain points.

My goal was to bring user’s attention to priority tasks by strategically choosing useful elements locations.

Snacker Web Designs in Digital Wireframes

Transforming Wireframes into Prototypes

To design attractive and user-friendly prototypes, I carefully chose the typography and iconography keeping users' needs and product image in mind. I also received feedback from my peers and implemented several of their suggestions in my designs.

The user flow begins with setting the cinema location on the homepage and ends with ultimately placing an order. Since one of the features of Snacker offers is an option to edit or cancel the current order, additional screens were created to demonstrate both user flow directions.

Testing Prototypes by Conducting Usability Studies

Based on the research insights, I made several changes to the design to address the users’ pain points based on priority. I conducted two rounds of unmoderated usability studies with five participants.

Since the add button created confusion for the users, I placed the button under each item within the card and made the design flow more intuitive.

To provide user feedback on adding items to cart, I also added the quantity on the cart that would reflect that the items have been added by the user.

Designing Multiple Screen Sizes

I also considered screen size variations for a mobile website to cater to users' needs for different devices. This would allow a seamless user experience across devices.

Prioritizing User Accessibility in Design

Contrast Ratio

I used high contrast sensitivity colours with 4.5:1 pass ratio that would enhance the readability of the website.

Navigation

I used landmarks to assist users navigate the site using assistive technologies.

Hierarchy

I used headings with variations in text sizes to show clear hierarchy of elements which makes navigation easy

What I Takeaway from the Project

Impact

Users expressed that Snacker website was easily to follow with seamless navigation and easy to use interface.

Images and high contrast further enhanced the website’s visual appeal.

What I Learnt

Following the design thinking process, I realized that user feedback and iterations are crucial for designing a user-friendly product.

Also, designing responsive websites is essential for optimal user experience.

Next Steps

I would conduct a follow-up usability study to assess if the users’ needs are sufficiently addressed.

I would also obtain additional feedback from other UX designers and improve my designs.

I would further design for other devices such as tablets to provide a fully responsive experience to the users

Let's Collaborate!

I am always looking for new opportunities to collaborate with businesses and individuals who share my passion for creating great user experiences. If you have a project in mind or just want to say hello, feel free to drop me a line.