Shipped in 2021: Delivery model app for drivers in real-time and scheduled delivery incorporates readymade
APIs with intergration of retailer’s website, mobile app, and their PoS/online ordering system.
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
To assess and iterate on improvements to the boons.io prototype: Delivery model app for drivers with real-time and scheduled delivery mode options. Deliver findings to stakeholders and create actionable lists that address issues focused on UX, UI, and Visual Design.
- UX design overhaul
- UI design rebuild screens
- Rebrand app
- Update design system
- 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
- 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.
boons.io is building an ecosystem where everyone has access to different services throughout their area. To understand and relate to challenges associated with delivery drivers, we have to understand different areas of the ecosystem they interact within this app.
Delivery apps are focused on users performing jobs faster, beating traffic delays, improving delivery ETA, and boosting the local economy. The opportunity to improve the design of the app experience to enhance these features was planned out with the Delivery Ecosystem flow depicted below:
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
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.
Created a Google Sheet of all existing apps that are Delivery Service-oriented designed to review Pros and Cons:
Findings: Pay modal, across the board is the most documented with ‘Tip Culture’ being the most identified.
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.
- Keep user informed re: system status
- System should speak users’ language that is familiar to the user
- User control and freedom to leave an unwanted state quickly
- Flexibility and efficiency of use
- Aesthetic and minimalist design
- Help users recognize, diagnose, and recover from errors
- Help and documentation
Analyzed reviews from the Apple Store on delivery driver apps was also used as an alternative to limited funding for user testing.
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 file 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:
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.
- 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
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.
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.
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.
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.
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. Repurposed post redesigned screens to assess the user flow.
- 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
New Design System
Hi Fi Prototypes
Video Recorded Hi Fi Prototypes
- 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
UX UI Showcase – Bottom Drawer Modal:
- Implemented an ‘Order’ UI feature minimally on the ‘Map’ UI screen while the user is in driving mode
- Research findings concluded that a micro enhancement bottom half-sheet design could utilize several tap/swipe gesture prompts
- Designed expandable bottom sheet with features UI Switch and CTA button, as well as features of native OS messaging and mobile calling
Early user testing revealed that the drivers were wanting to access order information while driving with a flow that allowed them to make a quick glance and phone call to business or customer in a safe manner.
The issue at hand was that the driver at this point 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:
Hi Fi Prototype:
The first animated prototype was shown to stakeholders to depict user flow and validate findings for this design pattern/feature:
Hi-Fi prototype screen iterations were uploaded to Zeplin and the engineering team would generate code. View video sample of iteration designs below: