Tracking Trucks 

DASHBOARD AND VISUAL DESIGN FOR EQULL 

Improving the Minimum Viable Product for an early stage startup in the port drayage industry.

Completed as a client project as a student at General Assembly Seattle.

 

Project Summary

Duration

3 Weeks

Team

Tools

Adobe XD

Paper & Pencil

Deliverables

Clickable Prototype

Documentation Folder

UX Specifications

What I Did

  • Project Management: Calendar and Scope of Work

  • Research:  Organizational Research, Interview Screening Survey, Card Sort, Task Analysis, Affinity Map (as a group)

  • Analyze: Customer Journey, User Flow Diagrams, Content Inventory

  • Design: Design Studio, Layout in Wireframes, Icon Creation, Visual Design, Color and Font

  • Deliver: Third of Presentation, UX Specifications

What Are We Looking At? - The Research Phase

What's the Background for This Project? - Initial Research

The client was fairly open to allowing us to focus on the area that we found most interesting or the biggest opportunity. Because of this we had to do a fair amount of research to determine what was best to focus on. Port drayage is also a somewhat niche market, so we also had to do basic research into the business to figure out how the industry works as a whole, how the current Equll site worked, and what the competition looked like. Competitive research was limited due to our lack of ability to log into those systems, but some companies did have useful information on their public facing sites. We unfortunately also had fairly limited access to users of the current software, so our interviews were a bit sparse. Fortunately we were able to get reasonable information and feedback from everyone we interviewed since the software isn't that much different than other business/shipment tracking applications.

What Are We Starting With? - Current Site

To the right are screenshots of Equll's Minimum Viable Product. These are the shipment dashboard and shipment detail pages. The design is quite minimal and while there is a lot of information that is present, much of it looks the same. Based on our initial interviews, there was also some confusion about the top and side menus and what they did.

We did some usability testing on the initial site and it received a System Usability Scale Score of 34.

Current Equll Shipment Dashboard
Current Equll Shipment Detail Page

What Are Companies In Adjacent Areas Doing? - Comparative Analysis

While one of my teammates focused on Competitive Analysis, I looked into some Comparative Analysis to see what we could learn from other companies that provided the same or similar functionalities, but weren't in the same exact space. There are a lot of companies that focus on other types of freight, and the chart below details some of the features I was able to find to see how Equll stacked up. Overall, Equll held its ground fairly well, but many of the features were pending or planned for future updates. This suggested that Equll is heading in the right direction, but still has a long way to go before it is fully fleshed out.

Equll Comparative Analysis

What is the Process Now? - Task Analysis

Another way I analyzed the current situation was to create a Task Flow for the current situation of arranging port drayage and how Equll fit into that. This was a critical step in making sure we understood how the industry and the app worked. It also helped identify what was and was not in the current version of the app.

Existing Task Flow

What Did We Learn? - Affinity Map

Taking the information from two shippers and a subject matter expert, we created an affinity map to find trends and issues to address. While there weren't too many data points, the feedback was fairly consistent in a number of areas and we ultimately focused on three areas:

  1. I value maintaining relationships with carriers and clients.

  2. I prefer real-time feedback.

  3. I want to see the status and timing of my shipment.

One particularly interesting thing to note is that while saving money is a key part of the value proposition of Equll, the actual users didn't focus on that as a day-to-day issue - it was more about information and trust.

Affinity Map

Who Should We Design For? - Creating a Persona

I created a persona to give a direction and voice to our design going forward. Her name is Sheri and she would be using this website as a part of her job at a local import company. Ultimately, because the functionality/industry of the website is pretty focused to begin with, Sheri didn't figure too much into our decision making later on because we didn't really have any secondary or alternative personas that had competing interests. However, having a persona makes storytelling around the project easier and makes it seem more personal.

Persona

Overview

Problem Statement

A local startup in the port drayage industry needs a more sophisticated and thorough website for use by the shipper (as opposed to the driver who would be using a smartphone app).

Design Hypothesis

Providing more obvious information hierarchy and visual status feedback would make the website easier to use and help inspire trust in the information. 

Proposed Solution

Our update to the Equll website focused primarily on the shipping dashboard and shipment detail pages. We focused on providing multiple levels of information that allows the user to dig deeper as needed and easily move between levels and types of information.

Approach

We used a four-stage design process for this project - first focusing on research, then analysis of that research, design and then delivering the final solution to the client. We met regularly with the client to make sure he approved of the direction and we focused primarily on areas that would serve as the basis for later development.

Final Direction

Below are the versions of the 4 primary types of pages we developed - the shipping dashboard, shipment information, driver profile and location profile.

 
 

What Does the Research Mean? - The AnalyzePhase

How Does the User Feel About the Situation Surrounding the Website? - The Customer Journey Map

To help refine our vision and direction, I created a Customer Journey Map for Sheri as she arranges getting a container from a factory to a ship. It's a fairly routine process for her and as long as things go as expected, her emotional state would remain fairly constant.

This process did show that there are many potential opportunities for Equll to meet expectations and potentially improve the situation.

Customer Journey Map

How Should the New Version Be Organized? - Card Sort

I also conducted a card sort with various features that could be found on a shipment tracking website. The goal was to help determine what things went together and how our version could potentially be arranged for greater ease of use and clarity. 

Ultimately I found that there were three primary groups of features - things related to accounts, shipments, and quotes. It could be possible to narrow it down further to just two groups (account and shipments), but quotes are important enough (based on our interviews) that they deserved their own groups.

I conducted the cart sort via Optimal Sort.

Card Sort Best Merge Method
Card Sort Standardized Categories

How Will the User Interact With the New Site? - User Flow

Based on all of the information above, one of the last things we needed to do before diving into the wireframes was determine a flow for how the user would interact with the website in order to reach their goals. In the flow below, I primarily focused on the path of checking a shipment status and then contacting the driver about it, but much more could be filled out as other functionalities are developed.

New Task Flow

Let's Start Making Something! - The Design Phase

Design Studio

As a team and along with our client, we participated in a Design Studio. The scenario was: You open up your Equll Shipping Dashboard and see a notification for a delayed shipment. You need to check tracking information, contact the driver for details, and check the destination appointment time.

The sketches below are mine from the two five-minute brainstorming phases - the first two are from the first phase and the last three are from the second.

Layout

After a significant amount of discussion within our group, we decided on a general layout for the site . The biggest question was how to show the different levels of information and how that would be accessed. The direction we decided to go was to have all of the shipment information in a center panel, that when selected would have more information, including a live tracking map on a panel on the right. Clicking through would go to a shipment detail page that would have all information including links to driver and location profiles as well as contact info.

Version 1 Shipping Dashboard

Level 1 Info

Level 2 Info

Version 1 Shipment Detail

Level 3 Info

Colors and Fonts

After getting initial feedback on our layout, I looked into an assortment of different color options for the visual design of the site. I created a variety of color options based off of the Equll purple logo. These are shown below, and as a group and along with our client, we chose "C", a monochromatic purple theme to move forward.

Step 1 - Color theme options

Color Option Explorations

Step 2- Theme "C" explorations - we went with the version in the lower right - the dark purple navigation bar was ultimately too overwhelming.

Color Option 1
Color Option 2
Color Option 3
Color Option 4

Font - After looking at a variety of possible font options, I had the breakthrough that due to some of the tracking information (container numbers in particular), we needed a font that had a monospace option so 11-digit container numbers that contain both letters and numbers would be easy to read. There weren't that many font families that contain both proportional and monospace versions and matched the clean, professional look we were striving for, so Roboto was the best choice.

Fonts - Proportional and Monospace

How Do Users Like It? - Usability Testing

We were able to do a couple of rounds of usability testing, which was very helpful.

  • 3 iterations of the prototype

  • 2 rounds of usability testing

  • Focus on improving:

    • User flow

    • Clarity of status

    • Proximity of functions

As a reminder, the SUS score for the original site was 34. The first version of our prototype scored a 75, which was a great improvement. Our second version scored an 87, and then we made some further improvements based on those comments. Improving the SUS score by 156% was a proud accomplishment.

 

The Final Product - Delivery

Wireframes

We combined all of the usability research into a final wireframe in Adobe XD. Below are screenshots of the four primary types of pages we designed. I was in charge of the final visual design. It was a tough balance between having a purple theme without too much purple! I also ultimately limited the use of the very bright purple in the logo to just the logo and the highlight linking the first and second levels of shipment information.

Prototype

The prototype was completed in Adobe XD. James did the animations and interactions. We used that program throughout our testing and design process.

Equll Website Demo

UX Specifications

I created a UX Specification document as a part of our handover to the client. It spelled out the colors, fonts, icon and interactions that may not have been obvious from the prototype. Because we didn't know what Equll's next steps were regarding our design, I wanted to provide helpful information to whoever dealt with it next.

Example pages from the UX Spec.

 

Lessons Learned and Next Steps

Looking Back

This was a successful group project and our client seemed happy with the results and value that we added. We stayed on track with our timeline and ultimately created a prototype that was an improvement to the existing website. There was a lot of research needed before we could dive into design, so we didn't get to as many functionalities as I would have liked, but I'm proud of what we did do.

This project was completed entirely remotely. We used Slack, Zoom, Miro, shared Google Folders, Co-editing in Adobe XD and Trello as collaboration tools.

Some things to improve as a group:

  • Standardize deliverable creation before they're started

  • Remote brainstorming tools

  • Getting more usability test participants

 

As an individual and designer:

  • Focus on layout responsivity earlier

  • Spend some time working on prototyping in XD as I didn't do that on this project

  • Look into digital whiteboarding tools

Potential Next Steps

There are a number of features that we didn't get to the short time frame of this project that really should be built our more in the future. These include:​

  • Extend contact and messaging functions

  • Build out filters and search functionality

  • Create "Add shipment" flow

  • Build "Get a Quote" flow

  • Make website design responsive

  • Create a layout for an analytical dashboard to track shipping metrics

H.C. Logo

© 2020 by Heather Curtin

  • LinkedIn