Sally's Snacks Website

Our team was tasked with developing a user-friendly menu website for Sally’s Snacks, a popular beach-side snack shop with a target audience of customers aged 19-35. We aimed to ensure that the website offered a seamless and accessible ordering experience for all users. By prioritizing user needs and focusing on simplicity and ease of use, we successfully created a website that supports Sally's Snacks' goal of making their food easily accessible to everyone.

Project duration:

January 2023 - February 2023

Project overview

The problem:

The existing online ordering websites lack customization options, have cluttered designs that make it difficult for users to browse through items, and often have confusing checkout processes.

The goal:

Design Sally’s Snacks’ website to offer a seamless ordering experience for all customers by implementing an intuitive and accessible design. The website will feature clear navigation and an easy-to-use checkout process to minimize frustration and increase customer satisfaction. By prioritizing accessibility, the website will be designed to be easily used by all customers, regardless of their level of ability.

My role:

Lead UX designer, Lead UX researcher, Visuals, Interactions

My responsibilities:

Conducting interviews and user research, paper and digital wireframes, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive designs

User Research

Through conducting interviews and creating empathy maps, I gained insights into the needs and frustrations of Sally's Snacks' target users who order takeout or dine-in at least once a week. One common trait of these users is their preference for convenience when it comes to ordering food online. Some are too busy to cook, while others lack the necessary culinary skills to make their favorite dishes to a certain quality.

One pain point identified was the difficulty of navigating to find specific pages on existing online ordering websites, as well as the inconvenience of having to log in to place an order. These challenges often resulted in user frustration and could deter them from using the website in the future.

To address these issues, I aimed to design a website that is easy to navigate and provides an intuitive checkout process. The goal is to provide a seamless online ordering experience for Sally's Snacks' customers, which will help to increase customer retention and satisfaction.

Copy of Google UX Design Certificate - Ying persona [Example].png

Problem statement:

Julia is a busy business manager with two toddlers who needs intuitive and fast navigation and checkout so they can spend more time with their children and work on creating a work-life balance.

User journey map

As I create a user journey map for the persona of a busy professional who frequently orders food online, I'm considering each step of their journey from start to finish. I want to ensure that the process is seamless and user-friendly, with clear navigation and easy-to-use features. By putting myself in the shoes of the user, I can identify pain points and areas where improvements can be made to enhance the overall experience. Through research and testing, I'm confident that I can create a user journey map that meets the needs and expectations of this persona, and ultimately leads to increased customer satisfaction and loyalty.

Design

Sitemap

To tackle the issue of difficulty with navigation, I focused on creating an intuitive and easily navigable website. To achieve this, I carefully analyzed the information architecture and made decisions accordingly.

My main goal was to create a website that could be easily understood by users, regardless of their technical skills. I believe that a well-organized sitemap can go a long way in enhancing user experience, and that's why I paid close attention to every detail. The end result was a website that offered a seamless user experience, and I'm confident that it will make ordering food much more convenient and hassle-free for our users.

Wireframing

Paper wireframes

To create the paper wireframes for the food order website, I first sketched out each screen while keeping navigation, interaction, and overall flow in mind. I wanted to make sure that the wireframes reflected the user journey map and the site map that I had created earlier. I focused on making sure that the layout was clear and easy to understand, and that the design was consistent throughout. After creating the initial wireframes, I tested them with users to get feedback and make any necessary changes before moving on to the next phase.

Responsive Designs

Additionally, I created sketches for responsive designs suitable for both smartphone and tablet devices to ensure that the website could be easily accessed by all users regardless of the device used to view it.

Design

Digital wireframes

Transitioning from paper to digital wireframes, I aimed to maintain a consistent design across all screen sizes, ensuring that the app feels familiar to users regardless of the screen they're using. Easy navigation remained a top priority throughout the wireframing process, and I focused on creating a user-friendly experience that makes it easy for users to find what they need and complete their orders quickly and efficiently.

When creating the digital wireframes for the mobile version of the food order website, I wanted to maintain the same design and style as the desktop version. However, I also needed to keep in mind the smaller frame and the issue of button sizes. To address this, I decided to use a menu instead of individual buttons on the mobile version to make navigation easier for users. Despite the smaller screen size, I made sure to keep easy navigation as a top priority for a seamless user experience.

Low fidelity prototype

Using Adobe XD, I developed a low-fidelity prototype that connected all the screens required for the primary user flow of adding an item to the cart and placing an order. During this process, I received feedback on the initial designs, with suggestions on button placement and page organization.

I carefully considered the feedback and implemented the necessary changes to create a more user-friendly experience for the customers. Based on the feedback, I developed a high-fidelity mockup that reflected the updated design changes. These iterations allowed me to refine the design and ensure that it met the user's needs and expectations.

View the low-fidelity prototype here
Figma mirror link

Usability study

Study Type: Moderated Usability Study

Location: United States

Participants: 5 participants

Time: 20-30 minutes
The moderated usability study found that:

Users had no way of changing the amount of items in the cart before or on the checkout page.
Users were only able to find the price after navigating to checkout
Users wanted a fast way to find an item on the menu

Mockups & changes

Changes

Based on the insights from the usability study, I made changes to the cart and ordering section to improve user flow.

Some of the changes include adding a “-” and “+” icon to change the quantity of items in the cart and adding a custom tip section.

To improve user flow further, I added the option to change quantity on the order page, a quick cart option, a search function, and section filters.

Mockups

Mockups - mobile devices

To ensure a smooth and consistent user experience across all devices, I created screen variation mockups with navigation in mind. The goal was to make sure that the website is easily navigable for all users regardless of the device they are using. This involved designing mockups for smaller screens, such as smartphones and tablets, to ensure that the website was easy to use on all devices. By creating these mockups, I was able to identify any potential issues with the navigation process and address them before moving forward with the development of the website. Overall, the screen variation mockups helped to ensure a seamless user experience for all users on any device.

High-fidelity prototype

My high-fidelity prototype was created using Adobe XD and followed the same user flow as the low-fidelity prototype. However, I made some improvements based on the feedback received from the usability study, including additional screens and changes to the design.

In the high-fidelity prototype, I paid close attention to the visual design, including typography, color palette, and imagery, to create a visually appealing and cohesive experience for the user. I also ensured that the design was consistent across all screens and devices, and that the user flow was intuitive and easy to follow.

View the high-fidelity prototype here

Accessibility considerations

Used varying text sizes for hierarchy and readability.
Used landmarks, alt text, and descriptions on photos for screen readers and users using other assistive technology.
Used varying colors with different shapes and icons for a clearer call to action.

Takeaways

Impact:

After conducting usability testing with our target users, we received feedback that our design was intuitive and easy to navigate. They appreciated the visual and text descriptions, which created an engaging atmosphere and clear visual hierarchy. This feedback was encouraging as it meant we were able to effectively meet our goal of creating an accessible and user-friendly website for Sally's Snacks. Additionally, users found the website to be visually appealing and engaging, which contributed to their overall positive experience.

What I learned:

Through my experience in designing the food order website, I realized that considering the different screen sizes is crucial for a seamless user experience. I found that even small changes in the layout and font size could affect the website's cohesiveness and engagement. It's essential to make sure that the website is visually appealing and user-friendly, regardless of the screen size. This can be achieved by using responsive design and testing the website on multiple devices. By keeping these factors in mind, I was able to create a cohesive and engaging experience for the users.

Next steps:

Conduct another round of usability studies to determine if any pain points still remain and if previous pain points have been thoroughly addressed.
Conduct further research with accessibility technologies and those who use them.
Identify any areas where additional helpful features could be added.

Thank you for your time reviewing my work on Sally’s Snack's responsive website! If you would like to see more or get in touch please contact me at:

Email: connieliu000@gmail.com

Website: https://connieliu000.wixsite.com/connie-liu

Linkedin: https://www.linkedin.com/in/liu-connie/