In my final days in the UXDI program at General Assembly, I was assigned to work with EQULL, a B2B shipping and logistics platform that connects shippers with operators in the port drayage industry. For this project, I worked on a team with two other designers in my class to create a high-fidelity dashboard for shippers using the platform on the web from desktop computers. I primarily worked on the information architecture and interaction design but assisted where necessary on both research and visual design.
Shippers and drivers need a systemized way to communicate and view information.
EQULL’s software aimed to automate communication between shippers and truck drivers. But the dashboard they were using hardly functioned properly for automation. Rather, it acted as a “data dump” and was unintuitive to navigate. In addition, EQULL wanted to integrate a map view with live GPS into the dashboard. This left us with a few questions:
- What information should be prioritized?
- How could we make this dashboard more intuitive to use?
- Where would the map go and how will users interface with it?
- How could we facilitate communication between shippers and drivers?
Over the span of three weeks, we set out to answer these questions with our design. As we worked to achieve these goals, we also discovered that the scope of the project was not totally clear. We therefore had to adjust the scope we were designing for over the course of the project.
EQULL is transforming the port drayage industry.
Port drayage refers to the practice of making short hauls from ports and other similar areas to nearby locations. Enter EQULL, a digital platform that connects truck operators with shippers. EQULL was created to automate end-to-end processes in order to increase efficiency in the industry. This is a proven business model that other companies have used successfully. In 2018, Next Trucking did $46 million in sales and was valued at $500 million after only four years in business. EQULL is attempting to occupy this same niche as the first of its kind in the Pacific Northwest. As we started to work on this platform, we found that, based on the competitive analysis below, EQULL lacked certain key features. The most important features lacking were GPS tracking and dashboard view. We felt that giving shippers access to critical information quickly should be the priority in our design, especially given our time constraints.
|EQULL||Dray Now||Dray Alliance||Next Trucking|
|GPS Tracking – Map View|
|Android and iOS Apps|
Problems can create a chain reaction.
The lead researcher on this project and I conducted three user interviews: two were EQULL clients and one was an expert in the field. Between the information gathered here and domain research, we determined what steps needed to be taken to complete a shipment and what the painpoints were of theses steps were. When something goes wrong, it has the potential to create a chain reaction. Not having access to location information means that shippers have to call a dispatcher if there’s any confusion. Additionally, we learned that tracking the appointment time with the warehouse is especially crucial. If something changes, all parties must be aware as soon as possible.
EQULL'S web portal is an MVP with much to improve on.
I spent some time looking over EQULL’s current web portal to improve my understanding of its processes and to identify problems. From doing a heuristic evaluation of the dashboard, I found it to be somewhat disorganized. There were also some minor bugs, but nothing extreme. I also drew up a sitemap, which showed me that their messaging feature was hidden far too deep. Between our three user interviews and a few additional interviews with people outside the port drayage industry, we achieved a baseline System Usability Scale score from six users. With this information, we were ready to move forward.
Port drayage shipments occur in three main phases.
It was important for us to understand how port drayage shipment jobs flow and what the shipment states are so we could fully understand the process. The first shipment state is the ingating phase. This means the truck is at the port to pick up the shipment. Next, the shipment is outgated, meaning the truck makes its way to the warehouse where the shipment is due. And finally, there is the delivery phase where the truck arrives at the warehouse and unloads the shipment.
Operations Managers will be juggling a lot of shipments.
From here, I thought more about what kind of experience a typical user would have – what would their story be. I wrote a short premise out from their perspective:
“As an Operations Manager, I want to have quick access to all the information and tools I need to manage the 30-50 drayage shipments I deal with each week.”
I used this to guide a series of use cases. What tasks would an Operations Manager complete with our dashboard? And what are the exact steps needed for the each of these tasks?
Users will need to supply information, check information, and contact drivers.
There were four use cases that I broke down:
- Bulk imports
- One-off imports
- Getting information about shipments
- Contacting a driver
A bulk import entails uploading a spreadsheet full of jobs into the system. One-off imports are stand-alone shipment orders. Getting information about a shipment is what it sounds like – looking for key pieces of information as needed. And contacting a driver is also straight forward – if something happens then it’s crucial for everyone to be in contact.
The birth of Sheri – a typical EQULL user.
The next step was to condense the information we had. We wanted to personify the typical user and figure out what they would value most using our platform. To start out, we created an affinity map as shown below.
Grouping the information into meaningful categories proved to be difficult. After much thought and deliberation, we decided that our persona would highly value the following:
- I value maintaining relationships with carriers and clients.
- I want to see everything important in one place.
- I want to see the status and timing of my shipment.
In our user interviews, we discovered that it’s common for shippers to have regular clients. And in the MVP version of the dashboard, users found that it was difficult to find all the information they needed. These points were brought up often in our conversations and research, so we made sure to design with them in mind.
With all this in mind, our persona came to life. Sheri is an industry veteran that needs a new system she can depend on to manage all the imports she tracks. She’s sick of all the manual aspects of her job and has longed for something like EQULL to improve her experience. Finally, I took everything we had and wrote out a project summary to guide our project into the design phase.
The V1 design
The first high fidelity version of our design focused on putting everything generally where it should go. We aimed to give the user access to as much information at once without overwhelming them.
Putting it to the test.
The next step was to test whether users could navigate our dashboard and complete key tasks someone like Sheri would have to face every day. We administered a usability test to six participants. We had participants complete three tasks that involved searching for specific pieces of information and updating the warehouse appointment time. We chose the tasks on the basis of what we had learned were the most common tasks people like Sheri have to do.
Our usability test methodology.
My job was to administer four of the usability tests and to organize the information we got from them. During the usability tests, I took notes on what participants thought of the tasks as they did them. We also had participants complete a SUS form so we could log our improvement. Using the notes I took as reference, we separated all the changes we felt were possible into categories based on how easy they would be to make and the impact they would have. This way we could prioritize what changes we made based on our limited time.
Our shipment dashboard needed some refinement.
We found the most pressing issues to work on were:
- Navigation needed refinement
- Shipment Status needed more visibility
- Profile and notification icons needed more refinement
- Colors needed updating
The navigation on the sidebar wasn’t used to its fullest extent. Additionally, there was no signifier to the navigation bar to let users know where they were. Some users also felt the shipment status bars weren’t pronounced enough. Finally, users felt the notification system could use some work and incorporated into the sidebar menu.
There was some unclarity to be sorted out.
Our shipment details page had the following problems:
- Contact button was too far from the Activity Log
- The Edit button was confusing
- Updating the appointment time was not intuitive
- No route details on map
The Activity Log at the bottom of the screen is the primary way for shippers to communicate with the driver. Clicking the Contact button brings users to the bottom of the screen and activates a text box where users can start typing their message. But users felt this was unnecessary and nonintuitive. Some participants also struggled to complete one of our tasks, which was to edit the appointment time. This made us reconsider where we put the Edit button. And finally, participants felt the map could use more detail other than the destination and starting point.
Iterating and further refinement.
Our next version of the prototype was tested by the same participants. This time, there was less to work on but still a few issues:
- Renamed Message and Activity Log for clarity
- Added page anchor for Message Button
- Adjusted center column colors
- Added New Shipment Button
- Added color to selection border
Our platform improved considerably.
Overall, our platform achieved a significant SUS score improvement over the course of our iterations. With more time, we would:
- Expand contact and messaging functions
- Build filters and search functionality
- Build a flow for the Add Shipment Button
- Build a Quote flow
- Make website design responsive
The final version.
Below is a clickable version of the final prototype. Due to our limited scope and time, only certain aspects of it are clickable. Namely, you can go between the first and third jobs, go into alerts, go into More Details for these two jobs, and look at the Port pages by clicking on the icon on the map. Enjoy!
Our design allows users to see live updates for all the shipments they manage in one convenient feed. Selecting different shipments lets users quickly scan for vital information while taking note of where the shipment is on the map.
Clicking the More Details button lets users view and modify information about a particular shipment. This page has all the information about a shipment.
Communicate with Drivers
We made it easy for users to message drivers. Drivers and shippers can communicate in the Message and Activity Log for each shipment. This way it’s easy for users to keep track of the context for all their communication. Messages and Activity create alerts that users see both on the side menu and the top menu.
Driver and Warehouse Profiles
Users can see further information about drivers and warehouses they’re working with. Both drivers and warehouses have an activity log to help users figure out any problems that might occur.