Redesign of Ninjavan's Logistics Dashboard for SEA Merchants
I led the redesign of Ninja Van's Logistics Dashboard for 35,000+ merchants in Southeast Asia.
The redesigned web app made it 3x easier for business users to schedule pickups and keep track of deliveries to their customers.
Timeline
Q1 2018 - Q3 2018
What we shipped
A revamped responsive webapp
My Role
Product Designer
SKILLS
Research (Regional)
Rapid Prototyping
UX/UI Design
Design System
Context
Ninja Van is one of Southeast Asia’s biggest logistics unicorn, primarily focused on delivering parcels from e-commerce merchants to their customers.
Although Ninja Van had a web app, adoption was low. Instead, merchants heavily relied on account managers and customer service to help them with basic tasks. This sapped precious company resources. Ninjavan wanted to change that.
Why weren't merchants using the self-serve web app? How could we increase adoption?
Research
We conducted 65+ user interviews in 7 Southeast Asian countries with the merchants who shipped with us. We also conducted internal interviews with colleagues in marketing, merchant support, and account managers to understand common problems they faced.
From the research, we identified key user types, tasks, key workflows, and features needed to support them.
Insights
Complicated web app
Many users did not know how to use the desktop web app because of it’s complexity
Diverse user needs and priorities
Merchants had different processes and internal roles, so there wasn’t a one-size fits all solution to their workflows.
Fear of making mistakes
Users tended not to ‘click around and explore’ because any mistakes could have adversely impact deliveries and jeopardise their job performance.
Approach
Reducing Percieved Complexity
The web app was complex because it had many features that were essential to the delivery process. Since we couldn’t reduce the inherent complexity, I focused on reducing the perceived complexity.
Optimising workflows and clarity
While the old dashboard kept features in a logically ordered top nav, users struggled with it because features they used were hidden in the hierarchy, or gave a disjointed experience in their workflows.
In the redesign, I designed easy access to clearly marked, streamlined workflow pathways.
Making abstract concepts easily understandable
Abstract enterprise software operations were difficult for many SEA users to understand due to varied education levels and tech familiarity.
To help users better grasp concepts, I redesigned features to fit into mental models they were familiar with in their lives.
One of the most successful examples was a feature that allowed users to upload orders in bulk via Excel/CSV. The redesign borrowed a model from children's games, and led to a 18x increase in task completion rate.
Designing for emotional needs
Error handling was another important part of the redesign. Our merchants frequently panicked if the system showed errors, so creating an experience that de-escalate that panic was essential to get users to trust the software and use it more often
In the redesign, I downplayed 'errors', and created a system that proactively prevented mistakes.
Designing for Accessibility
By observing our merchants worked, I also identified hidden accessibility needs that I then designed for.
highlights
Increased use of icons to guide users (as opposed to text)
To bridge the education an tech disparity in SEA.
Colour Accessibility
To address readability on older screens and colour blindness in the logistics industry.
Space for Language Differences
To ensure the UI supported the diverse languages and word length in SEA.
Making it look good
I followed Ninja Van's brand colours of red and black to create a UI.
With my UI skills now I wished I did a better job, but that mild embarrassment everyone feels looking at old work is called ‘Growth’. 😉
Design System
Over time, we amassed a lot of UI components. I was responsible for managing, standardising and documenting. Using the atomic system, I documented components as atoms, molecules, and organisms.
This document provided developers, designers, and PMs a common point of reference, thus making standardisation between design and code a lot easier.
Results
After 8 months of hard work, we launched in August 2018 to a group of beta users. The redesigned led to these results:
