Deliveree
DELIVEREE
Client: Deliveree
Role: UI Designer
Deliverables: Visual Competitive Analysis, Style Tiles, High-Fidelity Mockups, Prototypes
Time: 3 weeks
Tools: Sketch, Photoshop, Illustrator, InVision, Principle,, Affinity Designer
Challenge
Revise the design language for a mobile/tablet app to improve company efficiency while accommodating needs of restaurant staff and food delivery drivers.
Background
Deliveree (formerly Urban Delivery) is a small business-to-business (B2B) company helping restaurants axe the chore of finding drivers to deliver food to customers. In just a few years, the Chicago-based startup experienced rapid growth, but faced two consistent issues:
The burden of communicating with many drivers via text with a human dispatcher
Not receiving accurate confirmations of food being delivered or picked up
Seeking to make the company more efficient as it expands and develops more business partnerships, Deliveree came to a Designation UX team for help in improving usability for the restaurant platform of its app and create a separate platform for drivers.
My background for this project was somewhat relatable, as it brought back days of working as a host for my college town’s most popular Japanese restaurant. Although I didn’t experience modern conveniences of table reservation software or food delivery systems then, I gained a general idea for what makes restaurants successful. Simple decisions, sharp time management, and clear communication were three key factors to keep in mind while being apart of this project.
Approach
Research
First, our team analyzed the UX team’s wireframes for both platforms and realized there were opportunities present to enhance screen functionality through our future designs.
Restaurant Tablet Wireframes
Customer Search Screen
This is the first screen restaurant staff see when opening the app, as requesting drivers is the main action.
Request Driver Screen
After finding a customer by phone number, restaurant staff enter custom delivery details and request available drivers.
In-Progress Orders Screen
Restaurant staff can view the delivery process for all orders via the status bar. Also, staff can call drivers back to restaurants if orders have any errors.
Delivered Orders Screen
This screen shows a detailed log of all completed deliveries and give restaurant staff options to view complete reports of delivery stats.
Map View of Orders Screen
Restaurant staff can see current driver location and delivery information by GPS signals from the driver version of the app.
Reports Screen
This screen lets restaurant staff view current order progress and delivery stats via adjusting time frames.
Driver Mobile Wireframes
Driver Online Screen
This is the home screen drivers see from tapping the ON switch to show they're available to accept delivery jobs.
Cash Confirm Screen
A simple modal lets drivers know they need to have cash to accept certain orders.
New Order Screen
This modal gives drivers a order summary and an optimized route to review before confirming. A countdown timer keeps drivers from job hogging.
Pick-up In Progress Screen
Drivers have a clear map view and simple navigation info when picking up food from restaurants.
Confirm Pick-up Screen
The checklist lets drivers confirm picked-up orders, which send status updates to the restaurant app.
Orders in Progress Screen
Drivers will see this screen if they're delivering more than two orders at a time.
After analyzing wireframes, we learned of our client’s recent branding shift and scrambled to schedule our kickoff meeting. We explained project expectations to our client and made our 20-second gut test an extreme priority to gain true direction of the brand. Our gut-test slides gave us insight for what our client was looking for:
Simple minimal design places important content in the spotlight.
Stately colors for bars and charts gives data a professional look.
Colors are nice, but appear playful and could interrupt user functionality.
Gradients are nice, but colors, fonts, and outline icons distract the eye too much.
Calm colors and flat-design style fits well.
After gaining reactions from our client, we left realizing our designs needed to:
1. Present users with a tool that's easily digestible.
2. Express responsiveness. The app should help do the thinking for the user.
3. Build user confidence.
“What we want to convey is trustworthy, professional, and reliable.”
Process
Following the kickoff meeting, our team began our visual analysis by viewing competitors (food couriers, couriers of all items, and food-ordering companies with no couriers) that may have an effect on Deliveree’s future design.
Uber Rush showed us how using whitespace and a simple color palette could help us achieve a stark, professional interface. Also, using color to bring attention to time status changes was helpful.
Caviar gave us great examples for adding time sensitivity to our delivery status bar and delivery details. Also, it used micro interactions to indicate app thinking or updating.
Ritual presented ideas on how we could use gradients in our designs to indicate user progress. Also, it used high-quality photos instead of logos to highlight restaurants .
Peapod gave us ideas on how we could approach design for notifications and how to add emphasis to key information with icons rather than highlighted text.
From our competitors, we realized a clean interface for displaying information is essential. Also, using appropriate fonts would help give hierarchy to what's important, while helping users make quick scans of content. Also, we considered how color and subtle microinteractions would prompt users to act on completing tasks.
Along with competitors, we studied companies outside of Deliveree’s domain for inspiration.
Domino's Pizza Tracker gave us ideas on how our order status bars could be recognized. We didn't embrace skeuomorphic design, as we felt it could add age to the app.
USPS showed us how clear text hierarchy and selective colors could add a large dose of professionalism to an order tracking page. We steered clear of gradients to keep order steps distinct.
Narvar delivers quick, glanceable content, thanks to its clean, organized layout. Strategic use of color allows users to see important info quickly.
Quip presents an airy, contemporary style with subtle animations and a bright accent color for personality.
Moven features a color-adjustable spending meter for alerting users to real-time spending habits. Also, we noticed its heavy use of graphs and charts with bold colors for tracking progress.
These companies helped us realize the importance of using proper white space to enhance glanceability and bring clarity to necessary color. Also, we needed to study use of colors for different states, as we need to provide familiarity and direction for users to accomplish routine tasks.
After analyzing competitors, the team came together to form design principles, as we needed common ground to keep our designs in check.
You Can Rely on Us
Restaurants trust and depend upon Deliveree to get food orders to customers in a timely manner. App interface should use a conservative color palette and layout to project a professional business.
We Fit into Your Workflow
Staff managing orders will often be rushed and multi-tasking. App should fit in side-by-side with existing hardware.
We’ll Keep You Informed
We’ll keep users in the loop of all necessary order/delivery information. Our design patterns, colors, and spacing should help users stay up to date.
Design Exploration
After determining our design principles, we kickstarted our individual design paths for Deliveree.
For the first style tile, a simple, lighthearted mood takes stage. As restaurant staff and delivery drivers don’t need more visual distraction to clutter their busy workload, I made white and light grays serve as primary backgrounds, while using bright flat colors to indicate alerts, state changes, and important text. Also, I added pill buttons and easy-to-read outline icons to give the app an approachable effect.
Then, I styled the order status bar, one of our most important UI elements, by creating circle status indicators. Colors and icons would indicate the progress until a completed delivery filled all circles. Our client thought this style tile was nice, but felt some of the elements didn’t represent the professional look they were going for.
The second style alluded to a Deliveree driver with wheel skills of The Transporter. Sharp, crisp, and swift were keywords floating in my head. A bold red was the primary color, while small instances of green and orange fit for delivery status changes and alerts. Also, I tried to tame angular contemporary headings with a simple sans-serif.
This style direction was a no-go, as our client felt overwhelmed by the panicky, stressful nature of red elements.
“This one feels like an accident is about to happen and we don’t want our drivers to experience that.”
The last style tile was the strongest as I steered our primary color palette toward variations of blues found on their website. Then I lightened all secondary colors to a point where they were glanceable, but not eye piercing like past style tiles. Our client really liked this one and felt it had the right amount of balance to represent their brand well.
Before moving ahead with the style direction, I met with my program directors and teammates for feedback. The overall response was that I make small tweaks to my color palette to enhance things a bit. I stared at the style tile for some time and realized my colors made Deliveree look like a banking app or Windows 3.1 Minesweeper. Sprucing up colors to bring things in the modern age is something I planned to explore in the next design stage.
High Fidelity Mockups
Before diving into our first round of high fidelity screens, our group met to discuss which platform we would design for. At the moment, the majority of Deliveree users were most comfortable using an Amazon version of the Android app. This was due to Deliveree gifting restaurant partners with Kindle Fire 7s as a low-cost incentive to use the app.
The team had major concerns designing for the Kindle Fire, as Amazon’s Appstore doesn’t have a digital distribution footprint as large as Google's Play Store or Apple’s App Store. Also, we discovered most of Deliveree drivers were iPhone users. Thinking of Deliveree’s impending partnership growth and Amazon's existing relationship with Android Apps, we chose to design for iOS.
After analyzing UX wireframes, studying iOS Human Interface Guidelines, and referencing team design principles, I started my first pass of designing iPad screens.
For the Customer Search Screen, I replaced top-left logo information with Deliveree header text and created center feature space for restaurant logos and their custom background. In the kickoff meeting, Deliveree expressed how restaurants were proud of the partnerships and I wanted to add something that would make them feel like they were using something they were truly a part of.
Also, I enhanced glanceability by rotating tab text and adding solid icons. Last, adding red to the Orders-in-Progress circle was important in keeping restaurant staff informed of the current workload.
Most elements remained on the Request Driver Screen. I removed all outline icons, as they either implied the obvious or were hard to glance at. Also, I resized the Customer Info box to give space for the Delivery Date field. Having that field beside the Submit Driver Request button seemed out of place, as requesting drivers is the main, final action for this screen.
For the In-Progress Orders Screen, I adjusted text hierarchy and replaced the confusing recall driver icon. Primary design was for the delivery status bar. Along with changing segment shapes, I used colors to indicate change. Green represented order progress, orange stood for a late delivery, and red meant there was a major error or emergency in place (such as extreme traffic). Also, I replaced profile icons with photos, as I thought the app gave sign up abilities to customers.
The Delivered Orders Screen had lot of elements similar to the In Progress Orders Screen. Aside from decluttering the View Reports button area and changing/replacing icons, there weren’t many changes.
Adding color to the Map View of Orders Screen was priority, as it needed to highlight things of importance while remaining easy to use. As time is a huge factor for restaurants, I wanted the Estimated Arrival section to stand out. Also, I added red to the restaurant and customer address map icons to distinguish them from everything else.
Adjusting whitespace and maintaining a professional look was my goal for the Reports Screen. I placed the “25 Orders” and “Let’s Celebrate” cards up top beside each other because of their temporary, swipe-able nature. This helped give graphs and charts appropriate room for glanceability.
After designing screens, we planned our first-round user test schedule, as we needed fast feedback to make time for design iterations. I served as a point-of-contact for the team and helped conduct user tests, which featured a mix of restaurant partners and Deliveree drivers. For each testing session, we shared our key screens on an iPad using Sketch Mirror and got a wide range of responses.
In-Progress Orders Screen
Talking with users, I learned customer photos were unnecessary as they could open a can of distractions. Instead of viewing Deliveree as a tool, staff may view it as another social media outlet and invite bias, judgement, and creepy vibes in the delivery process.
“We don’t want staff to see a pic and think, ‘Oh, her profile is hot! I’ll deliver the food this time!’”
Also, users had trouble understanding delivery status time stamps. I needed to adjust my text hierarchy, as bold text seemed inconsistent and times didn't show prominence.
The Orders in Progress notification bubble got praise, but I had concerns about its size and position. I didn't want users to stare at a red dot and miss out on important information, so I made a note to adjust it before the next round of user tests .
Map View of Orders Screen
My color palette had mixed responses from users. Some felt it was colorful, while others said it reminded them of Facebook. Also, my map colors seemed to compete with each other, causing some users to have trouble finding restaurant and delivery locations.
Although users liked my Estimated Arrival section, I still saw opportunity to enhance the text hierarchy. Also, I needed to place attention on removing customer photos and enhancing glanceability for the driver icon.
Reports Screen
One user mentioned how this screen should only be visible to restaurant owners, as details could incite staff rebellion or internal competition. This issue dipped into the UX of the project, but I felt it was valid enough to mention to our client.
Users liked the clear graphs and charts, but had trouble deciphering order achievement messages. I made a note to try adjusting language for future iterations.
After the first round of user tests, our team met to share individual screen feedback and discuss any major changes we should make to our designs as a group. One significant insight was learning about the importance of a customer’s phone number in the delivery process.
“If I click or tap something, it should take seconds. All seconds are important to us because we have to use our time wisely.”
Since restaurant staff need to access numbers as soon as possible, we felt a number keypad should have priority over iOS’s keypad on the Customer Search Screen, as it seemed to slow down the delivery process. This change wasn’t in UX wireframes, but we discussed it with the UX team and planned to add it in future designs for testing.
A bit cumbersome, as one has to go through two steps to start a number search. These seconds are dollars for restaurants.
Next, I made more iPad screen iterations and began my first pass of designing iPhone screens for our second round of user testing.
For the Confirm Order Screen, I kept a lot of elements the same and focused on adjusting text hierarchy to promote time for drivers. Also, I added color to the bottom buttons to clear up any decision confusion.
The Confirm Pickup Screen showed more examples of adjusting text hierarchy to make content glanceable and open for quick decisions.
Reducing list features was priority for the Orders In Progress Screen, as I didn’t want to overwhelm drivers with too many options. Also, some text was really hard to read, so I adjusted fonts sizes a bit.
Second-round feedback from drivers and restaurant staff was positive overall, so most of my changes were minimal things like adjusting icons and wording to something people could recognize from a global standpoint.
All restaurant staff felt the number keypad would be easier to use for finding customers than iOS’s keypad. The number keypad resembled many of the restaurants’ Point-of-Sale (POS) Systems, so the design wouldn’t distract existing workflow.
One significant takeaway was to stay consistent in making order/delivery information as clear as possible. In testing, I realized my In-Progress Orders Screen needed work. My lack of text hierarchy caused users to waste time searching for meaning rather than glance and be informed. Since this screen had a high level of importance and I didn’t have a lot to correct on other screens, I spent the bulk of my time making priority iterations.
Although I longed for extra time to gain feedback for both platforms, I felt confident enough to move forward with my designs for prototyping.
Due to the app’s instant rebranding, I designed a style guide to carry my design language over to developers and serve as a reference for any changes Deliveree may make to its marketing website.
Future Considerations
If I had more time to spend on the Deliveree project, I would:
- Redesign the logo. Deliveree's logo was a part of the initial rebranding process and I felt the latest design didn't speak to what the company represented. My teammates had similar thoughts, as we realized the logo's strong resemblance to Jiffy Lube's logo. Although the team didn't have time to dive into logo design, we shared design recommendations with Deliveree for future consideration.
Conduct user testing for prototypes with proper interactive features. I remembered my positive reaction to Domino's Pizza Tracker and wondered if our users would have the chance to enjoy an interactive delivery status bar or customizable reports while testing. Prototypes are only a fraction of the final product, but it’s extremely hard to resist testing something you built to be as real as possible! Especially when our UX team provided great annotations for interactions.
Insights
One big takeaway from this project is respecting the essential nature of UI user testing. Although it doesn’t seem to happen as much as UX user testing, there are some things you won’t learn about your own design, until you sit down with people and get an understanding of who they are and what works for them. There were times in the project when I saw how the simplest change of a word or icon brought a wave of clarity to a Deliveree driver who just made it to the United States eight months ago and speaks little-to-no English.
Also, balanced time creates a better design flow. Our team had a total of twelve user tests in two weeks. Although we were grateful to interact with so many people and receive a lot of valuable feedback, our user test scheduling caused us to lose a ton of time in making distinct changes I wanted to see in my final prototype.
It was a pleasure working with the Deliveree! Our team had a blast helping them move their brand in right direction and I look forward to sharing updates as they launch their revised app in the future!
Thank you for your time!
