Table of contents

Warning: Undefined array key "data_block_color" in /home/platne/serwer191222/public_html/autoinstalator/alexanderfox.eu/wordpress43206/wp-content/plugins/nayla-elementor-extension/widgets/single-image.php on line 478

ABOUT

Let's start with why

... so why does a virtual restaurant need a website if it sells food through external platforms?

What is Holy Taco?

A virtual restaurant owned by Rebel Tang, a startup that combines technology and the food industry. The restaurant primarily serves French tacos, a dish with Mexican-French origins.
And what about Rebel Tang?

The owner of the virtual restaurant Holy Taco, Rebel Tang, is a small startup in the food-tech industry. The company does not have physical restaurants, but only operates in delivery.
How does this business model work?

My client mostly fulfills orders through food delivery platforms (such as Glovo or Uber Eats). In the future, it is planned to launch its own sales channel, but for now, Rebel Tang needed one website where it could first present the offer of the newly established Holy Taco restaurant, then allow the user to select their location and preferred platform, and finally lead to online dishes sales.
But why do they need website?

The issue of having a virtual restaurant website was important, among other things, from the point of view of the digital marketing strategy, which includes PPC activities (Facebook Ads, Google Ads) with redirecting users to individual food platforms (at the level of a specific city or even district).

PROBLEM

To seduce and fulfill a promise

During my discussions with the company's management, I knew that for this project, creating a beautiful design would not be enough. In addition to captivating the user, we need to fulfill certain promises. Promises made to both consumers and business stakeholders within the company. As a designer who is still in the process of building experience, the need to use design terminology was initially a major challenge for me. I didn't feel very confident in it yet.

However, I had significant marketing experience, so it was easier for me to talk about conversion issues. I quickly built a bond of trust with my superiors. I convinced them that I am aware of the fact that what we do should not only look good, but also work. We agreed that our key problem to solve is to find the answer to the question: how should a Holy Taco website look and function to captivate customers on the one hand and maintain high usability, ensuring a high conversion rate on the other?

In an ideal
world...

In an ideal world...

… we would use the pure classic design thinking process: empathize, define, ideate, prototype and test. But the ideal world doesn't exist, especially in startup.

Working in a company with limited resources, and ambitious goals, and attempting to implement innovative solutions in a conservative industry comes with numerous challenges. Ideally, we would start our design process by conducting in-depth research, user group studies, or organizing lengthy workshops. However, in a startup environment, our design process was much more complex, which I will discuss in the following sections.

RESEARCH

Our users were united by one thing

Food. Everyone loved food. Some people simply loved to eat. Others found incredible satisfaction in preparing food for their guests. Still others were passionate about exploring new flavors and innovating in the field of food delivery. How did we find out?

We just talked a lot to our surroundings. Sure, we had a script and structure for the meetings, but throughout the meetings, we were open to seemingly unrelated and non-obvious comments and observations.

UX Research in startup

Even though we are not a corporation with a large budget, we used several free and low-cost tools during the research process. Google Meet allowed us to reach everyone we couldn't talk to in person. Maze supported us in conducting the actual part of the research - gathering observations and material that allowed us to formulate conclusions later. A classic piece of paper and a pen became our "sophisticated technology stack" when drafting interview scripts.

The Foodie Lovers

This segment comprises individuals who prioritize taste and food quality. Despite their busy routines, they seek enjoyable and nutritious meals that provide both energy and delight. Authenticity, healthiness, and catering to their culinary preferences are crucial. They look for restaurants offering distinct and flavorful dishes that seamlessly fit into their fast-paced lives.

Sales & trend hunters

This group adopts an agile approach to dining. While considering prices, they also keep an eye on emerging culinary trends. They are interested in novel taste experiences while always assessing value for money. They seek deals, promotions, and valuable dining options that they can share or showcase on their social media platforms.

Convenience Seekers

Ease of access to quality food was a key aspect highlighted by many of our interviewees. People, due to factors such as busy careers, family obligations or lifestyle (Homebodies), don't have the time to eat out at restaurants, but still have broad culinary interests and enjoy eating quality food. They are looking for a restaurant that delivers high-quality food, with personalization options (e.g., vegan).

What were folks expecting from us?

Forget guesswork, we listen! As UX Designers, we're all about understanding what makes users fall in love with a restaurant, not just any restaurant. So, instead of spinning our wheels, we tuned in loud and clear to what users craved in an online experience. Buckle up, because we're about to explore the voices that shaped our design - the desires that got our creative flames!

The ultimate French Tacos experience

French tacos is unique to me. I want to be sure that what you serve tastes exactly the same as the dish I once tried in the French Alps. I don't want to eat a kebab or a tortilla called (for some unknown reason) french tacos. If only I had the clarity and certainty that you serve real french tacos, I would be the first to order your food, because I wouldn't have to travel abroad every time I feel like eating good french tacos.
Experience the future of food delivery

Sushi, pizza, kimchi - it's all been done before. Many restaurants serve the same food, offering fewer and fewer discounts and coupons. From my perspective, you should focus on presenting the innovative nature of your dishes and communicating that what you are serving is not yet on the market.
Fresh, delicious food delivered fast

Due to my busy schedule, I only dine out on weekends. During the week, I order food delivery, but struggle to find high-quality vegetarian options that are delivered quickly. If you offer swift and high-quality food delivery, many people in my community would be willing to pay a premium price for it.

We wanted to see living people

So, after chatting with users, we got a better sense of where they’re coming from and what, if anything, they expected. On the empathy stage, we had three user groups and their basic needs defined. But I felt like we still didn't fully understand their problems. We knew that users wanted authentic French Tacos made with the original recipe, that they wanted to try new flavors, and that they wanted fast delivery. But those were all pretty general statements.

More than just fancy data points

We invested the time to create personas. Way back when I was king of the digital jungle (aka a digital manager), I whipped up like, a ton of personas for client marketing stuff. Turns out, those marketing skills totally translated into UX! Sure, I had to switch my focus to the user experience instead of just marketing pushes, but it all clicked together nicely. Personas were like our cheat sheet for understanding how people really ticked during conversations. When we had to make design choices, it wasn’t just about abstract theories or faceless data points. Nope! We had these vivid mental snapshots of actual folks—what they wanted, what they expected, and what drove them. It was like having a backstage pass to their minds, not some bland pile of stats and guesswork.

Ania

She is primarily interested in exploring distinctive and fashionable culinary selections.

Age: 32

City of residence: Warsaw

Education: Master's degree in Economics

Income: PLN 10 500 per month

Job: Senior Financial Analyst in a large corporation

Device and browser: iPhone 12, Safari

How much time does she have: 3-5 min.

In which circumstances does she browse the site?

She usually has limited time during weekdays due to her demanding job. Ania browses the web and social media during short breaks at work or commuting by public transport.

What does she need?

She is looking for a high-quality, delicious meal option that can be delivered quickly to her workplace or home.

What concerns might she have?

I have some concerns that the flavor and presentation of the dishes might not meet my expectations, particularly after enjoying the distinctive French taco flavors on my skiing vacation.

I hope the food delivery maintains the same level of freshness and warmth as dining in. A compromised delivery experience might affect my overall satisfaction.

How can we address these concerns?

Price Transparency: We can prominently display the prices of dishes on the online menu, providing clarity to customers like Anna about the cost of each item. Additionally, we can offer value meal options or special discounts for health-conscious customers, making it more budget-friendly.

Special Dietary Options: To cater to customers like Anna who prefer vegetarian or vegan options, we can clearly label dishes or names as "Vegetarian" or "Vegan" on the menu. Additionally, we can offer a diverse range of plant-based dishes that are just as flavorful and satisfying as their non-vegetarian counterparts.

User stories

As a busy professional,
I want the delivery time to be efficient,
so that I can enjoy my meal without wasting much time during my short lunch breaks.

As a health-conscious diner,
I want to find healthy and nutritious food options on the menu,
so that I can maintain a balanced diet and make better food choices.

Wanted CTA

Order now
Explore
Find more

Conversion

Placing an order for a Holy Taco meal to be delivered during her lunch break or for dinner.

Share her dining experiences on social media platforms and tag Holy Taco, becoming a brand advocate.

Follow Holy Taco on Instagram and Facebook to stay updated on the latest menu additions, promotions, and events.

View full persona profile

Adam

He is passionate about discovering and enjoying innovative and stylish culinary concepts.

Age: 28

City of residence: Krakow

Education: Bachelor's degree in Marketing

Income: PLN 7200 per month

Job: Marketing Coordinator in a digital marketing agency

Device and browser: Macbook Pro, Google Chrome

How much time does he have: 10-15 min.

In which circumstances does he browse the site?

Usually at home, looking for new and exciting food experiences to share with his friends and on social media.

What does he need?

He is interested in trying unique and trendy food options that he can share on his social media profiles.

What concerns might he have?

I'm a bit worried about the price range of the dishes. As much as I want to try unique and trendy food, I also need to stick to my monthly budget.

I wonder if the restaurant offers any vegetarian or vegan options. I sometimes dine out with friends who have dietary preferences, and it's essential to have suitable choices for them.

I’m concerned about the overall dining experience, including the restaurant's ambiance and service I hope the delivery experience matches the quality of the food, providing a complete and enjoyable experience.

How can we address these concerns?

Show complete dining experience: to ensure a fulfilling dining experience, even when ordering for delivery, we can focus on the quality of packaging and presentation. Ensuring that the food arrives in premium and eco-friendly packaging will help replicate the restaurant's ambiance and quality at home.

Price transparency: we can address Adam's concern about the price range by providing a clear breakdown of costs on the website or app. Vegetarian and Vegan Options: To cater to Adam's needs and those of his friends with dietary preferences, we can offer a diverse range of vegetarian and vegan dishes.

User stories

As a budget-conscious customer,
I want to know about the price range of the dishes,
so that I can make sure it fits within my monthly budget.

As a diner who sometimes dines with friends with dietary preferences,
I want the restaurant to offer vegetarian or vegan options,
so that my friends can also find suitable choices when dining together.

Wanted CTA

Order
Explore menu
Try

Conversion

Placing an order for a Holy Taco meal

Share her dining experiences on social media platforms and tag Holy Taco, becoming a brand advocate.

Engage with Holy Taco's content by leaving comments and sharing articles on his social media profiles.

Save restaurant as favourites in the app

View full persona profile

Not quite gossiping, but close

Talking about the competition can be awkward. We get it. That's why we asked our customers and friends to test out our competitors' websites and give us their honest feedback. They did the dirty work for us, so we could, you know, hit the beach.

We ended up with a stack of post-it notes, which we sorted into categories. In the end, we identified 8 specific areas where we believe we can outperform our competitors

IDEATION

Let's find solutions

The ideation phase is often associated with a series of activities carried out in conference rooms or at the level of virtual boards. When we started working on the Holy Taco website project, other, quite intensive projects had just ended in the company, and probably everyone felt a slight sense of fatigue.

The Holy Taco project was supposed to reflect the positive energy and joy of eating - so strongly associated with the French-Mexican origin of the dishes served by the restaurant. I realized that a standard approach might not allow us to properly respond to the needs expressed by users in the previous stages. I decided that it might be worth trying a slightly different approach…

Walk & Talk

Unleashing Creativity on the move

I'm personally a fan of being in motion. I don't want to be a hypocrite here - of course, I spend many hours sitting in front of a computer screen every day. However, in this way, it is sometimes more difficult to mobilize to develop non-obvious solutions. Therefore, I encouraged the team to test another approach, called "Walk & Talk" in a working way. How does it work?

Plan

Our team works partially remotely, so we could not afford to walk together in the same place. Fortunately, there is Google Meet. Due to safety reasons, we used only the audio channel (so that everyone could walk safely). We therefore assumed that each participant would review key project information and assets prior to the "Walk & Talk" session, and then we would discuss the information based on a basic agenda.

Execution

On the same day, at the same hour, we called each other from different cities of Poland and Europe. We briefly reviewed our project's progress, including insights from users, problem hypotheses, and competition information. Each team member then presented their proposed solutions before discussing and summarizing the overall discussion. The 30-minute session proved effective in generating ideas and fostering collaboration.

Outcome

Let's be honest, however, that this form is not the best in the case of selecting specific solutions, assessing the feasibility of ideas, or presenting visual examples. Therefore, we decided to carry out the next 60-minute session scheduled for the next day in a more conventional way. Participants responded favorably to the "walk & talk" format, citing its ability to boost energy, encourage out-of-the-box thinking, and promote a break from screens.

But don't skip the workshops

The second session was more traditional and took the form of an online workshop. Thanks to the use of FigJam, all participants could paste their visual examples and add reflections and ideas that emerged after the dynamic "walk & talk" session before the meeting.

From ideas to action

In the main part of the workshops, we went through the proposed ideas, solutions, and visual examples. I personally presented wireframes, which were commented on by the other participants of the meeting. I found many interesting solutions in services such as UX Bites or UXArchive. I also presented a proposal for the information structure of the page and several basic, potential user flows of users.

All joking aside, the first stage was just a warm-up. In the second stage, as a design team, we met in a conference room and first went through the feedback from customers, and then each of us presented our own observations about the competition's websites.aIn this area, the marketing department provided many valuable comments, which I confirmed that I would include in the next iteration of the ideation process. After establishing the directions within which we should concentrate the further ideation process, I created a basic action plan, which was to be the basis of my design activities in the coming days.

/home/platne/serwer191222/public_html/autoinstalator/alexanderfox.eu/wordpress43206/wp-content/plugins/nayla-elementor-extension/widgets/marquee.php on line 558
icon_font" data-duration=10 data-sepduration=10 > Enough talk, let's design something

Design and branding

The Holy Taco brand was a new creation in the Rebel Tang restaurant portfolio. Therefore, the company needed a basic brand identity, and preferably a design system for the brand.

I decided to take up the challenge and use my marketing experience from previous years. I spent the most time working on the Holy Taco branding with the CMO, who was responsible for the brand and had a lot of experience in the field of brand creation. Fortunately, however, he gave me a lot of freedom in terms of formulating proposals for how the Holy Taco brand should look and how it should communicate with customers. Together, we took a fascinating journey through the twists and turns of Mexican culture.

From heritage dive to mega-meaningful design

Holy Taco's design journey was like a spicy fiesta! We started by deep-diving into Mexican heritage, checking out stuff like old buildings, clothes, decorations, even gods and eats. Our goal? Craft a super clean design that packs a punch for Holy Taco. Think minimalist meets mega-meaningful.

Along the way, we had some killer ideas. First, we built a grid like a taco stand itself, giving everything order and balance. Then, we borrowed some spice from sacred architecture, making the design feel holy and important. Finally, we picked fonts and colors like toppings on a taco – each one adding flavor and telling a story.

Boom! Holy Taco is now a fusion fiesta of old and new, where every detail – from the grid to the holy vibes to the color choices – tells its own story and makes the brand totally unique.

It's the accessibility, stupid

The title of this section might be a bit of a stretch, but I think it's the best way to sum up what I'm going to talk about. Our initial excitement about the vibrant colors and rich textures of Mexican culture was tempered when I reminded the team of one of the most crucial aspects of good design: accessibility.

WCAG wake-up call:
aesthetic adjustments

As you can see from the initial color palette and mood board, we were initially drawn to a dazzling array of saturated hues and eye-catching elements. However, an overemphasis on aesthetics and an almost artistic look and feel are not the cornerstones of effective UX/UI design. In fact, at that stage, our design was far from meeting WCAG standards.

Fortunately, we took a step back and reevaluated our approach. We thoroughly reviewed color contrasts, simplified the header structure, toned down some of the colors, and eliminated many of the diverse palettes. Throughout this process, we remained committed to preserving the strong connection between our design and the essence of Mexican culture. Feedback from subsequent usability tests only reinforced our decision to prioritizeaccessibility.

PROTOTYPE

Finally, a working prototype

After creating the visual frames, I could move on to what I love doing the most: designing the first views.

Reality check:
imperfections unveiled

During one of the meetings, I had the opportunity to present the working prototype to the other team members. I was incredibly excited about this fact. Ultimately, it turned out that not everything is as perfect as I thought. Most of the feedback was very informative and I knew I had to implement it.

For example, budget and time constraints meant that we were unable to implement the UX Pattern that required the user to confirm their location immediately upon entering the page. In place of this solution, we had to list the locations on one subpage, along with the food ordering platforms available in that location.

User Feedback FTW!

We decided to discuss the next iteration of the prototype with users. This meeting turned out to be even more valuable. For example, the original scroll idea was described by users as unintuitive. A valuable comment was the suggestion that the restaurant offer pages would be best if they resembled a classic menu, enriched with photos of dishes. Equally important was the need to communicate to the user on the home page what French tacos are (in the original version, we wanted to place this information on a separate "about" page). After several iterations, we finally implemented a project containing the following subpages and functionalities.

Wait. Where's the basket?

If I didn't know about this project and saw it for the first time, I would ask the same question. The answer is simple: At the time of working on the Holy Taco website, the company was not ready to implement the marketplace functionality, but at the same time, it needed a website that would redirect users to where they could order food. This role is fulfilled by food delivery platforms (Uber, Glovo, etc.). In the future, a potential implementation of a proprietary channel is planned. When this happens, the Holy Taco website will also be redesigned.

Homepage
Menu
Order
Dishes

TEST

What did users say?

After wrapping up our final project, we decided to give it a spin with real users.

You know, like trying on new shoes and taking them for a walk—testing if they’re comfy, if they rub your feet the wrong way, or if they’re just the right fit. But instead of sneakers, we were all about digital stuff. So, there we were, clicking buttons, swiping screens, and seeing if our creation held up. It’s like when you order a taco and take that first bite—you gotta make sure it’s as tasty as you imagined.

Users told the truth

As part of the process of creating a new website for the virtual restaurant holy Taco, we conducted user testing. The tests were aimed at assessing the readability and intuitiveness of the website, as well as detecting any errors or problems.

To conduct the tests, we used qualitative research methods, including user interviews and usability testing. In user interviews, we asked about their opinion of the website, what features are most important to them, and whether they encountered any problems. Usability testing involved observing users as they used the website. So, what was bugging our users?

Button size issues

Users reported that the buttons were too small on some devices, especially for older target groups.
Distracting menu text rotation

During testing, users reported that the speed of the micro-interaction related to the text that rotates around the images (on the menu pages) is too fast. They said that it distracts users while they are reviewing the menu.
Footer problem

Tests also showed us that we did not design the footer very well. Initially, we included a general link to the "order" page. During user testing, we realized that the correct design decision would be to list the available cities in the footer, so that users could quickly navigate to their city of choice.

Impact level

It's time to get down to brass tacks.

Sure, numbers are nice (gotta love that sweet data dance!), but for me, the real victory was seeing the Board do a happy jig and the startup itself thrive. Check out how our project impacted these metrics, but remember, the biggest win was making a real difference.

Time spent on site

+ 0 %

Orders placed

+ 0 %

Conversion rate

+ 0 %

Average order value

+ 0 %

Bounce rate

- 0 %

Repeat customers

+ 0 %

"I'm very pleased with the way Alexander worked on this project. He was highly collaborative and always willing to go the extra mile. The end result was a website that is both user-friendly and visually appealing. It has had a significant impact on our marketing and communications efforts."

– Lukasz Piekut, CMO Rebel Tang

POST MORTEM

Key Takeaways

Is there ever a project where we don't look back and think, "Hmm, maybe I could have..."? Let's just say Captain Obvious is here to save the day.‍..

The website is finally up and running – you can check it out here. Unfortunately, due to budget constraints and the IT team's focus on other priorities, many of the bugs identified by users and myself during usability testing went unfixed. I had to accept that my final Figma prototype, which was approved by everyone involved in the project, didn't fully match the implemented website.

What lessons did I learn?

Every project fuels my growth, and I'm excited to bring these learnings to future endeavors, ensuring they benefit from the latest tools and techniques. Proud of what we achieved with Holy Taco, but always striving for better!

Stand firm, even if it feels uncomfortable.

Looking back, I wish I'd been more insistent with the bigwigs about tackling every single usability issue, even the ones that might seem like mere pebbles to folks who don't live and breathe design. Turns out, those seemingly insignificant bumps can trip up our entire business goals. Lesson learned: gotta make sure everyone's on the same page about how even the tiniest design details can have a major impact.
The more sweat in script creation, the less blood during interviews

After Holy Taco project, I totally revamped my user interview scripts. The new version digs deeper and extracts way juicier insights! If I could go back, I'd definitely unleash these bad boys on the project, imagine the goldmine of info we'd have unearthed! Lesson learned: sharper interview tools lead to sharper understanding, and that's how you build something users truly crave.

Post Mortem

Locate functionality

Looking back, I should've gone full lioness about getting user location on the site from the get-go. Sure, they threw around the usual suspects - "budget tight," "priorities elsewhere," blah blah blah. Next time, I'm bringing flashcards, data charts, and maybe a puppy to win that feature over!

What If I Could Rewind Time?

Seriously speaking, I’d whip up two snazzy prototypes in Figma – one with location on, the other with location off. Then, I’d round up my pals and regular ol’ coworkers for an A/B test throwdown. You know, the kind where they battle it out like gladiators, but with clicks and swipes instead of swords and shields. Once the dust settles, I’d gather up all that juicy data like a squirrel hoarding acorns. Armed with charts, graphs, and a presentation that screams “I mean business,” I’d waltz into a meeting with the bigwigs. Picture it: me, striding in like a walking ROI report, ready to drop knowledge bombs. “But wait,” I’d say, leaning in dramatically, “the upfront cost? Yeah, it might pinch a little. But listen up, folks! This ain’t just about convenience; it’s about long-term moolah. We’re talking serious profit potential here. Rejecting this? Nah, that’s like saying no to a golden ticket.

Thanks for your time! ♥︎

Rebel Tang

Holy Taco

Ania

Ania

She is primarily interested in exploring distinctive and fashionable culinary selections.

Adam

Adam

He is passionate about discovering and enjoying innovative and stylish culinary concepts.

Walk & Talk

Walk & Talk

/home/platne/serwer191222/public_html/autoinstalator/alexanderfox.eu/wordpress43206/wp-content/plugins/nayla-elementor-extension/widgets/marquee.php on line 558 icon_font" data-duration=10 data-sepduration=10 > Enough talk, let's design something

/home/platne/serwer191222/public_html/autoinstalator/alexanderfox.eu/wordpress43206/wp-content/plugins/nayla-elementor-extension/widgets/marquee.php on line 558 icon_font" data-duration=10 data-sepduration=10 > Enough talk, let's design something

/home/platne/serwer191222/public_html/autoinstalator/alexanderfox.eu/wordpress43206/wp-content/plugins/nayla-elementor-extension/widgets/marquee.php on line 558
icon_font" data-duration=10 data-sepduration=10 > Enough talk, let's design something

/home/platne/serwer191222/public_html/autoinstalator/alexanderfox.eu/wordpress43206/wp-content/plugins/nayla-elementor-extension/widgets/marquee.php on line 558
icon_font" data-duration=10 data-sepduration=10 > Enough talk, let's design something