Restaurant
E-commerce Experience
Digitizing the ‘Takeout’ platform for a local restaurant, to create new avenues of business
Barsa Taberna, a restaurant in downtown Toronto is the perfect neighbourhood spot for tapas or dinner.
My task was to bring the same great dine-in experience into their e-commerce platform by digitizing their old-school ‘Takeout’ system, and clearly conveying the product offering to online customers.
Overview
As Covid-19 has dramatically changed the way we do business, local businesses, now more than ever, need to ensure that their offering is available online. Barsa Taberna is a neighbourhood Spanish restaurant in downtown Toronto offering contemporary cuisine of high quality. During this 2-week sprint, I analyzed their current website, identified the gaps, and created a ‘Takeout’ platform to provide a frictionless online e-commerce experience for their customers.
Duration
2 Week Sprint
Project Type
Solo project,
General Assembly, Toronto
My Role
User Research, Wireframes,
Prototypes, Visual Design
Tools Used
Figma
Whimsical
Adobe Creative Suite
Hand Sketching
UNDERSTANDING THE PROBLEM
Existing website is confusing and uninformative
User Testing of the current website with 5 users
Results revealed that 80% of users couldn’t understand what the site or the product offering was all about, especially those unfamiliar with Spanish cuisine
Research Methods
Surveys, User Interviews
User Testing
Affinity Mapping
Competitive Analysis
User Personas
User Journey Mapping
Confusing first impressions
4 out of 5 users were unable to tell what kind of cuisine the restaurant serves. The landing page is uncommunicative, the image choice is confusing, and overall it doesn't give a sense of what the brand is about, resulting in people wanting to leave.
No online takeout system
All 5 users said they wouldn’t use the current phone call system of placing a Takeout order. They are forced to read through a PDF menu, and then call the restaurant by phone to coordinate the pickup, and this did not appeal to them.
Static
PDF menu
All 5 users found the current menu lacked visual cues and additional information such as dish information, serving sizes and dietary specifications. This was an especially big problem as many were only moderately familiar with Spanish cuisine.
Images without context
While all 5 users thought the food imagery was beautiful, they felt it did not really speak to them, as they did not know the name of the dish being shown in each image, nor any additional information which would help them make a purchasing decision.
Meet The Avid Foodie, Jamie.
Based on in-depth interviews I conducted with 5 users who ordered takeout regularly, I was able to create my user persona Jamie.
Through Jamie, I was able to map out the current customer journey on the Barsa website, and all the pain points that prevented users from placing an order.
Studying The Market
To get a better understanding of what would make users like Jamie have a successful online experience and place an order, I conducted an analysis of Barsa’s direct and indirect competitors. This revealed that users appreciated the following:
A strong landing page with attractive visual cues that quickly communicates the cuisine and brand flavour
A clearly laid out menu with imagery and relevant information about the dish
An easy check-out process that didn’t ask for too many details
Arriving at 4 key problem spaces that I would now attempt to solve for:
How might we help?
Users like Jamie need to easily understand the offerings at Barsa Taberna, and order dishes online with confidence so that they can be assured of receiving an enjoyable, tasty meal.
Ideating and High Level Solutioning
With these problem spaces in mind, I started ideating on possible solutions through sketches and low-fidelity wireframes. I tested these initial ideas with my users and further developed them
Ideation Methods
Quick Sketches
Lo-Fid Wireframes
User Testing
Exploring how to make the landing page more impactful
This page is the first impression customers will have of the site, and it was key to make this easy, communicative and attractive.
Users felt the first design felt more like a product page than a restaurant page. This led me to create options that were image-led, and content-rich
Ratifying menu layouts with users
I experimented with different ways of laying out the menu to see which resonated more with users.
Sending out simple concept tests to users allowed me to define my design decisions.
Pickup Time Selection
I iterated with the Pickup time slot selection to see which options felt more intuitive to users. Some initial ideas left users confused, and they needed to be further simplified.
High Fidelity Wireframing & Prototyping
As the designs started to get more final, I started making higher fidelity versions of them to get it as close to reality as possible. In addition to enhanced functionality, I also created a stronger visual language for the brand, to make it stand out against the competition.
Deliverables
Visual Design
High-Fid Wireframes
Figma Prototype
Key New Features
The proposed design includes the following features listed below:
Communicative, attractive landing page
Visitors to the Barsa Taberna website are now greeted with a strong homepage that communicates who the brand is, informs them about the cuisine and ordering platforms.
The bold use of images helps users recognize the restaurant as a worthy contender for their meal choice.
IMPACT:
User testing revealed all users were able to immediately identify it as a Spanish restaurant and noticed the clear calls to action.
Online Takeout platform
Elevating the takeout platform from a phone-based system to an online e-commerce model made the entire order process seamless and automated.
Well-laid and detailed menu
It is now much easier for customers to experiment with new dishes that they may not have tried before thanks to the use of attractive imagery, and detailed product descriptions.
Helpful secondary information like portion size, dietary specifications and the ability to add a note to the kitchen also takes away the guesswork from a lot of the ordering process.
IMPACT:
Upon testing, all users appreciated the simple, informative and visual menu. 90% said it would entice them to place an order.
Elegant checkout process
The checkout process is designed to ask for as little input from customers, to make it a quick and easy experience for them.
Thoughtful touches such as informing customers as to why certain details of theirs may be asked for, and providing small affordances like tick marks that signal that all their inputed information is correct have been included to create a frictionless flow.
IMPACT:
Upon testing, all users appreciated the quick 3-step check-out system and felt the payment process was easy
Next Steps
If I had more time, and were to take the project forward, these are some of the things I would consider looking at.
Check for alignment with the business
At the beginning of the project, I had had a preliminary conversation with the restaurant staff to try and understand their takeout and delivery systems, and I used that as my starting point. To take this further, I would now liaise with them to further delve into how this solution aligns with their business goals and what adjustments would need to be made.
Think about the backend
Beyond the customer platform, I would investigate and iterate upon how orders would show up at the restaurants’ end, and what their platform might look like.
Increased user testing
I would test my solutions with a wider audience to find any gaps in the user experience
Key Learnings
View Other Projects
UI/UX: WhatsApp Reimagined
UI/UX: The New Vibe
Website Design: Seiko
Graphic Design: Foodhall
Graphic Design: Moët Hennessy