Revamping the Jarvis UI for better delivery logistics
At the heart of Orderin’s delivery experience is our much-loved monitor, Jarvis. From tracking delivery progress, monitoring drivers, troubleshooting problems — she can do it all.
Created by a team of external developers some time back, its design was purely based on functional requirements. This resulted in a capable product, but an awkward experience and an under-loved, ugly UI (sorry). Jarvis was like the ‘before’ shot of the makeover candidate in her practical, but cringey tracksuit pants —and I was dying for a chance to work on her.
Then one day, it happened: “We’re giving a client access to Jarvis, and we need to make some updates.” I self-fived, I air-guitared, I pictured the triumphant makeover reveal, and I …
“Why do you want to change it?” product owners asked, “Jarvis is fine … isn’t it?” Sure, it was versatile, and certainly invaluable. But on closer examination however, Jarvis had some concerning usability issues.
Legibility and accessibility
The UI had very poor contrast in most of the text, buttons, and other elements on the dark background. Checking the UI on contrast checkers was a complete, utter fail across the board.
Ease and efficiency
The information on most of the pages was poorly laid out and not easily scannable. It was difficult to identify what you’re looking for without closely examining each item to look for it.
The Order Details page is a good example of where little visual hierarchy exists, and where data is hard to identify and separate from each other.
The wild range of colours in the product also created usability issues. When colours are used inconsistently, users have to work harder to identify and interpret their meaning.
Random coloured text also makes it harder to identify which elements are interactive. Not to mention accessibility difficulties for colour blink folk.
Aesthetics and brand
As one of Orderin’ most crucial tools, I felt that Jarvis should reflect the personality and mission of its people. Besides this, scoff as you may, it’s been proven that users respond better to aesthetically pleasing products. At the time, Jarvis was still sporting the styles of about 3 rebrands ago. Considering we were about to open the product to clients, this was unacceptable.
“It’s only an internal tool, it doesn’t really matter”
Ever come up against this? By denying any user good quality tools, they’re also getting denied the speed and efficiency that’s unlocked by design. Internal tools should be the number one priority, as messing up internally affects everything else — in our case, drivers, customers, and enterprise clients who expect near-perfect delivery performance.
By giving users a tool that’s equally powerful and beautiful, we’ll be enabling them to work at their very best.
Getting started
As much as I would have loved to throw out the whole product with a great sweeping gesture, declaring, “This is s**t! Let’s star over!”, that was just not realistic for our circumstances. What we settled on in the end was to apply some basic UI techniques to improve general usability and style.
Queue music! Hold my latte! Let’s do this!
Correcting colours
When a background is dark, like in Jarvis, deep, saturated colours appear extra intense, and vibrate against the background, making it hard to read and putting strain on the eyes. This ‘vibration’ happens because the saturated colour has a low luminosity, similar to the background. When two colours of similar luminance are used together, they clash. This is especially prone to happen with blues and reds on black. Erik Kennedy has an excellent article that dives deeper into this. To increase the luminosity gap, and avoid the clash, make your secondary colours brighter and less saturated. Double check your colours by setting your layer blend mode to Luminosity.
Conversely, overly bright colours in a dark UI can literally hurt to look at. Imagine turning on your mobile in a dark room, blasting your eyes with light. Ouch. This is why we don’t use pure (#FFF) white text and surfaces on dark backgrounds, unless it really needs to stand out.
My solution was to create a darker tone of the app’s primary colour, and use that as the default for larger surfaces, such as buttons. These elements adopt the brighter, original primary colour only on hover or focus.
By default, text is a light shade of grey, which can be easily modulated to be darker (for de-emphasised or inactive states) or lighter (for elevated, emphasised states)
Creating depth
Working with a dark UI, you really get a strong sense of elevation differences between elements. Working with light UIs, our surfaces are generally slightly elevated using shadows, or slightly lowered using light grey tones, just enough for black text to remain readable. To me, it feels like the range of levels is quite small.
With dark UI, I find that I can use a greater range of surface colours AND keep light text legible. Thus, it feels like you can work with larger range of levels in your UI. Consider that with dark UI, you’re starting at the bottom, and working up to the lightest level. While with light UIs, you’re starting at the top, and working down to the darkest level. Material has a really handy guide for this.
This enhanced depth quality gave me an extra tool to help define information architecture in the UI — less important areas can recede, while more important areas can be raised up. I used a selection of cool charcoal hues (dankie Lizane!) to separate, group, and prioritise content.
Creating space
When ever I’m stuck on a design, issues of “something is off” or, “it doesn’t feel right” can almost always be traced back to how content is grouped and spaced on a page.
Cramming elements on to a page like canning sardines makes specific content relating to a user’s task hard to find. So instead of helping the user achieve her goals quickly, you’re increasing cognitive load on the user’s already-overwhelmed brain and increasing the time needed to complete a task.
A lot of Jarvis was created without considering the priorities of the page, or how content is read naturally by humans. A really simple fix was to examine the page, determine what the key bits of information are, and prioritise them. Then, I laid out the rest of the content out in a nice spacious, readable way that facilitates being able to scan the page and quickly spot what you need. Deliveries are a very time-sensitive matter, so any time and effort that we can spare users results in faster issue resolutions.
The big reveal
The best part of any makeover show is that bit where the once-mousey, now-fabulous contestant steps out with newfound swagger in all her glittering glory. She dazzles the camera with her smile, and flips her styled locks to the shrieks of her flabbergasted friends (“Is that really YOU?!”) and the triumphant applause from smug hosts (“Nailed it”). She goes on to describe, tearfully, how she has been transformed for life, and thanks her hosts for liberating her from the elasticated clutches of her tracksuit pants.
I digress.
Releasing the new UI didn’t go anything like that. Apart from a Slack announcement with some excited emoji responses it was pretty much business as usual. Which meant, though, that users were able to familiarise themselves and keep working with a ‘new’ product, relatively seamlessly.
Shaking up the status quo of Jarvis opened the communication lines for users who wanted to give feedback, question certain existing features, or suggest new ones. Over time, I noticed how users task flows, and parts of the UI they previously relied on heavily, changed subtly.
Here are a few before and afters:
Delivery monitor
- Cleaner, more spacious table styling with more legible text
- Improved copy and functionality of the filters
- New app header that fits in with dark UI
- Bye, confusing cautionary compliment
Delivery details page
- Improved navigation to and from the delivery page
- Better layout of information
- Show and hide delivery activity
- Bye, super wide buttons
- Added copy / view coordinates functionality
Drivers page
- Removed disused features from the table
- Better status display — icon and label for accessibility
- Introduced initials for drivers without profile pictures
- Replaced coloured icon for vehicle indicator with simple text field
Main navigation
- Improved styling that fits in with the rest of the UI
- Grouping and categorising items
- Added icons as visual cues to help users identify sections
Filters
- Ditched the inconsistent blue button-style input chip
- Created simpler, flatter, more legible styles
- Created dark, spacious overlays for drop downs
That’s it, for now.
While the makeover was a good start, there are still many aspects of the product I’d like to work on. The rainbow buttons screen still persists, Jarvis isn’t mobile friendly, and we don’t have a good solution for displaying a delivery’s progress. All in good time, Jarvis. For now, enjoy your new hair and makeup, we’ve got lots in store for you.
Buckets of appreciation for the heroic back end devs that took this on with me, and had patience with my 1px adjustment requests. We did good, you guys ❤
