Web Design
Designing a food delivery website
"Benetar Bento"
What’s the problem to be solved?
-
With the pandemic and the social distancing standards, food delivery service is more demanding than ever. Dining in restaurants isn’t safe, but people don’t want to cook every single day.
-
As a Taiwanese international student living in Seattle, I understand the feeling of craving home food. I believe the feeling is collective —every immigrant and international student misses the taste of home at least once in a while.
With those 2 problems in mind, I decided to design a website for a food delivery vendor — Benetar Bento.
What is Bento?
Bento is the most common and cheap type of takeout/delivery meal people have in Taiwan, which includes some rice, a portion of meat, and 2–3 portions of vegetables. In dine-in bento restaurants, it is often a buffet where you select your own choice of food and they charge you based on the weight.
The Client: Benetar Bento
I start with defining the vendor who needs a website.
Benetar Bento, who serves Taiwanese bento with authentic Taiwanese taste, such as fried rice & noodles, stir-fried meat & vegetables. Classic Boba tea available as well.
-
Location: U-district near Seattle, Washington State
-
Main target audience: College students, Asians (especially Taiwanese)
-
Price: Affordable, around $7–12 for each meal.
Elevator pitch:
Whether you’re feeling homesick or just craving for cheap Asian gourmet, get Benetar’s authentic Taiwanese bento — prepared by local Taiwanese — delivered right to your door. Boba available, of course!
Strategy Phase: Identifying the Needs
Target Customers/Users
Demographics:
-
Gender — both female and male
-
Education — at least college education
-
Occupations — student, school staff
-
Age — 18–30
-
Location — U-district, Seattle
-
Marital status — Single or newly-wed
-
Income — low to average
Psychographics:
-
Personality & Attitudes — down-to-earth, youthful, adventurous
-
Values — Liberal, speed, cost-price ratio
-
Lifestyles — Asian, school work, friends & family
User Personas:
With both the users and the client defined, I then start listing their needs.
User needs
The website needs to enable the user to:
-
Find out if the restaurant delivers to their area
-
Order food online (price, item, delivery destination)
-
Pick deliver time slot
-
Learn about nutrition
-
Add customizable drinks
Client needs
The website needs to enable the client to:
-
To sell food online that will be delivered
-
Provide a system for order customization
-
Introduce the brand story
-
Promote the brand’s social media
-
Encourage customers to give 5-star comments
-
Encourage customers to order more
Scope Phase: Listing the Elements
Next, I come up with content and functionality requirements for the website that can fulfill either client needs or user needs.
(Content as in texts, images, or videos that users can find on the site, and functionality as in what tasks user can accomplish on the site.)
Content requirements:
-
Food & drink menu (name, image, price, nutrition)
-
Order instructions (step-by-step, payment, and cancellation policy)
-
Delivery map
-
Opening time
-
About Benetar — brand story
-
Customer’s ratings and comments
-
Links to social media
-
Contact information
Functionality requirements:
-
Order system (item, number, delivery time, delivery address, pay)
-
Cancel order
-
Create an account and log in
-
Loyalty program: get a promotion code after 10 Bentos
-
Enter a rating and a comment
Again, each requirement maps to at least one client need or user need.
Sitemap Phase: Bringing in the Infomation Architect
With those elements, I then start to throw them around and build a sitemap draft for the Benetar Bento website.
There are 3 primary sections: About Benetar, Food & Drinks, and Manage Orders, with several secondary pages underneath each section.
This is what it looks like:
It looks fine to me, but does it really work?
Testing & Revising the Sitemap
Does the sitemap UX fit users’ expectations? To optimize the information architecture, I used Treejack by Optimal Workshop to build a simple IA test.
Here are the 2 questions I am most interested in (because they are the core functions users need on a food delivery website):
-
I want to start ordering a bento. Where should I go?
-
What regions are they available to deliver?
With a small sample of only 5 participants, I quickly uncover some issues.
The first question was easy. Everyone got to the right path (either Food & Drinks or New Order) and the average time spent was 15.46 seconds.
The second question took people 38.19 seconds. Three participants initially went to Manage Orders before coming back and found the Delivery Policy page under About Benetar. Another participant initially clicked on Food & Drinks. Only one participant directly got to the right page.
I asked 2 participants who had trouble finding the Delivery Policy page. Participant A said that as an Ubereats user, he expected to simply enter his address and find out if it is available for delivery. Participant B found it weird to have the delivery policy under About Benetar. She expected it to locate on a separate Help, Question, or How-to-order section.
Based on those insights, I revised my sitemap:
This updated version includes a new section How to Order, with a Step-by-step page and a Delivery Policy page underneath. I also eliminated the New Order subpage and made an individual Start New Order call-to-action on the homepage to encourage orders.
With this structure, a new customer can quickly and intuitively find what to order on the Food & Drinks section and how to order on the How to Order section. The About Benetar section would be for loyal customers or business partners who would like to learn more about the store itself, instead of simply ordering food. A customer who wants to get right into ordering can get started with one click on Start New Order.
Next Steps
To strengthen the credibility of the site structure, it’s best to amplify my IA test with more questions and more participants. I would also want to find out if people are more inclined to enter their address to check the availability before selecting the food and drinks. Furthermore, I would like to conduct competitive teardowns to see how other food delivery sites structure their content.
Moving on, I would start building some mockup wireframes and prototypes with more content details that can work for a more thorough usability test. For example, how about placing the How to Order content on the homepage? Or placing the Food & Drinks on the homepage so that there can be lively photos that encourage visitors to order? I’d love to sketch, test, and find out!