Deliveree

Deliveree is a platform that connects to third-party ordering systems (GrubHub, ChowNow, Delivery.com, etc.) with delivery drivers.

Client: Deliveree
Date: 2017
Services: Visual Design, UX

01. History

Recognizing a gap in the marketplace for a service that facilitates connecting businesses with drivers, Deliveree (formerly Urban Delivery) was born. Based out of Chicago, Deliveree operates like a personal delivery chauffeur, which is cost effective, flexible, and convenient.

Objective

Currently, their operation is focused on connecting delivery drivers to restaurants. The setup is as follows:  a restaurant makes a delivery via Kindle Fire, which is transmitted to an iPad carrying dispatcher, who in turns connects a driver via text. Here lies the problem, it’s inefficient and cumbersome. Knowing this, the aim of my team is to provide visual designs to meet two factors:

Screen flow of Current Order

Restaurant – Tablet

Restaurants need a streamlined way to check delivery details to ensure quality control and protect their bottom line, without unnecessary communications through Deliveree.

Driver – Mobile

Drivers need an efficient order management system to optimize their deliveries and cut unnecessary communications to maximize their time and earning potential.

02. Getting Started

Prior to accepting this project, the client contracted a Designation UX research team to find what underlying issues exist. The results were wireframes for both Restaurant and Driver, which we reviewed before any pixel pushing began.

Our review highlighted a made a few UX decisions upon reviewing and clarifying with the UX team:

Ux Wireframes – Restaurant#1
Ux Wireframes – Restaurant #2
Ux Wireframes – Driver#1.2

Surveying the Landscape

We created a visual competitive analysis along with out of category inspiration to find common design patterns across competitors, and additionally, to establish design principles.

Analysis insights that are applicable for Deliveree

1. Clean Interface to display – Curate information so to prevent clutter as evident in Caviar

2. Color – Narvar is a good example where color is used as a trigger mechanism in the form of buttons to do something. Subtle use of micro interactions to prompt the user to move or do another task

3. Good use of Space – UberRush demonstrates whitespace in design will elevate glance-ability and clarity.

4. Use of flat designs – Simple illustrations and images are acceptable as is evident in Rituals

Guiding Beam

You can rely on us

Restaurant owners need to know, they can trust Deliveree to make timely deliveries. Using a conservative colors and layout will convey professionalism.

We fit in your workflow

Managing orders by staff are paramount is a busy environment. Hence, glanceability of screens should easy while not interrupting workflow.

We will keep you informed

Deliveree promises to keep users in the loop of all necessary delivery information.

03. Aesthetics and Voice

Choosing the platform

Before any kind of design, we had a major decision to make – whether to design in iOS or Android. Restaurants used Android’s Kindle Fire, while drivers use iPhones. We selected iOS for these reasons:

1. The developer currently develops in iOS, so the familiarity established from the designs will make developing easier

2. Based on research, it’s easier to migrate from iOS to Android. iOS code is proprietary but Android isn’t, making it much easier to develop an app.

What should we bring to life?

Each member of my team created individual style tiles to present to our client. I designed three divergent concepts that encompassed friendliness, organization, and accommodation.

Style Guide Combo

I explored some styles I felt matched our new art direction. The first style resonated well with the client. They felt the blue and green colors blended well. The subtle usage of iconography acted as a prompt in the journey.  The client declined the second and third options.  They felt its bright colors, outdated graphics, and text felt overcrowded. For my next iteration, whitespace and colors became important to ensure glance-ability and professionalism.

What takes priority?

To make sure our final designs aligned with functionality, we did a few rounds of usability testing with two group of people. Restaurant users were mostly managers that like to quickly track their orders, while the driver’s point of view is based on simplicity in the text, maps, and finding items quickly. These tests will answer a few key questions in mind:

1. Is glanceability achieved with the combination of color, white spacing, and text?

2. Does the user understand what to do?

3. Are too many options given that will confuse and increase learning time?

Get initial showing perspective on Restaurant

We conducted a 20 sec gut test to get initial reactions from users on Restaurants Interface:

Users Feedbackv1#3
Users Feedbackv1#1
Users Feedbackv1#2
Takeaways on Restaurant screens

Overall, user feedback showed a few changes had to be made:

Colors – Too many variations of blues plus the brightness created confusion.

Revised Solution: Consolidate the blue colors while making colors subtle, will creating visual hierarchy and consistency.

B1:NEW1
B1:NEW2

Progression chart – The hollow circles were confusing, as users didn’t know if it meant completed or not completed.

Revised Solution: Redesign them to be full circles and show completed with a tick, and incomplete with a lowered opacity.

B2:NEW1
B2:NEW2

Dark Map Interface – Users stated the dark UI was too complicated and difficult to read and understand. Additionally, the customer photography isn’t necessary.

Revised solution: Create a simple map without buildings, icons, or any other intricacies. Simple road and blocks in light colors help make it easier to understand.

B3:NEW1
B3:NEW2

Get initial showing perspective on Drivers

We conducted a 20 sec gut test to get initial reactions from users on Drivers Interface:

(drivers screens for 1st user testing)
Takeaways on Drivers screens

Overall, user feedback showed a few changes had to be made.

(Combined screenshots of changes made to drivers)

04. Product Evolution

After a few iterations from user feedback, I created a few high fidelity screens and a prototype in Proto.io of the outcome:

Search Customer
Customer Not Found(Name Only)
Add New Customer
Request a Driver
Driver Requested Success
In Progress Individual Map
In Progress Orders
Delivered Orders

05. What’s Next?

With the project wrapped up, I transitioned to a documentation of assets. I annotated the app screens as well as creating a style guide. The guide will communicate how to apply the brand across any medium.

Coverpage
Color
Introduction
Typography
Logo
Components

Final Thoughts

Details Matter

Throughout this project, I’ve had to keep reminding myself of the finer details. Occasionally, elements like padding, width, and margin weren’t always consistent. To solve this, I utilized the symbol feature of Sketch.

 

Stakeholders might try to give solutions rather than solve the problem

I learned that a project with a problem or goal in hand isn’t the solution, it’s more holistic. It will become necessary to push back on client requests in order to discover why they want it. Using research, quantitative data, and user feedback provided the evidence for the best solution for a problem. This proves and shows evidence, and can help the stakeholders to change their mind and get on board.