SavoryEats
The traditional restaurant app
Overview
A responsive website design to able order food for a local startup business.
Role
Product Designer
Skills
Product Design
Research
Duration
Oct ‘24 - Dec 24’
Challenge
How might we make food websites more accessible and easier to navigate for users of all abilities and backgrounds?
Opportunity
Design tools that allows the business to gain more clientele.
A responsive mobile & website experience will allow customers to gain more exposure and clients rather than having to go through social media to access business updates and orders. In a day & age where individuals are accessing everything through applications and primarily through the web, how do we go about creating brand awareness?
User Research
A way for a new start up to gain more brand awareness & generate business.
To approach this opportunity, I first wanted to focus on gathering research on where restaurant performance was currently valued as versus the usage of applications to have to access them. I had to determine questions for “Why would a customer be led to a website vs an app?”. What would be beneficial for a restaurant in it’s beginning stages? Thus brought about our objectives to understand
What role does food play in the individual’s life?
What is the primary way you purchase food? Why?
How did you go about searching for the food you desired? What was the experience you had when ordered & receiving the food?
What challenges do you face when ordering food? Are there any technical constraints or difficulities??
Competitive Analysis
Storytelling & Authenticity
After breaking down my objectives, I analyzed multiple competitive brands, I discovered that almost all have a central hub for traditional focus content and branding. Key patterns included:
Integrating storytelling elements and testimonials to gain user trust and evoke emotion
Consistently focusing on visual elements, showcasing the authentic process in how they make their most popular dishes for clients.
Adding personalization by allowing owners to add a variety of options for their food.
User Research
My interviewees consistently and quickly confirmed they use all in one apps to satisfy their food needs.
After analyzing the competition and what they have to offer, I wanted to identify how does SavoryEats now make it’s mark in this new space their entering. I first needed to know what were people doing on a day to day, or week to week basis. How were people getting access to food? Was it through word of mouth? Was it through proximity to local restaurants around them?
I decided to conduct 5 user interviews to provide answers to these questions — but before doing so, I noticed how there is motivation to pursue in restaurant experience due to the circumstances of life such as celebrations and convenience.
The interviews revealed that users want a website for ordering that would provide great ratings, cater to their needs nutrition wise, to know how food looks and is also quick to provide what they want. Users also consistently stated that their process of ordering food primarily resolves around all-in-one applications.
User Research
How should we structure our site?
Being that this is a start up restaurant and they have limited resources in terms of accessibility and logistic functions. I wanted to approach structured the design to be as simple as possible. The goal was to first design the site with the basic necessities. This visual guide ensures a logical flow between screens, making it easy for users to access key functionalities such as their ordering preferences, inquiry forms about catering, and options to access orders.
Ideate + Prototyping (Low Fidelity)
How do we design the layout to encourage a traditional focus of culture?
At this point, I was ready to start the Design portion with all the insights needed. Based on the conversation with the owners of the start-up and attending the opening event for the company. I was about to gather potential ideas & designs that would stay true to the origin of the brand, Taste the tradition. The owners desired it’s clientele to experience Nigerian culture as well the popular cuisines that so captivated them to make them time and time again.
Based on the key pain points & needs discussed with our stakeholders and users. It led us with a great range of potential solutions for our users. I started out with the idea of having a eye catching image and titles that let people know, these are authentic cuisines.
Ideate + Prototyping (Mid Fidelity)
From Low Fidelity and setting up the foundation of how I desired things to be structured. Based on our pain points and key needs from our users, I was able to brainstorm some potential solutions surrounding consumer reviews and nutritional information which required several iterations.
I was able to now allow our interviewees to testing the site to see if there need be any additional features or improvements that could benefit them as they will be interacting with the business.
Home Page
Well-balanced page that caters towards ethic customers, highlighting brand and family oriented messaging.
Product Page
A customer focused page where it provides potential customers with ratings of each dish & provide reviews to give assurance to new customers.
Key Insights & Usability Testing (Mid-Fidelity)
Key Insights
3/5 users found the navigation was easily to navigate, but took too many clicks to get to checkout page.
4/5 users how the ingredients were laid out, along with providing real-time reviews.
5/5 users liked the app’s simplicity and was easy to navigate.
Usability Testing
Using feedback from usability testing, I identified 3 key areas for improvement:
Scale Down
Users dislike having a lot of steps in the process of ordering things, it can results in lack of purchase.
Checkout Experience
Making sure the user knows when and how their order will be delivered whether that’s through the app or website confirmation.
Interactions and Enhanced Experience
Users would desire in the future the website contain mini animations and interactions that make the ordering experience more personable.
Refining and Finalizing High Fidelity Wireframes (Iterations)
Participants indicated they want a more simple but focused on the origin of the business.So I enlarged the Logo and removed the poster and made a larger font instead. I removed the header text and updated the background to a bright orange with encompasses the brand colors & identity.
Before
After
Refining and Finalizing High Fidelity Wireframes (Iterations)
I wanted to remove the gradient to give the page a softer, more cleaner feel to it. I also changed the photo to a more visual appealing presentation of the food. I also thought removing the color from the top review comments made the page more easier to see as some users stated was an issue.
Before
After
Screenshots of Final Screens
Final Solution
What I Learned 💻
Get comfortable with feedback. Feedback is a good thing. Critiquing is a good thing. Get comfortable with someone else seeing your ideas + designs from a different perspective. It opens your lenses.
It’s okay to change your mind. As a designer who will be constantly producing many, many designs to get to the final solution. Be okay with new inspiration prompting you shift consistently, this keeps you on your toes + always curious.
Perfection doesn’t exist. Even when you feel like you’ve found the perfect solution, there will always be room for improvement embrace that.