Gallery
Abdelhamid Younis Portfolio
Share
Explore
Home

icon picker
Billa Self Service Terminal 2022/2023

Billa has a sub restaurant brand, which is Billa Market kitchen, they wanted to offer a self checkout experience for their customers who visited the restaurants in Billa Branches in Austria. It took 5 months from the first kick off meeting to the go live date.
CompanyREWE Group
Duration ​4 months
Role ​UX/UI Designer & Researcher

Watch the video prototype 👀


Project Team & tasks

Product designer (me) - Competitor Analysis, wireframes, UI Design, prototyping, testing, and co-organizing stakeholder workshops
UX lead (managing design sprint and stakeholder workshops, and cowriting user stories)
Me: prototyping, cowriting user stories with the UX lead, making the first UX concept in sprint day 4, making and testing the final prototype
Product owner (managing deliverables, writing user stories and communicating with the Dev agency)
Design system lead: (UI consulting)

The process

wdgrfhfdh.PNG

1. Design Briefing

In this step me, the PO & the UX lead gathered the stakeholders to find answers about, goal of the project, target group, which features would the minimum acceptable go to market product include and which resources and timeline we’re constrained by.

a11.png
a12.png

2. Competitor Analsis

In the design briefing we decided to do a design sprint with all stake holders. Before this we wanted to give the stakeholder a frame on the competetive landscape to be a basis for the ideation excercides we gonna have in the design sprint. I took over this part and it took me 2 days to watch videos on Youtube from other self service terminals, and summarize the findings of 11 competitors.

a13.PNG

3. Design sprint

We planned 4 days for the design sprint with 8 stakeholders.
The goal of the first day of the desing sprint was finding what problem are we trying to solve, how might we solve the ((The problem)) so that we can (( a business outcome)).
image.png
In the second day I presented the outcome of the competitor analysis, after this we did some ideation excercises (crazy 8) to come up with as much ideas as we can and sketch them, then vote on which ideas to persue, mapped the user journey, and finally collectively sketch a very low fidelity wireframe.
image.png
image.png
On the 3rd day, I was working on the 1st prototype in Figma, while the rest of the stakeholders were thinking about the scenarios and the questions we are going to ask to 5 users in the 4th day.
a15.png

a16.png
The 4th day was the testing day. In which we tested the 1st prototype that was derived from the sketches we collectively draw on Miro in the 2nd day.
Frame 836.png

Day 4 interview results

What went well
People found it good with the nutrion circular labels and the info button
People knew how to scan a customer card and edit the cart
Users liked the allergy details and noticed the combo benefits and liked that all products are displayed with large images
most users managed to make an order
Things to improve
a23.png
a24.png

4. Iterating on the prototype

Based on the user feedback it took us 1 month to write user stories out of them and deliver high fedilty design for each story. Before we handed over the final design to the dev agency we decided to do another round of user testing.

For the final prototype it took 1 week from first doing wireframes for each user story, and then transforming these wireframes to a high fedility UI.
User story
image.png
image.png
Wireframe
a25.png
High fedilty design
a26.jpg

Final designs


a34.png
a35.png

5. User test setup & results

It took 2 weeks in total to plan and do the user testing. And we planned it as follows.
Recruiting 5 internal users from our colleagues but we made sure they had nothing to do with the IT team (age between 35 and 55)
Define key scenarios we want to test
scenario 1: your wife doesn’t want to cook and told you to pick up for a Fried chicken meal for her
Senario 2: your partner sent you this coucher for a free cuppocino how would you redeem it
Scenario 3: you saw this redbull stand beside the order terminal and you want to add this redbull to your order
Write user test guidelines
Prepare test material
We used a touch frame on a 27 inch screen to mimic the order terminal experience
We used a fake scanner built from cupboard and a small flashlight
We used a phone stand to record the interview

image.png

Test results

What went well
User started scanning their customer cards on the start page
Users liked the product overview page and clicked right away on the product image
Users liked the cart overview page and managed to go back and forth between the cart and the menu
Users manged to edit their cart and delete items smoothly
All users managed to at least search, add product to cart and pay with card

What needs to be imroved
💡2/5 users didnt notice that they can scan customer cards by clicking on the button in the top yellow nav bar
💡2/5 users didnt realize that they can scan convenience products on the terminal to add them to their order
💡Users were missing a visual or a haptic(sound feedback from the scanner) after scanning their customer card
💡Users were missing more information about the dishes (where does the meat come from, is it local? .. etc)
💡Users were missing information in the order summary about the loyalty points they collected
💡In the payment page users did not understand some payment options such as (papier compouns & jÖ and go).

One last thing! What about quantitive research.

Before the handover to the devs we wanted to make sure that we offer the right products and the right payment methods to the right customer. We didnt manage to do this survey externally because it will cost more money, so we launched it internally to all our 2000 employees and we got 390 responses.
It took 1 week to plan and lunch the suvey and 1 week for data collection. Me and the UX lead made the questions, and here is a sneak peak of the results.
Which menu categories we should show first?

a37.png
Which dish infomration customers care about
a38.png
Which payment methods customers like to use the most?
a39.png
What should we avoid from other order terminals
a40.png

Lessons learned after release and next steps

Unfortunately I can not disclose any information about usage numbers here, but what we learned is the following
less is more (focus on the most bought dishes), we had a lot of dishes to offer
pay attention to the surrounding, place the terminal close the entrance and free the area around it to give the customer the space and comfort to order. And remove and distractions from the background such as posters and offers
We need to prompt the user to scan their customer cards at first or give them a button to scan it in the checkout page because they usually forget it
customers forget to pick up the receipts so we need to remind them to pick it up
Cash payment is very important and should be placed 2nd after the card payment
people ignore the upper part of the screen
the menu needs to be updated everyday to reflect what is actually offered in the kitchen.
Focus on freshness and local ingredients, people click on images, the more appealing it is, the more they will click

Thanks for reading! 😃

If you have further questions on this project, do not hesitate to contact me :)
📞 +4366565601610
Copy Contact Data

Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.