Deliveree

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

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.

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.