boons.io
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
Driver Delivery app
Quick note, what the app does:
- A customer places delivery order at the retail store affiliated with the boons delivery program
- The delivery driver receives a job via the boons app 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.
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 Driver app 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
Initial Discoveries:
- Challenges with the delivery process, ie: real-time tracking and lack of information about orders
- 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
- Branding/Styling was minimal due to no existing style guides established
Empathize
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 model app.
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.
Evaluation Checklist:
- 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
- Support
Comparative Research
Compared Delivery Driver apps currently in the marketplace and assessed Pros and Cons.
Discovery: Pay modal, across-the-board is the most documented with ‘Tip Culture’ being the most identified as a Pain Point experience.
What is ‘Tip Culture’? Tipping is a custom practice in the USA. Tipping by definition is voluntary – at the discretion of the customer. However, tips are not customary in other parts of the world. Data findings reveal that tipping encourages racism, sexism, harassment, and exploitation.
Conclusion: Due to tipping being unreliable, creating a new feature where Tips could be paid ahead of time is more like a fee.
Other across-the-board discoveries:
- Con: Better driver naviagtion that picks quickest route
- Con: Offer route optimization for factoring issue
User Research
The Delivery Driver
Researched via YouTube, online comments, marketplace similar app reviews, 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:
Understanding User Contexts and Needs
Wanted to discover any problems users are facing and also positive feedback so that I can put more emphasis on it. I collected all the contexts and reviewed them when making redesign decisions so I would utilize a great driver experience and what to avoid.
Delivery Driver app users tend to be in 2 modes when on their device:
- Orienting themselves to a location or looking at directions
- Microtasking, intense bursts of focused activity, like checking an order status
Featured Pain Point
Option to connect with web mapping service, ie: Google Maps. Implementing this feature in the redesign addresses other pain points of the user experience regarding routing:
- Route optimization for factoring issues
- Re-optimize routes for any last minute changes
- Better driver navigation that picks quickest route
Paint Point Resolution:
Happy Path
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
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
Featured Happy Paths
Order status and making contact with the business and/or customer were implemented into a feature that addressed both good experiences.
Happy Paths Design:
User Journey Maps
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.
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.
Ideate
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.
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.
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
New Design System
Redline Spec Guidelines
Provided Dev team with redline spec files to ensure that all Design System guidelines are implemented.
Hi Fi Prototype
Designed all Hi Fi screens in the Sketch app and would synch with zeplin and figma apps for sharing/presenting purposes.
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
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.
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:
“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:
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:
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. Results: higher Retention and lower Abandonment due to redesign of micro-interactions that enable the driver to complete trips quicker, accomplish more trips, and make more money.