Hungry? Get your slice of design thinking here.

Disclaimer: You are about to read a bootcamp case study.

A Slice of Madrid

Our stakeholder was the owner of a charming pizzeria in Madrid named Opera Pizza. While the restaurant features beautiful branding, its current website faces some user experience issues.

So Jorge, Cilia, Patricia, and me formed a new team to tackle this challenge!

Like me, Jorge was a graphic designer, but he is a veteran with 20 years of experience in the advertising industry. Patricia brought her background in hospitality. And Cilia is currently a tattoo artist. Despite our different backgrounds, we get along very well and were all excited to start a new project.

Photo by Klara Kulikova

Case Study Overview

Meeting the stakeholders
People and pizza
Rewrite a universal problem
From idea to product
User testing
Key learnings

Meeting the Stakeholders

Before the meeting, we conducted a benchmark and competitive analysis to gain a deeper understanding of the business.

Pizzeria Websites

Most pizzeria websites in Madrid use warm color palettes. Fast-food chains like Domino’s and Telepizza, in particular, often rely on bright red to suggest discounts and low prices. In contrast, higher-end restaurants tend to incorporate green and black to convey a more prestigious appearance.

By analyzing the user flow for ordering a pizza on these websites, we found that menu pages are often overly complex, with more than a dozen categories and intrusive pop-ups.

People and Pizza

On day 4, we just learned about quantitative research, and the other groups were busy writing their survey questions. Shifting focus to writing survey questions felt like we’d have to abandon our earlier work and start from scratch.

As a response, half of the team impatiently moved on to creating mid-fidelity prototypes, while the other half, including myself, stressed over the incomplete research.

After much confusion and anxiety over finding the “correct” process, we pushed through and embraced the idea that UX is not linear.

We organized our tasks in Kanban to have an overview of our progress; we also established sub-teams (Research, Design, & Prototype) to enable working on different aspects of the project in parallel.

Finally, we shared the survey in a dedicate Slack channel of the bootcamp, as well as with friends, family, and neighbors… Thankfully, pizza is universally popular in Europe.

The Pizza Survey Results

While waiting for survey results, we also conducted our user interviews. While the survey questions focused on understanding people’s habits and preferences around pizza, the user interviews aimed to uncover deeper emotions and personal memories associated with it…

“ I really like the restaurant experience, except for other situations where you don’t have time like you’re at work, or when you’re with friends and suddenly you get hungry...”

Rewriting a Universal Problem: “Being Hungry”

The problem statement was the most difficult task we had to do. On one hand, we had used 70% of the time allocated to our project. On the other hand, pizza and food delivery are so universal that we lost sight of our target user and their unique pain points.

With hindsight, I would have prioritized working more closely on the restaurant’s pick-up system, particularly catering to tourists, who make up 80% of the pizzeria’s customers. However, for the sake of this case study, let’s focus on what we actually did: we built a persona.

From User Persona to Problem Statement

Meet Irene Torres, the Funny Food Blogger born and raised in Madrid. She represents our median user: not too old, not too young, not entirely local, yet not a tourist.

Get Han Nguyen’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

At first glance, we seemed to be leaning toward a “one size fits all” approach. However, one key aspect defines Irene: her geographical context — she is a city dweller!

User Persona: Irene Torres

Considering Irene’s needs and frustrations, we were able to comes up with a Problem Statement:

“City dwellers with an abundance of meal options need a way to discover affordable, local, and delicious food because currently, they primarily rely on food delivery platforms or spontaneous walk-ins.”

From idea to product

Entering the Ideation phase, we were behind schedule… So thank god for Crazy8!

Some of us sketched, while others — those less comfortable with drawing — wrote down their ideas. We took the time to review each one. As I listened to my teammates explain their concepts, I jotted down actionable keywords on virtual sticky notes for our MVP.

Then, from Friday evening to Sunday afternoon (yeh yeh I know I said no extra hours..) we were divided into sub-teams to work on our prototype and presentation.

Starting by establishing the UI library, we created a new color palette for the interface base on the original brand colors. We also selected a new typeface for the body text to improve readability.

Colors & Fonts

While Jorge sourced icons and Cilia gathered pictures, I focused on exploring reusable components.

The product card was the most complex component we had to design. Customers need precise details about pizza sizes, prices, and extra ingredients when ordering. At the same time, they expect the process to remain as easy and quickly as possible.

Four states of Product Card

In the end, using the team’s early feedback, I was able to refine the prototype and even allocate time for some “fancier” interactions and animations, like a “spinning pizza” or a seamless dropdown menu.

It was 21:55 on Sunday, we were finally ready for “launch”.

Hold on… What About Responsive? For the scope of this project, we were asked to deliver a high-fidelity desktop prototype. In real-world conditions, we would prioritize a mobile-first approach.

User Testing

From refining the product card dropdown feedback to clarifying the delivery or pick-up toggle button, user testing enabled us to iterate and improve our prototype gradually.

👋 Do you want to be a part of it? Test our prototype below:

Figma Prototype

Key Learnings

Congratulation! You’ve reached the end of this case study.

“The freedom to self-govern requires inventive and careful use of power […]; it is sober, exhausting and without parents.”
— Maggie Nelson, On Freedom

I started reading On Freedom by Maggie Nelson over the holidays, and this phrase kept resonating in my mind. Freedom truly is “exhausting.” By getting caught up in the rigorous Design Thinking process, we gained valuable lessons in flexibility and resilience when meeting deadlines.

During this project, I had the opportunity to embrace my role as Lead Designer, overseeing and coordinating the team’s design efforts. Although Jorge, Patricia, and Cilia were much older than me — which was a bit intimidating when I had to give them direction — they placed a lot of trust and respect in me. This allowed me to guide the team effectively, offering help and direction based on my expertise in Web Design and Figma.

I also learned a great deal about User Research, particularly how to conduct interviews and user testing. Since English is not my native language, I had to stay diligent with meanings and nuances of words to convey and advocate for users’ needs effectively.

In the end, I’m grateful for the opportunity to approach a traditional web design project from a fresh perspective, with the user at the center.

Thank you Patricia, Jorges & Cilia. And thank you for reading 🥰