UX Case Study // ReDesign Website
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.
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
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
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.
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.
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.
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.
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.
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.
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.
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
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
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.
Prototype
Lo-Fi Prototype
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.
Mid-Fi Prototype
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.
Test
Usability Test
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.
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.
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.
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
