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: 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: 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. 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: 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. 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. 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. Get initial showing perspective on Drivers We conducted a 20 sec gut test to get initial reactions from users on Drivers Interface: Takeaways on Drivers screens Overall, user feedback showed a few changes had to be made. 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: View Prototype 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. View Style Guide 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.