Empowering businesses with sustainable deliveries
Improving B2B last-mile delivery portal through UX/UI best practices
Bringly specialises in sustainable, last-mile delivery throughout Europe. In order to look more professional and credible, Bringly recently updated their brand identity. This is reflected in their website, but not in their B2B portal. There are also parts of their new design system that could be expanded on or improved.
In order to work within a certain scope, it was necessary to focus on the key red route for B2B customers. This was the create new deliveries feature, as it was frequently used B2B interaction. Through a design system audit, competitor research and UX/UI best practices, this and the additional screens were improved.
Design Systems Audit
Competitor Research
Project Management
UX Design
UI Design
Analyse
Key user interactions could be improved within the new delivery flow (the project’s red route), as well as tracking deliveries and creating new locations. The delivery creation flow could be better organised according to both B2B and B2C experiences. Determining the possibility for or type of delivery was left until the end, even though the data was entered in earlier.
1. Map Takes Up Valuable Space
Map has little functional value and takes up valuable space. It was initially introduced for its visual impact, yet distracts the user.
2. Information Hierarchy and Error Messaging
To aid the user in quick information input and understanding, create sections and better system for clearer error messaging.
3. Earlier Indication of Delivery Possibilities
Package size and address determines which type of delivery is possible, where ‘Type of delivery’ should be earlier in the form.
4. Change Column Order
Revise order of columns to prioritise information for the user, where the tracking information and delivery status should be the most left columns.
5. Improve Iconography and Location for Task
Tasks are currently mixed in-between static information and iconography unclear. Both can be improved.
6. Add Location Button to Mirror Location’s Page
The floating button for ‘Add Location’ is not intuitive for the user, as it can be overlooked.
As there was no design system, I audited the updated website and existing B2B portal. The website created an ownable approach to sustainability, from the use of colours to graphics. The variety of component executions could be streamlined and updated with the necessary states and error messages.
I looked at both B2B and B2C platforms, as B2B users are still B2C users. This was important for creating new deliveries, as users are familiar with postal or e-commerce flows. Best-in-class examples of the former, as well as B2B package or food deliveries were referenced for information input and map usage.
Articulate
The existing version had the strength of being a no-scroll, one pager. However, many e-commerce delivery pages have a vertical scroll. For this reason, I suggested showing two versions: one page with a scroll and the other a step-by-step with no scroll. The one page scroll was chosen for its simplicity, and familiarity to an e-commerce experience.
Apply
The B2B portal was an opportunity to build and simplify the design system. All icons were customized, colour contrasts improved and components created to work across different devices. Improving error messages and their indications was a priority to solve for common customer service inquiries.
Assess
Though both of these pages look simple, there are multiple interactions occurring. These were taken into consideration to create an experience that felt interactive and responsive to input. The order of information was key for both creating deliveries and the table for tracking deliveries.
The Result
As Bringly is a start-up, they are building and improving overtime. My approach took this into consideration to elevate their existing brand and visual language, while improving the user experience. This resulted in a portal that felt familiar and prioritised information hierarchy.
Responsive Design: Though tablet was the key device, ensured elements scaled appropriately and identified breaking points.
Vertical Scroll Table: Chose a vertical versus horizontal scroll as it helped to see information for one order at once.
Go ahead, try it out for yourself
The Debrief
and Learnings
The next step is implementation. This project was done with a limited budget, which means best practices vs user testing informed the approach. However, not all is lost. The team can also assess success and further improve through customer service inquiries.
Scope Clarity with Visuals
What screens or flows included and not included in the scope could be improved by including visuals.
Micro Interactions, Tables
Designing an easy-to-use table includes a number of small decisions that impacts the user experience.
Thinking Through Design Systems
The design system was built and added to as screens were developed. It took multiple rounds to refine.