Deliveree is a B2B application that serves as the link between delivery drivers and restaurants. This service seeks to bridge the gap for restaurants and drivers, while staying informed every step of the way.

Client

Deliveree

Timeline

3 x 1 week sprints 

ROLE

Product Designer 


The Challenge

Deliveree is a B2B application that serves as the link between delivery drivers and restaurants. They provide a delivery food service when drivers are in demand, to Chicago restaurants. With the need for a solution to solve their increase for demand in drivers, Deliveree came to Designation. A previous UX team from Designation worked closely with the client to scope out a significant problem and solution to their needs. They built out a double sided interface for both drivers and restaurants to be able to see what step of the process their food is in after it leaves the restaurant.

Our team of four designers were challenged with designing the interface for the restaurant on tablet, as well as a corresponding interface for drivers on a mobile device. This project was unique in that it requires two separate interfaces for two different devices, and two completely separate audiences. Working as a team to establish design decisions and initial research, we each branched off to delve into our own style exploration and ultimately deliver a design approach. Up for the visual design challenge, I worked diligently for three weeks to create style tiles, high fidelity screens for mobile and tablet, an interactive prototype, and finally a style guide for further implementation.


Design Approach

The UX team created a concept for a multi-sided solution in order to integrate communicate between both restaurants and delivery drivers. Our team was handed a series of wireframes that helped our team to gather initial insights for further design thinking. The UX team conducted user testing with both restaurant owners and delivery drivers, providing our team with the following wireframes:

Tablet

These screens are used by restaurants in order to understand where the food is in the delivery process. 

 

Mobile

Drivers utilize this interface in order to be connected to restaurants in need of delivery drivers. 

 


After reviewing the wireframes, we met with the UX team to talk about potential issues or ideas that could impact design decisions. We learned that the users for either side of the app had different needs and measures of success for the app, aside from the device they are viewing the app on.

 

What do the users need? 

Aside from designing for iOS, the necessity for each device is indicative of the needs that will need to be met for both sides of the platform. I identified the following after initial conversations with the UX team and client: 

mobile.jpg

Restaurant Employee

Delivery Driver

  • View if delivery has been delivered

  • Notify drivers if needed

  • Alert of any delivery issues

  • Complementary to POS system

  • View driving information quickly

  • See all destinations at one time

  • Alerting the restaurant of delivery issues

  • Know how much cash to have on hand

 

Coming out of the meeting with the UX team, we sat down with the client to understand the needs of each user. We asked the client initial questions to get a better idea of how we can best align with their brand. They described their brand in three words: trustworthy, reliable, professional. They highlighted their major necessities for the design challenge: 

  • Give restaurants a tool that is easily digestible

  • Be responsive in showing that the platform is doing all the tracking for restaurants

  • Build confidence with restaurants

Deliveree's major brand goals were important to align on, as the client has personally dispatched and assigned all delivery drivers until this point. This meeting brought clarity to the path that needed to be explored. 

What we want to convey is that our tool is trustworthy and reliable.
— Deliveree CEO

 

Guiding Design Principles

In order to build a trustworthy and reliable interface for Deliveree, we crafter design principles to help guide our process moving forward. These principles help to measure our designs through the process of style exploration.

We’ll keep you informed

You can rely on us

                   We fit into your workflow

As a multi-sided platform, Deliveree promises to keep users in the loop of all necessary delivery information. By utilizing responsive design patterns, colors, and spacing our platform will help users stay up to date with important details while we handle the rest.

Staff managing orders will often be rushed and multi-tasking, therefore making it crucial that they can interact with Deliveree easily and know where things are at a glance. If something is not often needed, take it off the screen or hide it under a menu.

Restaurant owners need to feel that they can trust and depend on Deliveree to get food orders to their valued customers safely and in a timely manner.  The interface should use a conservative color palette and layout to be perceived as a professional B2B service, refraining from cluttering the screen with unnecessary information. 

 

Style Exploration

 

Style Tiles

Artboard.jpg

Right off the bat, the client heavily leaned toward this design. They felt it encompasses the sleek look that they were trying to convey between delivery drives and restaurants. Utilizing color sparingly was important for scalability, and this color scheme offered a balance. 

Artboard Copy 2.jpg

High Fidelity Screens

First Iteration

After selecting a style direction to go in, I built out a few screens to have a better sense of the style direction chosen. I built out the four main screens that restaurants would be looking at, in order to gauge users gut reaction to the design. 

  Left:  Customer search screen  Right:  Narrowing down delivery details

Left: Customer search screen Right: Narrowing down delivery details

  Left:  Orders in progress  Right:  Delivery drivers mapped

Left: Orders in progress Right: Delivery drivers mapped

 

Narrowing down the scope

Taking a dive into these screens allowed for me to make a few high level design decisions to help narrow down the scope and my process moving forward.

1. Implementing a customized keyboard

This idea came from surveying the way restaurants utilize technology. As our guiding design principle mentioned, my design should fit into the restaurant’s work flow with ease. That means pairing a delivery with a driver as quick and efficient as possible. Building in a custom keyboard allows for restaurants to visually keep track of what they are searching for in an environment that is easily distracting.

2. Move the Navigation

Building out the interface for this product, it was apparent that incorporating intuitive design patterns was imperative to increasing efficiency. Most devices at restaurants, have navigation coming from the top of a screen or digestible categories to choose from. The navigation bar was not heavily tested by the UX team, and further pushed me to test this concept.

 

What do the users say? 

We conducted two rounds of user testing during our three-week design process. I wanted to test how efficiently we are implementing our design principles to meet the needs of the user, and also to understand what actions the design evokes the user to take. This feedback guided a variety of improvements to the wireframes and my initial designs.

 
 

Final Screens