2022
Food Delivery service
Project Overview
Task Description
The task was created using GoodBrief.io
Company name: Heap
Company description:
We are a company that makes and distributes healthy food. Our main product is made with world's top chefs and shipped directly to your home. Our target audience is college students. We want to convey a sense of comfort, while at the same time being modern.
Task Description:
You must create a website that will mainly sell the company's products. The goal is to provide a great user experience. Besides the landing page, the website will need a catalog page, product pages.
The landing page should have a Contact Us section. There should be a call to action to get users to make their first order.
They would prefer a minimal design, and would like you to use the brand color, which is yellow. Take into account the client's preferences and values.
Deadline: 7 days
Solution
General Solution:
Create a simple, understandable website that makes users feel comfortable and trustworthy. It was decided to make the main page a landing page with a company overview and service benefits.
Work was also done on the identity. Warm and cosy colours were chosen, as well as no sharp elements, everything has nice, safe rounded corners.
Main points:
The home page should tell the user basic information about the service and its benefits. And encourage the user to make the first order
The product catalog page should be as user-friendly as possible for the most comfortable and convenient ordering by the user.
The product page should provide additional necessary information about the product to the user, as well as possible functionality for customizing the order
The overall design of the site should be as friendly as possible and inspire user confidence in the service
Design Process
1 Reseacrh & Define
UX Research
Competitors research
Customer Journey Mapping
Even though the task looked quite simple, one of the most important steps in creating a successful product is understanding how the product should work and what makes it convenient and good for the end user
At this stage, I focused on researching competitors' products and creating a customer journey map based on my competitive product research and also on Baymard Institute articles and researches.
2 Ideas & Prototyping
Generation of ideas
User Flow
Creating Low-Fidelity prototype
Testing
At this stage, I concentrated on generating ideas that were primarily about usability and user experience. But I also came up with individual product ideas, such as meal kits for each meal of the day. I also paid attention to creating a visual style for the product
This stage ended with the creation and testing of a simple Low-Fidelity prototype. At that time, I used to draw prototypes just on paper
3 Design
Work with colors and typography
UI design
Creating High-Fidelity prototype
Testing
Here I was already creating the final prototype, using all the ideas and concepts I had worked on. Creating a visual website identity with color matching and typography
I also tested the final prototype again
Visual Idenity
Starting from general fonts and colours used for the website
Use the Averta font for headings, subheadings, and text in buttons and other components. It is a modern and light open typeface that uses a lot of rounding. This font perfectly conveys the feeling described in the task: modern and comfortable: We want to convey a sense of comfort, while at the same time being modern.
Inter is used for general text blocks because of its good readability
Logo
Why did I choose just a chef's hat?
This is a simple and straightforward element that immediately evokes clear emotions in a potential customer. It gives the user a clear understanding that this service is about cooking. In addition, this logo resonates well with one of the main advantages of the service - Heap is not just a food delivery company, they prepare food themselves and this simple logo perfectly matches the company.
Besides, the name "Heap" does not give a clear understanding of the company and what it does (but it was given by the client*: GoodBrief website), so I thought that instead of trying to interpret the name and create some kind of metaphor, it would be better to give potential clients a simpler and clearer symbol that would speed up the understanding of the product
Main page
The final result
Main page section
Instead of the usual button that would send the user to the menu, I decided to use an input field where the user could enter the delivery address. This also saves the user from having to go through an additional screen to enter the address after the order has been placed.
However, below You will also see other variations of this section that I would offer to my customer.
About the service and its benefits
A short block that gives the user basic information about the service, its features and advantages over competitors.
There is also a button that calls to go to the menu and place the first order
Meal sets
Meal sets give the user the opportunity to choose ready-made options for each occasion, which reduces the time it takes for the customer to make a decision.
For users, this makes ordering easier, and it doesn't affect the service much, as employees need to create a familiar order, while personalised orders are unique and must be created from scratch.
Simple Contuct us section
This is a simple section with contact information and a simple one-column form. I have organised the form in one column because forms that are arranged in one column are much clearer and easier to read than forms that are arranged next to each other.
I would also suggest the client to add a callback option. The "Get a callback in 25 seconds" button can increase your conversion rate by up to 50%. However, this is not a real project, so I have no one to suggest it to, so I stuck with the regular form
Footer
A simple footer with the most necessary information, website pages, and contact details. There are also buttons to go to the company's social networks.
Other variants
As I said, here are other options for the first section of the home page
The home page will also change during non-working hours. Visually showing the user that the service is not working, as well as providing additional information.
We could have added an order-ahead function, but this is a completely new feature that needs to be agreed with the customer.
Menu page
Final result
Filters
Users can filter dishes, for example, by daily meals, types of dishes, and purely vegetarian or dietary dishes. The meal set cards will also change depending on the filter you select.
The filter section does not scroll, so the user will always see them and can always change the dishes.
In this example, you can see what the selected filter will look like, as well as the hover option.
Cart
Cart button. The shopping cart icon is always fixed in the upper right corner and does not scroll, so it is always available to the user. It also displays number of products inside cart
About the service and its benefits
Sets of dishes. Here you can see the proposed meal sets and scroll through the set cards.
If the user selects a certain filter, the ready-made sets will be offered first. If no filters are selected, the sets will be placed inside the list. The user can also select a filter to display only meal sets
Dish card
The dish cards display the most important information about the dish: Dishes, photos, price and grams, as well as a button to quickly add a dish to the cart
Not available to cook at the moment
If there is a situation in which a dish cannot be cooked, this dish card will be marked in red.
Also, when you click on the cart button, a mini pop-up window will appear with the contents of the cart and the ability to go to the checkout screen
Dish & Checkout pages
Final version
Description/Composition and detailed nutritional value
Description and/or composition of the dish and its nutritional value. Since this service prepares all the food itself, it has approximate data on the composition of dishes and their nutritional value
Portion size
I created this toggle in case the service offers multiple portion options. Information about the weight of the dish and its nutritional value will be displayed relative to the selected portion size
Quantity, add to cart button, price
A button for adding a dish to the cart, selecting the number of dishes, and the price.
The price tag changes according to the size of the portion and the number of dishes
Cart button
Ability to go to the cart page right from this page
Checkout page
Also I made 404 page