Stowaway Bar
Research and Design project on the online ordering experience
Design a responsive website with tailored objective from the client
Our team
2.5 weeks
Group project
3 UX design students
Project Overview
A poor UI and a complicated process for users to make a simple order.
Stowaway Bar is a nice and unique place located in Freshwater where young and old feel comfortable to enjoy great food, drinks and fun.
They are not just a business they are part of the Freshwater community and friends of their regular customers.
To save money but still be able to get orders through the website, Stowaway Bar owner decided to join Marilynas Restaurante and share the same website. The result was a bad user interface and a long process for users to place an order.
-
Find a way to reach potential new customers
-
Highlight the unique identity of Stowaway Bar on a single website adapting for a fully online experience because of Covid-19.
The Challenge
-
Design a better website and reach our new potential customers.
-
Understand regular customers behavious
Our Goals
Understanding users habits and behaviour
6 regular Stowaway customers were interviewed and 30 participants reached on survey rounds in order to identify the user's wants and needs.
We wanted to know how COVID-19 lockdown has affected their habits and what if anything could cause them to build loyalty toward a restaurant during these times.
Locals want to support Stowaway bar
More than a friendly and well-designed interface, users care to help local businesses keep their doors open and the community with their respective jobs.
After interviews and research, we identified key touch-points that were important pillars that came out of our research.
_edited.png)
Affinity Map - collaborating in group through Miro platform.
Tracking System
Loyalty Program
Covid-19
Social Life
Users want to see regular updates of their order delivery
Discounts or points program
User want to know what are the precautionary measures
They want to somehow still catch up with friends
Giving a face to our data
After analyzing the data we gathered, we started to form our primary (Mohammed) and secondary (Charlie) personas.
Primary persona
Users we want to retain.
Secondary persona
Users we want to reach out.
The lack of identity on the website
Knowing our user's pain points and desires now it's time to refine the problem and validate assumptions to achieve the right solution to our personas.
Isolation restrictions now make it impossible for people to go out and chat with their friends and enjoy good food, drink and moments at the local bar.
Problem Statement
The sense of community doesn't translate to the Stowaway website, and the current site layout is making it hard for customers to order.
Swipe left to see the current website
What are our competitors good at?
In our survey, many users mentioned how much they appreciate the Domino's and UberEats services and ease of use of the app, but were not satisfied with the way the food arrived. Competitors were not taking extra care in delivery.
Searching for different restaurants to compare the features, Guzman y Gomez has a points and rewards program that is good to implement in our project.
Prioritizing a simple and chic UI
If we design a simpler website with a clear sense of the unique Stowaway vibe and features where users can still be able to keep their social life active, then users get their needs and expectations achieved.
Bringing the solution to Stowaway
Our main idea was to create the simplest and most effective user journey and along the way provide means of virtual interaction between the Stowaway team and even their friends.
Ideation Sketches
Our vision was to connect desirability objectives to viability objectives so we prioritised 4 features that we believed were great opportunities to work on.
First iterations
We created pages based on user's preferences, but at the end of the first version, I realized it wasn't easy to use as we wanted.
-
To complete a "Order a pizza" task they had to click too many buttons.
-
The Pizza page didn't have any photo to get users attention
Usability test
After a couple of changes, the second version was able to be tested.
To compare the different versions of our design we conducted an A / B test to see which one most pleased our users.
-
But it was still missing Stowaway identity
-
Users liked the tabs "food" and "drinks" on the same page
Usability Testing
Final Design
Overall the 6 users tested were able to complete the tasks with minor issues.
We asked users to:
"Order a pizza and get it delivered to you."
-
We added a login option, with history orders and cards details saved.
-
"Free drink for you and a mate" banner on the first page to gain attention and user clicks.
-
Karma meals button, a feature where you can help a family in need and donate a meal.
-
A Covid-19 little link that direct users to a page with updates from Stowaway.
-
Drinks page updated with images
Ask and you shall receive
1. Tracking system
Users wanted to easily see the updates of their orders, and be able to track the delivery. Users also mentioned they prefer to order directly from the Stowaway website so that the delivery won't take too long and the food will arrive still hot and in good condition.
2. Loyalty Program
Thinking of a way to retain our primary persona and reach the secondary, we created a Points program in which the customer gets points on each order he makes and can share a coupon with a partner and both receive a free drink. So that we can reach a larger number of consumers
3. Covid-19 message
Our users were quite worried about the pandemic and mentioned they are cooking more regularly because they don't want to risk but would be nice if they could see the measures the restaurant is taking to keep the virus away.
4. Keeping Social Life active
During the lockdown situation user's concern is that now they can not meet their friends anymore and keep their social life active.
Our idea here was to create a place where users feel connected with the Stowaway team and also enjoy a couple of events hosted by the bar with their friends.
Take a look at the protype
Client feedback
Our team presented the research results and the ideas we gathered talking to real users, they were quite happy and grateful for the insights we brought up, they mention a couple of the changes are on the way to be done already and they will think about applying a new feature. They also agreed the website needed a hand to be on brand and our project was very handy.
Next steps
-
Some users mentioned the color scheme was a bit harsh, so we would like to test with a larger number of users.
-
Work on the home page, make it more inviting
-
Conduct more rounds of usability testing to evaluate our product proposal, make the product more efficient and more satisfying for the user.
Learnings
-
I was surprised by the amount of work that we delivered in 2.5 weeks and still presenting a complete project and with great results based on research and tests.
-
I understood the importance of good research conduction and how it impacts the final results of our project. Research is the fundamental base to understand users needs and motivations and design valuable products .
-
I learned that prioritization is the key to deliver a consistent and valuable product especially when you don't have much time or even budget to build everything you want.
-
It was a great pleasure to work in a team so collaborative, we made every decision about the whole process as a team. We had an amazing harmony and agreement in all stages of this project. We were all encouraging of one another till the end.
