In June of 2020, despite the ongoing pandemic, the Port of Long Beach had its busiest day ever, moving over 753 thousand twenty-foot-equivalents (TEU’s) of cargo.
Tracking the specific path of a given truck as it enters one of the 12 primary terminals at the Port is a primary feature of GeoStamp, a software platform that provides critical business and billing information to its users. Being able to pinpoint a driver's time and location within a defined area is a key data point for trucking companies needing to verify invoices.
GeoStamp 1.0 launched in 2017 and was ready to move forward with major redesign including new features and a greatly improved user experience.
2. PROBLEM STATEMENT
Expand the scope of GeoStamp from a reporting and geofencing tool into a platform for generating billing notifications and viewing terminal conditions in real-time.
Take the feedback accumulated since launch to improve the existing experience and expand on it.
My focus then was to improve user experience by implementing;
- Improved visibility of terminals conditions.
- Giving prominence to high-priority actionable issues.
- A new billing verification feature.
3. USERS AND AUDIENCE
There were two primary user groups that I focused my research efforts on as much as possible. Our third audience, Fleet Managers, played a significantly smaller role in my research.Dispatchers - those responsible for the day to day operations and typically worked hand in hand with drivers and Customer Service Representatives.
Billing Representatives (CMR’s) - for those companies large enough to employ such a role, Billing Representatives would rely heavily on the data collected by GeoStamp. The use case for Billing Representatives would entail audits and reconciliations.
Fleet Managers - While some Fleet Managers might access the platform regularly, others may go weeks or longer without accessing the system.
4. TEAM ROLES
The GeoStamp team was comprised of a hands-on CEO, COO, and Director. I was paired with a Project Manager and together we considered where time and effort were best spent in achieving their vision. The UI/UX design of GeoStamp 2.0 was created often by committee with my design proposals serving as a starting and ending point.An offshore development team of 6-8 developers rounded out our team.
- UX Designer
- Project Manager
- Technical Lead
- Development Team (6-8 person remote team)
5. SCOPE AND CONSTRAINTS
The scope of GeoStamp 2.0 was significantly expanded from the previous version. The geofencing module would undergo a major UI and performance upgrade. Secondary emphasis was on helping users search data for specific drivers or terminals, and a final key feature focused on billing notifications. Differing in some important ways from typical business-to-business billing, the billing notification module did include some notifications and triggers common to traditional billing systems.
We anticipated that legacy data systems would present us with a serious challenge.
We were also aware how trucking companies conduct business differently so we approached our redesign fully aware that 'one-size would not fit all'.
GeoStamp 1.0 Screen Grab
6. PROCESSThe redesign of GeoStamp was poised to be a giant leap forward. We had an engaged customer base willing to share with us their feedback on using GeoStamp 1.0. We were excited to add several completely new features that would be of huge value to our users but there was much room for improvement at the core of the platform. One of these critical pieces is geofencing.
The first step in the redesign process was to perform an audit of the existing site. Analytics were unavailable so information regarding the most visited pages and their usage was collected anecdotally during interviews with stakeholders and trucking company representatives.
Facets were identified for all data and whenever possible, allowing users to compare and contrast trips, drivers, terminal conditions, and pick up times. A late version draft of the new vs. old site map appears below.
GeoStamp 2.0 Dashboard, Geofence Builder, and Billing ModuleThe greatest challenge of GeoStamp 2.0 was allowing users maximum flexibility because again, the one-size-fits-all philosophy translated into a poor experience for so many users. Giving users greater control through maximum flexibility created inevitable usability challenges. Great effort was made to ensure clarity by focusing on clear nomenclature, standardized interaction patterns, and reducing user errors whenever possible.
After we had captured a range of business rules and workflows, we set upon the task of diving deeper into the details of jobs to be done. The differences in business operations mattered because it directly influenced the user experience. It forced us to consider how flexible we could be in our design solutions. It also drove us to go into the operational details of the companies who were generous enough to let us ask question after question about how they ran their business. Most importantly, more control often translates into more complexity. The balance between those two ideas is being watched carefully.
GeoStamp 2.0 - Dashboard View
The dashboard view provides data and visual feedback with which dispatchers and Fleet Managers can make quick decisions regarding terminal conditions. Specifically, find out how long a set of drivers has waited in a particular queue.
The addition of billing notifications made GeoStamp 2.0 an even more valuable business tool and filled an important functional gap that existed between trip time verification and billing.
Visually, I strove to establish a design system that enabled immediate decision making. The focus of the homepage (shown below) was the result of many hours of asking business owners what mattered to them most. What you'll see is a scenario where the user has activated the cam views for immediate, actionable real-time information. The twenty three ports represented in the dashboard bar graph illustrate data display for the largest port in the U.S.
The 1.0 geofence interface and workflow was in need of significant performance and UI improvement. We looked for ways to make it easier for users to create and manage geofences by conducting interviews, doing extensive competitive analysis, and variant testing.
GeoStamp 2.0 - Geofencing UI
A geofence allows users to create a virtual perimeter or "fence" anywhere in the real world. In the case of GeoStamp, the ability to pinpoint the location of a truck over time within a given geofence and is the main value proposition. Below, is a detail from the newly redesigned geofence interface.
While performing my competitive analysis, I reviewed some of the most popular geofencing tools currently available. It was important to maintain the robust functionality of the 1.0 geofence tool but the outcome of my heuristic analysis of several well-known geofencing tools for both desktop and mobile pointed me in the direction of balancing those capabilities with intuitive interactions and controls. The benefits of that research became part of the 2.0 geofencing toolset in both big and small ways.
The newest feature addition, billing notifications, required extensive iterative user testing and is expected to continuously improve with each subsequent revision.
An important constraint on our billing notification system was that the feature would not include actual payments but rather generate a notification that an invoice had been or was being submitted and aslo provide a way to adjust that billing.
We spoke directly with fleet managers and stakeholders to tell us what was most important to them. Their answers provided us clear direction in terms of how much (or how little) data to display and which facets were most valuable. Conducting thorough client interviews also helped the product look less like accounting software, as so many other products in the industry do. Instead, they were rewarded with the modern, forward-thinking tool that GeoStamp 2.0 is.
7. OUTCOMES AND LESSONS
The end result of working hand in hand with our target customers to set clear UX goals is expected to pay off in a number ways, not the least of which is a modernized, design system which allows the user a high level of control. Toggle views, elastic search, and dashboard notifications, are just a few of the user controls available in 2.0 that will help them do what they need to do as quickly as possible. When users need in-depth data for deep analysis that too is available.
There were several things I was reminded of during this project which led me to reconsider much of my recent work. First, was that the balance between complexity and control is not as simple as we've become accustomed to thinking about it. In fact, so many of the stakeholders I spoke to felt strongly that oversimplifying some interfaces ultimately did users a disservice. In fact, there was concern that oversimplfiying would indicate a lack of real understanding on my part.
I also learned (or was at least reminded) that even in a redesign scenario such as this one, new features can greatly improve the value of any given tool but ultimately, what users really want is for the tools they use on a daily basis to do one or two things really well and that goal is one that can be easily forgotten. When it is, part of my role as a User Experience Designer is to remind myself and my team of what it is that matters most to our users.