UX Case Study // ReDesign Website

Carolin
8 min readMay 14, 2021

Local shops and practitioners are suffering a decrease in the demand of their services and products due to the extreme situation COVID-19 pushed worldwide. This can affect local economies and many family businesses. Alongside this, we can see true intent and a growing trend to support local businesses in many communities.
Let’s help local shops and professionals improve their online presence to be more competitive in the actual market.

Project contributors: Desi Ubachs, Farah Lahcene, Valeria Costantini & Carolin Sauer

Challenge

Design a desktop website for a local company or professional.
If a website is already online, analyze what is currently there and propose a better solution for the store’s online presence. Moreover, it would be good not to have access to the customer or the stakeholders.

Deliverables

Research & Data Analysis

Client

We analyzed the desktop website of Babs Burritos, a local company in Maastricht (Netherlands), and suggested a better solution for the store’s online presence.

Current Website & Lynnel, the owner of Babs Burritos

BABS Burrito’s in Maastricht

fast-food Tex Mex Restaurant + Delivery

established in 2017

sells: burritos, tacos, salads, bowls

they are active on: Thuisbezorgd, Deliveroo

Our objective: Increasing orders from their own website and engage with clients directly instead of relying on external delivery services such as Thuisbezorgd or Deliveroo. Increasing revenues by avoiding to pay fees for those delivery services.

Competitive Analysis

Feature Comparison Overview & Brand Comparison (Background)

Competitor Analysis helped us get answers to the following questions:
What else is out there? What is working? What isn’t? What features are missing?
None of the Tex Mex restaurants analyzed by us give customers the option of having meals put together individually or show real photos of the meals on their websites. That could be a possible gap in the market.

Stakeholder and Users Interviews

Interview Quotes Stakeholders (excerpt)

Stakeholder Interview
We conducted an extensive interview with our Stakeholder, Lynnel, the owner of Babs Burritos. We wanted to define the project requirements, scope and business goals.
His main goals were:

  • Increasing orders from their own website and engage with clients directly instead of relying on external delivery services
  • Increasing revenues by avoiding to pay fees for those delivery services.
Interview Quotes Users (excerpt)

User Interviews
We did 5 user interviews and looked deeper into the habits of the customers. We talked about their problems, wonts, goals and their background.

We found that the main selling points for the users are:

  • the visual representation of the meals
  • the speed of delivery

Affinity Diagram

We used an affinity diagram to process the results of our interviews. We have sorted the most important statements according to subject areas. In this way we were able to further narrow down the most important tendencies.

Affinity Diagram

Empatize

Empathy Map

These tendencies were the foundation for building our empathy map — that helped us to understand what our users see, feel, hear and say.

Empathy Map

Our users lose time, pay too much and don’t get good food. They want to save time, support their locals, and see authentic pictures of the meals when ordering.

User Persona

In order to define our user more specifically, it helped us to set up a detailed User Persona. We’ve used the pains & gains from the Empathy map to find the Needs & Gains of Dana Deliver and Sunny Starter our Primary and Secondary User Persona.

Primary and Secondary User Persona

User Journey

The user persona led us to create a detailed user journey. We considered a scenario where Dana Deliver is already hungry after a long day in university. She wants to eat TexMex Food and checks out the Website of Babs Burritos. She does not find her way around and concludes that the website is very confusing. Annoyed and still hungry, she decides to order food on a website of a large delivery service.

Current State of User Journey (excerpt)

We described her emotions and thoughts relating to the actions she would take throughout this journey. Based on these emotions, we also have identified opportunities how the ReDesign of the website of Babs Burritos could help her and customers like her.

Define

How Might We

Some how-might-we
questions
have given us approaches for the
following ideation
process.

How might we make the ordering process less confusing for the customer?

How might we reduce the time of the decision process of the customer?

How might we make the order price more appealing for the customer?

Problem Statement

The definition of a Problem Statement also allowed us to take our user’s perspective even more clearly and focus on solving the problem. The opportunities that were identified in the User Journey helped us to define this.

Problem Statement

Moscow Method

We tried to identify which features could be improved and which couldn’t.
We decided to focus on the tracking of the delivery and the inclusion of real, authentic pictures of the meals.

Moscow Method

MVP

Our product is a website for BABS Burrito’s where customers can order meals and get visual images of these meals. They can also experience a more convenient order process, track their delivery and take part in a loyalty program.

Ideate

Sitemap

Current Sitemap (left) & Future Sitemap (right)

Here you can see the current sitemap and our proposal for the future sitemap of the Babs Burritos website. We focused on the relationships between the pages and wanted to make the website simple and clear — the customer should have the opportunity to get through the order quickly.

User Flow / Happy Path

Future User Flow with Happy Path

The Happy Path indicated here will apply to the following Wireframing & Prototyping as a guide.

Epic Story / User Stories

The Epic Story and the User Stories helped us to prioritize the features, based on how much value they will add to our users according to their goals, motivations and their user journey.

Epic Story (above) & User Stories (below)

Prototype

Lo-Fi Prototype

Page 1

We have created a website (the happy path) which gives the user the opportunity to choose between pick-up and delivery on the first page. If the user chooses delivery, he will get to the delivery page of the big provider. But if they choose pick-up, they’ll stay on Bab’s website and get cheaper prices. There is also no minimum order quantity.

Page 2 & 3
Page 4 & 5

Mid-Fi Prototype

Mid-Fi Video

Here you can see a simple black and white Mid-Fi prototype. At this stage of development, we focused on user flow and information architecture.

Mid-Fi Wireframing

Test

Usability Test

Usability Test Quotes (excerpt)

After the first drafts of the mid-fi prototype, we did concept tests. The feedback from users has helped us to see what their experience with the product is and what improvements we can make. You can see a selection of helpful notes above. We made a list of the things we wanted to keep or improve.

To improve:

Add basket in the header.

Move the order section to the top.

Design and implement a section for customizable burritos.

Focus more on discount/loyalty program.

Implement sign in with Social Media.

To keep:

Tracking delivery.

Allergens icons.

Three main headers to keep simple and clean overview.

Pop-up came at the right time.

Then we’ve prepared the changes visually for the presentation.

Hi-Fi Prototype

After the end of presentation and group work I have independently developed the Mid-fi prototype to a revised High-Fidelity version. Here you can see the redesigned website of Babs Burritos.

Hi-Fi Video

You can see the ‘Happy Path’:
After opening the page, the Pick-Up button is clicked. Now we get to the menu page, we are already in the section ‘Burrito’. In this case we choose the top burrito, then we press ‘Checkout’. A pop-up window will now open. If the customer has forgotten to choose a drink, they now have the chance to update their order. In this case we choose a coke and press ‘Continue’. On the next page, the user should now enter their data, such as name, email address and payment method. They can also choose the pick-up time. After the user has clicked on ‘Confirm’, they receive a confirmation via email. On the last page, the user sees their confirmed pick-up time and receives information on how to get to the restaurant.

Homepage (left) & Menupage (right)
Confirm Page (left) & Pick-up Page (right)

Conclusions & Next Steps

It was a great pleasure to work on this project. Especially the work in the group as well as the further development of testable hi-fi prototypes was very enriching.
The next steps are definitely further user testing, subsequent improvements and more in-depth agreements with the stakeholder. Of course, the missing pages on the website apart from the ‘Happy Path’ shown here still require more work. Possible ideas would also be to connect the website with other functions / providers — for example with apps that offer reusable packaging for food transport.

Created under the supervision and in collaboration by Ironhack Remote.
Project 2 //
E-Commerce/Practitioner Website

--

--

Carolin

I am a UXUI Designer with a focus on UX Research. Here you get insights into my previous UXUI projects.