Designed and delivered scalable UI components, improving app performance and increasing volume
capacity by 10 times, supporting 60 deliveries per driver.
Overview
Roadie drivers use Roadie Delivery app to deliver orders. When delivering a package, drivers
need to complete a series of tasks on the app.
Drivers need to take delivery photo, collect recipient's signature, add delivery notes and add parking
or toll expenses. These tasks are displayed as a list of accordions that pops up at the bottom of the
screen, on top of a map.
Challenges
Speaking with engineers, I discovered two main problems with the existing design.
Use of Accordions
Expanding and condensing accordions automatically required series of front-end
checks
Map Refreshes
Refreshing the map behind the task drawer periodically creates computational load
Design Exploration
Based on challenges, we defined the requirements for a new design solution. From a technology
standpoint, the new design should replace accordions and be full-screen.
However, I also used this
opportunity to improve the design. The existing design uses custom layouts which is not scalable. Hence,
from a design perspective, the new design should consist of scalable components and
provide instructions and feedback, improving the UX.
New Design
Why the new design just works
Consistent Interaction
The old design used various interactive elements and button style that changed depending on the task.
The new design streamlines interaction by making it consistent.
Predictive Behavior
Tapping on each tasks surfaces a bottomsheet, making the new design predictive in its behavior.
Provides Feedback
The new design provides a summary of the information entered by the user as feedback.
Keeping the Good
While the new design introduces changes, I kept concepts from the old design that worked
well,
although slightly reinterpreted to fit the new design.
For instance, the old design used different surface color that allows the user to easily differentiate
between required and optional tasks. I kept the concept similar, using a darker color
for the required tasks and a lighter color for the optional tasks. I also added a
label to call out the
optional tasks which was missing in the old design.
Similarly, the new design mutes completed tasks like old design, directing
the user's attention
to pending tasks.
Takeaways
Working on this project was a great experience. It achieves a lot more than making the app look
beautiful (which is important!). It removes technical complexities, offering a lag-free experience to
drivers and enables business to scale volume capacity while making the experience intuitive.
It has taught me to think of designs as part of design system and how efficient design can be scaled and
adapted to fit future requirements. Since its introduction, we've utilized this component for more than
ten task items.
