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
Hired to style boons.io delivery model app in real-time and scheduled delivery modes interface. Branding and styling of the app were the initial focus of the project scope but also assessed the UX UI design at my request. As well as revised design system to brand this new app.
To ensure that branding was incorporated into styling the app interface and to address UX UI design issues that were in need of assessment due to the app incorporating real-time and schedule time deliveries for example: keeping track of delivery order status and notifying customers in real-time versus scheduled delivery upkeep.
- 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
Understanding the task
To build an ecosystem where everyone has access to services throughout their area.
To understand and relate to challenges associated with drivers, we have to understand different areas of the ecosystem they interact with:
- Drivers, partners of boons are huge part of daily operations and work with the company to provide the best services to the customers. Inorder to serve the customers with the best satisfaction/quality, boons empowers the drivers with tools and services that enables them to do their job effectively with great customer experience.
- Business Owners, who are also the partners of boons empowering them to provide delivery services for improving their business entrepreneurs and creating a business relationship that is built on trust and effective solutions.
- Consumers, who are the end users of the delivery ecosystem and we implement tools and services in order to make their experience as smooth as possible.
The design of the app is an opportunity to improve driver’s app experience where they can perform jobs faster, beat traffic delays, improve delivery ETA and boost the economy in their region.
Created a Google Sheet of all existing apps that are Delivery Service-oriented designed to review Pros and Cons:
Driver’s audience 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.
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 also gathered feedback from the Support team that was aligned with the task at hand. 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.
In addition, I also made assumptions on how jobs are allocated or notified to drivers in order to make the allocation procedure.
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.
Reviewing user Support feedback, contextual situations, and storyboarding. I found the following are some pain points I can address in order to elevate the end-to-end user experience:
- 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 package is correct.
- Good Experience: ability to check pick-up status if it is a food delivery.
3. At pick-up and drop-off locations
- Good Experience: ability to contact assigned people.
- 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.
- 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
New Design System
- Worked with Dev Team on creating UXR documentation via Support and existing customers
- Created wireframes to depict existing patterns and introduce new UI patterns
- Researched best guidelines to follow via UAAG
- 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. As well as, user would be using
Map UI 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 Delivery app wireframes where 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 code the app to be shown on OS phones to review for accuracy of spec guidelines regarding my design submissions. View a sample of an iteration done and previewed via iOS app design, below in the video: