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.
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.
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.
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:
-
I value maintaining relationships with carriers and clients.
-
I prefer real-time feedback.
-
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.
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.
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.
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.
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.
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.
Level 1 Info
Level 2 Info
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
Step 2- Theme "C" explorations - we went with the version in the lower right - the dark purple navigation bar was ultimately too overwhelming.
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.
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.
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