Local Grub
Food Ordering Responsive Website
exclusively for independently owned restaurants.
Overview
Local Grub is a food website and app exclusively listing independently owned restaurants for food lovers who want to experience unique delicacies, flavors and culinary fineness.
The reason I chose to create Local Grub is because of my personal experiences as a customer of independently owned local restaurants. I often order food from restaurants that sell authentic ethnic cuisines and there are certain problems I usually face.
Roles & Responsibilities
UI/UX Designer
(Case Study Project for Google UX Specialization):
User Research, Ideation, Interaction, Visual Design, Wireframing, Prototyping & Testing
Duration: July - August 2021
Tools: Google Docs, Google Slides, Adobe Illustrator & Figma
Problem
There is no access to a one stop platform to order food from independently owned restaurants for food lovers who want to experience unique local flavors and culinary fineness.
Popular food delivery apps and websites have no specific option to filter a list of independently owned local restaurants. These restaurants are listed with big chain restaurants and fail to convey the uniqueness that they offer. Independent restaurants often do not have websites, and if they do, they are not well equipped to take online orders. The problem while calling the restaurants to place an order is that if the phone line is engaged during rush hour, waiting or retrying till the call is answered gets very frustrating.
Solution
Local Grub makes it easy for the customers to order from their favorite independently owned restaurants without browsing through unwanted food options on usual food ordering apps and websites.
This platform is a one stop solution to order delivery & pickup from local restaurants for food lovers who want to experience unique food and local flavors.
Design Process
In order to determine the problem I was trying to solve, I conducted foundational research which included empathizing with the users, POV survey and a competitive analysis to know what the users want. Further, I defined the user problem by interpreting my research findings in to user personas, user journey maps and determining the value proposition.
Then I began the ideation process to find potential solution options by making different versions of basic userflow, storyboards and several paper wireframes sketches with Crazy 8s method. The next step was to design the low fidelity wireframes and prototype of the app and website's key flow and functionalities.
I decided to conduct a test with the prototype to validate usability and gather feedback to further ideate. After synthesizing the feedback and implementing it into the design I completed the final visual mockup screens.
Learn about users through research and empathize
Testing reveals new problems that redefine problems
Tests create new ideas for the project
Tests help improve the design
1
Empathize
2
Define
3
Ideate
4
Test
5
Design
1
Empathize
POV Survey
Based on foundational research on existing available data it was determined that independently owned local restaurants are growing in popularity due to changing user preferences.
I decide to conduct a POV (point of view) survey through a survey website in order to empathize and get an insight of the user's preferences. A total of 30 people in the age group of 18 - 65 years participated and the questions were about their lifestyle, food preferences and ordering tendencies.
Key Insights
100%
Feel frustrated when they call to place an order and the line is engaged
77%
Find it difficult to get a list of independent restaurants on regular food ordering apps and websites
59%
Travelers struggle to find locally famous restaurants and delicacies
Competitive Analysis - Responsive Website
In order to determine the right direction for Local Grub, I wanted to understand how the current food ordering websites are addressing the user needs, particularly for ordering local food . So I conducted a competitive audit. While going through this analysis I decided to change the name of my project to Local Grub which I previously named Local Eats since I realized it already existed.
* Indirect competitor Local Eats has only a mobile app and not a website
2
Define
User Persona
Based on the POV survey and the Key insights I defined two main user groups to empathize better with them in order to attain the goal.
Paper Wireframes and Ideating
After completing the personas I began sketching the ideas using crazy 8s,user story boarding and few other methods to get a clarity of what would best suite the user needs. The rapid ideation helped me to experiment different design solutions before starting final design development.
Site Map
Following the sketching and ideating I decided to present all the required information to the user in an easy and uncomplicated way.
3
Ideate
Low-Fi Wireframes
Moving forward I created low-fi wireframes and clickable prototype of the ordering and checkout process with Figma using the 12 column grid system and proportional spacing.
Local Grub Website - Desktop Home Screen
Local Grub Website - Restaurant Profile Screen (12 column layout grid)
Local Grub Website - Checkout - Address Screen
Local Grub Website - Checkout - Payment Screen
Local Grub Website - Confirmation - Payment Screen
Low-Fi Prototype
Usability Test & Pain Points
I used the low-fi prototype to conduct a user test with 5 users from the target group. Participants were
able to use the website's checkout process with ease and liked the overall design but a few pain points were revealed too.
3/5
Users wanted to see their order while going through the payment process
Before usability test
4/5
Users wanted an to choose between delivery or pickup at the beginning of the order and not during the checkout process
After usability test
Before usability test
After usability test
4
Test
Visual Design
To design the visuals I began the process with drafting the mood board to capture the ambience and feel a user would expect from a locally owned restaurant.
Mood Board
Color
Typography
The colors were chosen keeping in mind the mood and feel of the locally owned restaurants. While orange conveys cheerful mood and freshness, black, grey and white convey simplicity and basic undertone.
Since the unique aesthetics, reliability and simplicity of locally owned restaurants appeal to the users I chose the fonts that reflect the same. Adobe Devanagari and Roboto emote a sense of creativity and clarity.
Style Guide
Designing being a non-linear process, I had designed a few UI elements while making the wireframing stage and a few on the later stage. I made the UI elements intuitive and clean which were also liked by the users during user test.
5
Design
Final Design Website
After incorporating the changes determined through the usability testing I started working on the final design. The basic structure was ready so there were only a few changes required to get the final mockups ready.
High Fidelity Mockup - Tablet and Mobile
High Fidelity Prototype
I further transformed the food ordering process and the checkout process in to visually attractive high fidelity mockup and linked the flow into a clickable prototype.
Takeaways
While designing the Local Grub responsive website, I learnt that the with different device the design and layout has to be changed as per the device size while keeping the esthetics and design language consistent.
I also realized that testing early really helped me show the basic ideas to the real users and get important feedback which in turn helped me solve the user problems. Usability test and feedback influenced each iteration of the app's design.
Next Steps
Hi-Fi Prototype Usability Test:
1) Since the previous usability test was conducted with Low-Fi prototype it becomes essential to conduct the test with the final design too since it is closest to the end product. This will validate the purpose and need to the website from the user's point of view.
2) Build a Local Grub portal for the local restaurant owners to set up their profile.
Accessibility: I want the website to be accessible for everyone. I would like to test it with groups with disabilities and find out the problems they faced while using the website.