Zaidy’s Pizza

Project type: Responsive Web Design

Duration: 65 Hours

Role: UX/UI Designer, Researcher

Tools: FIGMA

Context

This project was a redesign of the website for "Zaidy's Pizza," a local pizzeria founded in honor of my grandfather.

Background

Zaidy's Pizza offers an authentic NY style slice right here in Israel. Zaidy's has all of the classic dishes you have been missing from NY. Since it opened, Zaidy's Pizza has been serving delicious pizzas crafted from fresh ingredients. With a warm and inviting ambiance, the pizzeria has earned a loyal following within the community.

Goal

My goal was to create a user-friendly, functional, and visually appealing website, in order to enhance customer engagement and drive more business. 

EMPATHIZE

✦ Research ✦

✦ Competitor Analysis ✦

✦ User Interviews ✦

✦ Affinity Mapping ✦

✦ User Personas ✦

Research

The first step in my process was to dive deep into understanding what users genuinely felt were the pain points with the current website. I knew I had my own ideas and impressions about the changes that needed to be made, but I really wanted to stay open-minded and receptive to fresh insights. So, I actively sought out feedback from the community—those who interact with the store and site on a regular basis. By doing this, I hoped to uncover the real issues and frustrations users faced, beyond my own perspective. I wanted to make sure that the design improvements were grounded in actual user experiences and needs, rather than just my assumptions. Listening to the users allowed me to gather invaluable insights that would guide the redesign process, ensuring it truly addressed their concerns and enhanced their overall experience with the website.

Objectives

Identify the needs and preferences of the target audience regarding online ordering and restaurant information

Understand why people do and don’t choose to eat and order from Zaidy’s

Learn the pain points users experience when using the website

Methodologies

I used two modes of research as my starting point: Competitor Analysis and User Interviews.

Zaidy's is in a community with other local competitors, each vying to be the go-to pizza store. My initial step was to take a close look at what these other pizza stores were offering—and more importantly, what they weren't. I conducted a thorough comparison, examining the strengths and weaknesses of each competitor. This detailed analysis revealed a significant gap: none of Zaidy's competitors had a robust online presence. It became clear that this was an opportunity for Zaidy's to step up and distinguish itself from the rest. By focusing on enhancing Zaidy's digital footprint, we could help them tremendously. This realization motivated me to create a compelling online experience for Zaidy's, one that would not only meet but exceed what customers were looking for and set Zaidy's apart from the other stores.

Competitor Analysis

I conducted a series of interviews with locals ranging in age from 16 to 50, aiming to gather insights and impressions about both the website and the store. My goal was to understand their thoughts and experiences more deeply, so I asked them to share their recent interactions and any memorable moments they had with Zaidy's. Additionally, I presented the current site to them and observed how they navigated and interacted with it in real-time. This hands-on approach allowed me to see firsthand where they encountered difficulties, what they enjoyed, and what aspects they found frustrating. By watching their interactions and listening to their feedback, I learned information that would be crucial in refining the website to better meet their needs and expectations. These interviews provided a rich, user-centered perspective that was invaluable in shaping the redesign process.

Interviews

Insights and Data

Some customers prefer to order in-store while others prefer ordering online

The current ordering menu is overwhelming and difficult to navigate for users

Users would like to see more pictures incorporated into the website

Before the ordering page, users want to see a clickable general menu

Affinity Mapping

Creating an affinity map was a crucial step in the process, especially since users seemed to be quite divided in their opinions. This method allowed me to organize and synthesize the diverse range of feedback in a meaningful way. By grouping similar insights and comments together, I could identify common themes and patterns that might not have been immediately obvious. One clear takeaway from this exercise was that a redesign of the menu was highly appreciated by most users. Despite their varied opinions on other aspects, the consensus around the need for a more user-friendly and visually appealing menu stood out. This insight provided a focused direction for one of the key areas to improve. The affinity map not only helped in clarifying the users' needs but also in prioritizing the changes that would have the most significant impact on their experience.

User Personas

After analyzing my research, it became clear that creating two different personas was essential to effectively capture Zaidy's diverse customer base. The data showed that the needs and preferences of our users varied significantly. By developing two well-defined personas, I could better represent the unique characteristics and behaviors of our primary customer base and help address the differences. This strategy helped ensure that the website and overall customer experience would resonate more deeply with both. These personas served as guiding tools throughout the design process, helping to keep the focus on the real users and their varied needs, ultimately leading to a more inclusive outcome.

DEFINE

✦ Point of View Statement ✦

✦ How Might We Questions ✦

✦ Project Goals ✦

✦ Feature Set ✦

The Point of View Statement

With much of my data organized and thoroughly analyzed, it was time to pinpoint the most prevalent issue that users were experiencing. Considering the diverse range of users, I focused on finding common ground to identify the core problem that needed to be addressed. Through this process, it became evident that the widespread pain point was the lack of information and proper presentation of the menu. Users consistently struggled to find and view the menu easily, often feeling frustrated by the lack of accessible information. Recognizing this as a critical issue, I knew it was essential to develop a clear and effective solution. To guide this process, I formulated three specific "how might we" questions. These questions served as a strategic framework to direct my efforts in solving the problem, ensuring that the solution would be both user-centered and impactful. By addressing these guiding questions, I aimed to create a more intuitive and user-friendly menu experience for all of Zaidy's customers.

POV Statement

I’d like to explore ways to make Zaidy’s website informative and efficient to help guide users in making decisions when ordering food. 

HMW Questions

How might we showcase the menu in a way that is easy for users to read and find?

How might we design the homepage so that users can access the information they are looking for?

How might we present and showcase Zaidy’s website so that users feel informed on what Zaidy’s has to offer? 

Project Goals

At this point, it was crucial for me to sit down and concretize both the user goals and my business goals. Given that I was collaborating with Zaidy's, I took the time to sit down with the owner to understand and prioritize their objectives. This discussion was essential in aligning my design strategy with the business's vision and priorities. By clearly defining and prioritizing the business goals, I could ensure that my user goals were not only well-informed but also supportive of Zaidy's overall mission. This alignment kept me on track, ensuring that the design solutions I proposed would meet the needs of both the users and the business. This approach allowed for a more cohesive and effective design process, ultimately leading to a website that served both the customers and the business in the best possible way.

Feature Set

I had to carefully decide which features were essential and then prioritize them effectively. Given the time constraints, it was crucial to be mindful of the "must-have" features and evaluate which ones truly fit into this category. This meant taking a step back and really thinking about what was absolutely necessary for the user experience and the business goals. I had to balance the need for essential functionalities with the limitations of the project timeline, ensuring that the most impactful features were implemented first. This prioritization process involved weighing the benefits of each feature against the time and resources required to develop them, making sure that every decision contributed to creating an efficient and user-friendly website.

IDEATE

✦ Site Map ✦

✦ User Flows ✦

✦ Low Fidelity Wireframes ✦

✦ Branding ✦

User Flow

Based on the feedback I gathered, it was clear that the area of the site needing the most improvement was the menu and ordering process. Given this, I prioritized this aspect above all else. I dedicated time to meticulously mapping out the necessary steps users would need to take to view the menu and complete an order. My goal was to design the flow in as few steps as possible, ensuring it remained intuitive and user-friendly. I analyzed each step from the user's perspective, aiming to simplify the process while maintaining clarity and ease of use. This approach not only addressed the users' primary pain points but also aligned with the business objective of facilitating easier online ordering.

Low Fidelity Wireframes

Given the fact that most users opt to use their phone to view the menu and place an order, I opted to prioritize designing the screens for mobile devices. I approached the design process, incorporating both heuristic principles and insights gathered from my research. By blending established design guidelines with real-world user data, I aimed to create interfaces that seamlessly aligned with user expectations and behaviors.

Branding

I had to work within the constraints of Zaidy’s existing logo and color scheme, as they had recently undergone a rebranding. While this limited the changes I could make, it also provided a clear direction and challenged me to be creative within those boundaries. Ultimately, these constraints helped me focus on making the most out of what was available and finding alternative ways to enhance the user experience while staying true to Zaidy’s new brand identity.

PROTOTYPE

✦ High Fidelity Wireframes ✦

✦ Final Prototype ✦

High Fidelity Wireframes

It was finally time for me to direct my attention to create my high-fidelity wireframes. Following careful planning to ensure precision in every aspect, I developed screens that closely resembled the final product. This stage in the design process was so gratifying, as I worked to produce a range of screens ready for testing and feedback. I felt a sense of anticipation to gauge user reactions as they interacted with the design.

Final Prototype

TEST

✦ Usability Testing ✦

✦ Priority Revisions ✦

✦ Final Screens ✦

✦ Next Steps ✦

✦ Conclusion ✦

Usability Testing

I conducted usability tests with five users who had previously ordered from Zaidy’s. My primary focus was on a single task flow: the process of placing an order on the website from beginning to end.

To measure the success of the website redesign, I noted the following key metrics:

  • Time spent on task

  • Number of errors

  • Ability to complete the task

Success Metrics Results

  • All 5 users were able to navigate through the flow without any mistakes 

  • All 5 users said the design, was simple and easy to use 

  • All 5 users said they were able to complete the task without getting stuck.

Key Findings/ Observations

  • 3 out of 5 users used the menu tab to scroll and find the category they were looking for.

  • 4 out of 5 users still went to look at the menu before ordering.

Priority Revisions

After analyzing the results of the usability tests, I identified several priority changes to implement.

Create a drop-down menu in the tabs section

Add a shortcut list of common requests

Update “special requests” accordingly

Final Screens

Next Steps

  • Handoff the new designs to developers to redo the website

  • Align with product and tech on the metrics to gain feedback on the site and performance

  • Measure the impact of the new website

Conclusion

Working on Zaidy's Pizza website redesign was a unique experience, highlighting the challenges and opportunities of collaborating with an established business. Navigating brand constraints, such as adhering to the existing logo and color scheme, required creative solutions to enhance user experience within defined boundaries. The project underscored the importance of aligning design goals with business objectives, ensuring that the final product not only met user needs but also supported Zaidy’s vision. This experience enriched my understanding of real-world design limitations and the importance of strategic, user-centered solutions.