Drayage App

Redesigned for a startup in the intermodal freight industry.

Specific information about the client, names and locations have been omitted or changed in this case study.

The Brief

The Client had identified that screens on the application were underused.

After tackling this issue for 6 months, without significant progress, thats when they called the Cross.Team in.

The screen was supposed to make it easy for the user to schedule the truck drivers with their cargo.

‍

Screen 1: The user clicks on the items on the list on the left and assigns them to a driver on the right column. This created clutter specially when the average use case was 40+ drivers and 50+containers.

In the Ask, the Client wanted two screens in one, a dispatching screen and a driver routing screen.

Screen 2: Each card represents a container, the kanban columns represent stages in the handling of a container.

Discovery

Before tackling the user research , I had to familiarize myself with the industry, the processes, the marketplace, and the application. For a product to have an edge in the market, it has to understand where the market is and where it is going.

Products exist within a context.

The next step was understanding what are the industry standards, terminology, processes, common and best practices. This is akin to learning to speak the user’s language.

A heuristic analysis proved to be helpful for two reasons; first, as a way to familiarize myself with the product; second, to find obvious pain points in the UI.

InVision made it easy to put red dots on the heuristic errors encountered.

The Heuristics analysis came from a sitemap of the original application.

At this point I was ready to conduct user interviews at the currently active locations.

Over the course of two days, spent time understanding the users and the observations for the screens from the brief.

Define

I gathered my notes, pictures, and audio from the research and used Miro to create a virtual space to collaborate and share the findings with the team.

The team determined that there where two user types represented in the data.

• Edwin who sparingly uses the product, because according to him, he has worked over 15 years in the industry without need for an app. An extreme user.
• Amy & Patricia — users that have adopted the app and have worked for 6 months with the Client to tailor it to their needs. The mainstream users.

Edwin is the extreme user

Amy and Patricia are the mainstream users. Color coded the post-its to keep track.

The next step was to find patterns in the information by doing further Affinity Mapping.

Themes began to appear. Color coding the post-its proved helpful.

Themes with a lot of pain point post-its (red), became more important.

The most important insight appeared in this stage. It had been there all along: When users asked each other about ongoing orders they always addressed the driver first and then the cargo.

Develop

The driver-first approach cracked the mental model the screen was operating on, and now allowed exploration of ways of applying the actual user’s mental model. The significance of this is that the product and the most popular alternatives where based on a mental model, where the containers, orders or clients come first.

So I began exploring the information architecture of the screens to find possible ways to simplify the data, while still using the new found driver-first approach.

Mapped out all the endpoints and associations

The application showed all end points at all times, this was uneccesary and overwhelming to the users. So it was necessary to explore, if progressive disclosure could be applied to the application.

The next artifact shows how a card could be broken down to the most relevant information for a particular stage.

Reducing the cognitive and visual stimulus to the user, was one way that the redesign was going to be more user-friendly.

Exploration: Can the cluttered Kanban view be simplified? Yes.

The same was done with the the routing screen, these explorations, where the basis of what information needs to be included in the components; a prerequisite before initial sketching.

Exploration: Whats the important information the routing screen provides?

With a lot of details, endpoints and processes to keep track of, it was helpful to storyboard the high level purpose of the product.

Storyboarding was important to keep track of the ask and client explorations.

Using the research, a driver-based method of dispatching was presented to the Client, and they gave it the green light. I proceeded in sketching out the wireframes and screens that the client had asked for.

Mobile first and then expand to desktop view.

Component by component

The original routing and dispatching screens, had many indicators and alerts, with different colors; this chaos of colors and alerts affected the user interaction with the app. Instead of having multiple ways a component would alert a user, it was simplified to one; a rating system that already existed.

Deliver

The next step was looking at interactions in a mid fidelity prototype. This helped the team and customer, get an idea for how the application would transition from screen to screen.

Using Figma’s integrated Prototype feature made it easy

Utilizing the material.io recommendations for grids, as well as aligning components to an 8-point grid allowed for a clean aesthetic.

I followed the visual design system that was created for the project using these principles resulting in the next screen.

8-pixel grid, color hierarchy and monochromatic color scheme.

Implemetation

Delivering a product for development is not the end of the design process. Along the way, it was important to collaborate with the developers, answer questions about the product, and in many times work with the client and developers demand.

An example of this, is that the client asked for a “quick and dirty” version to roll out on the current stack they where using.

This ‘frankenstein’ used as many of the same components as possible while switching to the new flow.

This screen was tested for usability while the other version was in development.

I highly recommend clicking the link below to see the usability study that was presented to the Client.

Click here to see the usability report in Invision

Final Product

The visual design underwent a few changes after I handed it off. As I was assigned to work on another screen of the product, but I do believe it looks really nice.

Final Thoughts

This was a complete turn around for the product, with positive feedback from the users. This project, taught me that creativity when looking for insights, really pays off.

Want to learn more?

If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!

The mere formulation of a problem is far more essential than its solution

— Albert Einstein