Delivery Template

Shipped in 2021: Delivery model app for drivers in real-time and scheduled delivery incorporates readymade
APIs with integration of retailer’s website, mobile app, and their PoS/online ordering system.

Rebecca Wyatt UX UI Designer: boons Delivery App
boons UX UI Process

Delivery app for drivers

Quick note, what the app does:

  • A customer places delivery order through the boons Delivery app
  • The driver receives a job and accepts
  • Once the driver accepts the job, navigates to retailer
  • After picking up the delivery, the driver will navigate to customer

boons.io has built an ecosystem where everyone has access to different services throughout their area. Local retailers can have a shop website/app designed to synch their delivery orders with boons.io drivers and operate real-time and scheduled deliveries.

Rebecca Wyatt UX UI Designer: boons Delivery App

Drivers: partners of boons daily operations in providing services to the business owners and consumers

Business Owners: partners of boons that provide delivery goods

Consumers: the end users of the delivery ecosystem

The Undertaking

To redesign the boons.io prototype: Delivery model app for drivers with real-time and scheduled delivery mode options. Evaluating if the app addresses:

  • Users performing jobs faster
  • Beating traffic delays
  • Improving delivery ETA

To understand and relate to challenges associated with delivery drivers, to understand different areas of the ecosystem they interact within this app.

Deliver findings to stakeholders and create actionable lists that address issues focused on UX, UI, and Visual Design.

Deliverables

  • UX design overhaul
  • UI design rebuild screens
  • Rebrand app
  • Update design system

Key Deliverables

  • Actionable lists: List of findings/assumptions and validation of these findings/assumptions
  • Wireframe/Prototyoes end-to-end flow of delivery driver app
  • Microstates shown in flow state via video files
  • Showcase visual design

Platform: iOS

Discoveries:

  • Branding/Styling was minimal due to no existing style guides established
  • UX research was limited to a few users and no findings had been documented
  • App was leaning towards minimal user-centric accesssibility and not following UAAG
  • UI patterns were in line with market-related UI patterns but could use enhancement
  • Challenges with the delivery process, ie: real-time tracking and lack of information about orders.

Empathize

Empathy UX Design

To assess and iterate on improvements for the app, one must be able to empathize with the user. Problem statements, constraints, happy paths, and pain points must all be assessed using different techniques. But the first most important step is to brainstorm: find out who is the user and what apps are part of a user experience for a Delivery Driver modal app.

Comparative Research

Created a Google Sheet of all existing apps that are Delivery Service-oriented designed to review Pros and Cons:

Rebecca Wyatt UX UI Designer: boons Delivery App

Findings: Pay modal, across the board is the most documented with ‘Tip Culture’ being the most identified.

Delivery app users tend to be in 2 modes when on their device:

  • Microtasking, intense bursts of focused activity, like checking an order status
  • Orienting themselves to a location or looking at directions

Heuristic Evaluation

Ran an analysis on the existing prototype to assess for poor usability before the redesign began. The main benefit of using this assessment on the app is that it does not require any users. This was a good decision due to the company having limited funds for user testing.

Created the following redesign evaluation:

  • Keep user informed re: system status
  • System should speak users’ language that is familiar to the user
  • Create hierarchy and order
  • Grouping relevant information and actions
  • Emphasis and guidance on actions/information
  • User control and freedom to leave an unwanted state quickly
  • Flexibility and efficiency of use
  • Aesthetic and minimalist design
  • Improve visual design to make app accessible in different environments, ie: outdoors/high-glare
  • Optimizing gestures for one handed use
  • Help users recognize, diagnose, and recover from errors
  • Help and documentation

Additional Research

Analyzed reviews from the Apple Store on delivery driver apps were also used as an alternative to limited funding for user testing.

The Drivers

Driver’s user into two main groups:

  • First time enrolled drivers- Drivers successfully compete their enrollment to boons delivery service
  • Experienced drivers- Drivers who have been part of the delivery app for some time

Both have similar motivations but different needs. More onboarding guidance is needed for first-time enrolled drivers, and more efficiency is needed for experienced drivers.

I researched via YouTube, online comments, and boons.io support files to discover who the users are, what they care about, their goals, and their frustrations. To build out a user persona as a base reference throughout the design process:

User Persona

Understanding User Contexts and Needs

Current contexts on when/where the app will be used and the current challenges faced by users.

  • When. Assumed the drivers will use the app during working hours. The working shift may differ, some may use during the day, and others use it at night.
  • Where. Drivers will mostly use this app while driving to different pick-up and delivery locations in their car in order to get accurate instructions.

I wanted to know any problems users are facing and also positive feedbacks so that I can put more emphasis on it. I collected all the contexts and reviewed them when making design decisions so I would utilize a great driver experience and what to avoid. One area of interest was how jobs are allocated or how to notify drivers in order to make the allocation procedure.

Pain Points

  • Getting pick up location far off from current location
  • Unable to accept multiple jobs along a similar route for effciency
  • Battery consumption by the app
  • Ability to perform on a low speed network

Good vs. Bad

1. Accept a job
  • Good Experience: getting jobs that are within the service area set
  • Good Experience: ability to quickly scan to available jobs before accepting
  • Good Experience: ability to see delivery locations and estimated earnings
  • Bad Experience: getting jobs request while in the middle of active job
2. Picking up item to deliver
  • Good Experience: ability to identify the delivery is correct
  • Good Experience: ability to check pick-up status
3. At pick-up and drop-off locations
  • Good Experience: ability to contact assigned businesses and customers
  • Bad Experience: unable to contact people which may result in delay of the job

Exploration

In order to make onboarding for the first-time drivers delightful, I used a method called progressive disclosure. This interaction delays the appearance of advanced or little-used options to reduce the number of errors and facilitate user learning.

The objective is to not overwhelm the user with all the available options, I regulated the less frequent or more complex tasks to later steps focusing on the core user flow. In this scenario, I am enabling the new users to go through our complete end-to-end user journey.

Rebecca Wyatt UX UI Designer: boons Delivery App

Exploitation

After the drivers are familiar with the flow, they may want to set their preferences in order to maximize their earnings by completing more jobs in a day. AI is providing more jobs along an optimized route and the business is offering bonuses as appreciation to hard-working drivers.

Rebecca Wyatt UX UI Designer: boons Delivery App

Information Architecture

To accommodate both beginner and expert users, I wanted to design an architecture where there is a single point of start and the ability to take action in each stage of the journey.

boons Information Architect chart

Ideate

Ideation

Storyboards

Created a storyboard on how to see the user experience. Creating these storyboards helps me empathize with the user journey and enables me to understand the contextual situation and ideate challenges or needs users may have.

Rebecca Wyatt boons delivery App Apple Store
Rebecca Wyatt boons delivery App Apple Store

Flow Charts

Created flowcharts to help visualize the steps a user takes to complete a task or achieve goals for Scheduled and Real-Time mode screens. Identifying and reflecting on how users navigate will help you meet their needs more efficiently. Implemented pre-designed screens to assess the user flow.

Scheduled Flow Chart

Iterations:

  • Created UXR documentation via video, online, and Support files
  • Designed user flow screens for both app mode options
  • Depicted wireframes with new UI patterns
  • Researched best guidelines to follow via UAAG

Bring to Life

Bring to Life

New Design System

boons design system

Redline Spec Guidelines

Provided Dev team with redline spec files to ensure that all Design System guidelines are implemented.

Rebecca Wyatt UX UI Designer: boons Delivery App

Hi Fi Prototype

Designed all Hi Fi screens in the Sketch app and would synch with zeplin and figma apps for sharing/presenting purposes.

Rebecca Wyatt UX UI Designer Sketch HiFi Scrcreens

Video Recorded Hi Fi Prototypes

Collaborated with Dev team on producing videos of the app compiled and assessed on different iPhone screens. Research findings revealed that Delivery drivers vary in phone sizes from small screen to large screen which played an important role in determining the UI layout to address the various screen sizes. This was a great phase of iteration to view and interact with the app on different iPhones.

Iterations:

  • Created Style Guidelines
  • Documented UI Patterns Library
  • Styled new Hi Fi prototypes of app screens via Sketch app
  • Designed/Styled new micro enhancements: push notification, expandable bottom half sheet, UISwitches, bottom nav, and gesture swipes
  • Produced videos with Dev Team to show User Flow

Verify

Verify: UX design

UX UI Redesign: Bottom Drawer Modal

  • Implemented UX pattern that focused on one-handed usage
  • Introduced new navigation design: gesture touch swipe
  • Designed bottom drawer sheet with native API features: calling and messaging

Problem/Discovery:

Early user testing revealed the below issue:

  • Lack of accessibility ie: retrieving ‘Order’ information

“About 15% of smartphone users have accessibility problems”

Users were wanting to access order information while driving with a quick/easy flow that allowed them to make a quick glance and phone call/message to business or customer in a safe manner.

In these ‘micro-moments’ aka short bursts, users are goal-oriented and have limited time and bandwidth. They seek streamlined interactions and expect immediate results.

Order information was appearing as a concealed feature and users felt as if they were on a treasure hunt of sorts when trying to quickly access order information from the existing navigation.

Before Order Flow
BEFORE: Order details buried in 4 screen task flow was not a short burst experience.

The specific scenario was a delivery driver on the go and is wanting to use the app in a short burst. A short burst would reflect how a distracting environment forces users to engage in single-handed usage with short spans of partial attention. Users shouldn’t have to struggle to reach an important part of the app by stretching to the top of the screen. That’s just bad usability. The app is primarily used while in a driving mode so the most optimal type of mobile design would be with a single hand that is a quick interaction and is supported by smooth functionality.

“49% of users hold their phones with one-hand specifically while they are on the go”

Researched methods of holding a touchscreen phone with one hand and discovered that here are 3 zones: Hard/Stretching/Natural and with bigger screens another challenge is added: Reachability.

Conclusion, users of the app tend to use the app a lot in distracting scenarios, ie; driving, than focus on designing patterns that target reachability and one-handed use.

Created screens depicting the bottom drawer modal showing that this Navigation UX Patten was in the Natural zone:

Rebecca Wyatt UX UI Designer: boons Delivery App

70% of users discover features of the app using navigation links compared to search or other ways

Another issue at hand was that the driver at some points of flow in the app is viewing the Map UI which cannot be obstructed by additional features ie: an icon.

Map UI comparable research led me to the app Waze which had brilliantly designed a bottom drawer for access to the app’s Menu via an icon. This Waze design was implemented into boons.io Delivery app wireframes. I designed a bottom drawer modal that follows UI guidelines of expanding to the height of the content. I also presented to stakeholders that this feature would have the option to call or message using the OS native design feature of CALL / TEXT / or CANCEL CTA buttons:

Lo Fi Prototype:

boons UX wireframes

Hi Fi Prototype:

The first animated prototype was shown to stakeholders to depict user flow and validate findings for this design pattern/feature:

boons Hi Fi Prototype

Hi-Fi prototype screen iterations were uploaded to Zeplin and the engineering team would generate code. View video sample of iteration designs below:

Before rolling it out more broadly, boons.io tested the Order Bottom Drawer Modal with both new and existing users to make certain there were no negative effects. It found that the feature helped users to complete jobs quicker when able to review ordered items, call/message with quick short-burst actions throughout their entire order experience and most importantly, in a safe manner while driving.

Please visit other professional experience: boons Driver App

Back to HOME