Transplace, a leading Third Party Logistics (3PL) company, contracted me as their UX designer to redesign their premier customer facing SAAS product, the Transportation Management System (TMS). This powerful software product enables customers and operations users to:
As powerful as the SAAS product was, it fell 20 years behind the software and web design standards of today providing an unpleasant user experience to both its customers (20%) and internal operations users (80%) of the software. The system also proved to be a difficult platform during updates and product iteration efforts to all teams and users involved. It was time to embed a UX process and new foundation for future improvements and product scalability.
Without a UX process in place I assumed the role of implementing the various stages of UX growth in the company. Transplace had an engineer focused process. Gaining trust from the stack holders and team members as I implemented the process was a challenging endeavor. Having joined the Transplace team halfway through development of the first product in their suite meant the clock was ticking. The initial learning curve had to be accelerated if I was going to lead the UX charge in redesigning the first 4 applications of the total 15 apps within the TMS suite. Here were the challenges identified in the product roadmap for these first four products.
The first task of the process was to completely understand the product strategy. Asking things such as what the business goals were, how they were to be measured, preplanning what the on-boarding and marketing campaign would entail and identifying the deployment channels, were amongst a few topics I sought answers to early on. After several meetings and introductions to stackholders, I was able to identify a few business goals. Three of them made the cut for directives on the product. Those goals were Stability, Efficiency and Scalability. Here is what they meant for the product.
Stability - The goal to integrate stability was ensued by the need of hundreds of end-users actively working in the old product design and transitioning them to into the new redesigned product. Creating a familiar experience would help minimize the learning curve required to navigate through the new software design. Ideas such as an extensive marketing campaign, training materials and on screen tutorials came out of initial brainstorming. The company had active clients. Having a stable transition was very important.
Efficiency - Making the product more efficient where possible through automation efforts and simplifying the users journey helps reduce operating cost and increase speed within the application. Efficiency was also expanded into the internal development process with the creation of a design system.
Scalability - Ensuring this product could scale for future iteration and product updates was a must. With hundreds of customers in their portfolio, Transplace needed to create a design that could remain up-to-date with current web technologies and pave way for new features in the future.
After solidifying the strategy for the product, I filled the role as UX Researcher where I created a plan to gather as much user research and product insight as possible. Working with the Marketing VP and team I created an initial survey that was sent out to Transplace operations facilities. Here we gathered information on the three applications from the TMS suite to be redesigned.
Part of the research plan entailed coordinating with the operation VP's and General Managers to travel to operations facilities to observe users working with the classic software. I conducted one-on-one interviews asking users a series of questions about the software which helped uncover several pain points about the old design. User personas were created from these findings.
Madison
+25
Recently on boarded operators and customers who are getting familiar with the app and customer rules. With a learning curve, they may not execute as many orders as more seasoned users. Familiarity of the system has largely been dependent on their ability to learn the software.
• "I wish learning the software was easier. I feel lost sometimes having to learn on my own."
• "Sometimes I get overwhelmed by the amount of stuff on the screen at the same time."
• "There are so many table rows. Making it easier for me to find info on the screen would be nice."
Dan
28
Users who primarily work within one application but have been trained to loosely work between closely related applications. This is commonly seen with Shipment Planning (SP) app users who also work within the Error Correction(ISD) app. The SP app requires users to organize pieces of info into an optimized order to route and plan freight effectively and identify errors within shipments using ISD.
• I wish I could share my template configurations or bookmarks with my peers to help onboard them onto a new client or if they have to cover my shift."
• "Everything runs together at times. Color coding could help"
Shannon
47
Users who may have access to other modules but primarily work within one module throughout the course of a day. This is typically seen with Shipment Execution (SE) App users. The SE user researches discrepancies in a load and assigns loads to carriers by assigning them to the winning bidder. They execute an average amount of loads and are customer facing representatives.
• "Its frustrating having to manually edit fields with the same values one-by-one. It slows me down"
• "I wish there was a way to quickly differentiate apps from one another."
• "A history log of my previous actions or load events would be nice to have."
Lisa
+34
Experienced users who are having access to several applications and are highly proficient. This user executes loads at an above average rate within the TMS system and may have been at the company for several years.
• "Having to update the same information on multiple shipments one-by-one manually is so inefficient"
• "I have to go to out of an application to work within another. All this switching takes time."
• "Notify me if there is a new more efficient feature available that would help me save time within operations."
In order to effectively utilize the data, I facilitated various UX exercises. These exercises helped me understand the end user perspective and gauge the development sprint timelines to come. After user and app research I conducted card sorting activities to improve the application architecture were possible and feature prioritization exercises in order to avoid feature bloat from the feedback.
There were several worthy features that surfaced out of the user interviews and brainstorming meetings. Prioritizing the features helped focus on the ones that provided the most value and the least development effort upfront.
After compiling front-end requirement documents, I worked up a round of low fidelity sketches to help organize features and components into a layout structure. Wireframes helped piece together and contextualize intricate details of the application and the user flows associated with each feature.
Wireframe prototypes allowed me to test and iterate on the layouts before moving on to the aesthetics of the visual design process. To help the design scale across multiple applications within the TMS, I standardized portions of the interface that were shared across all apps. An example was creating a global header shared across all applications. This header allowed the user switch to other applications directly from their app window instead of opening a separate control tower to access other products in the suite as done before. User tests were performed to gain greater understanding of user behaviors and validate whether I was on the right track.
One of the objectives with the redesign was to make the UI consistent across all applications. Creating consistent layouts and clear hierarchical conventions kept the design from having conflicting components. A design system was created to help with consistency and scalability in the long term. It would become the central resource for all design components used within the visual design of the product. Since inception, this system would continually be updated and maintained over time to facilitate the need of the company.
The search screen was an extremely comprehensive section of each application. This was where a user could build a search by specifying criteria to populate results from the database. During interviews I asked users whether they used every option that was displayed on the search criteria screen. Most didn't know what half of the criteria meant. The problem here was that users were presented with all possible search options, even options that weren't relevant to the client they worked on or managed. That made the search screen extremely cluttered especially when you consider that there were over 200 clients, dozens of which were in several different industries.
To solve this issue I recommended that the system would only show criteria options that were relevant to the selected client(s). This would help eliminate any ambiguity as to unfamiliar options. The next thing I addressed was the layout. The search screen was in need of organization. For this, I grouped related criteria into categories and nested them within a side nav that was displayed when the search builder was open. This enabled users to efficiently locate options that pertained to their client and their desired search.
After observing users working within the application results page, I noticed numerous inefficiencies when performing simple tasks. Table rows extended to dozens of columns, requiring users to scroll horizontally for an absurd amount of time to find information. Additionally, the lack of differentiation within the table made the content appear as a large block attributing to eye fatigue throughout the day. Lastly, if users wished to review or change a portion of their built search criteria, they had to navigate back to the search builder page to do so.
Users were accustomed to using shortcuts to complete common actions in the app. I wanted to retain that same flexibility for the web app where possible. Working with the development team, we Integrated an active page "dot" search feature. This new feature enabled users to search and highlight anything on their current screen by tapping the period symbol shortcut on their keyboard and typing in characters for the desired item. In the spirit of keeping things accessible and efficient, I included and active criteria tab that displayed all of the criteria selected within the search builder as tags directly on the results page. A user could now view their search criteria at a glance or removed tags as an option without navigating to the search builder page.
The last major change to the results page was to introduce color coded conventions that helped users differentiate between hover, selected and checked states within the table. Other components such as buttons and dropdown fields were also taken into heavy consideration especially when positioning them for optimal work use within a table.
After a user selects one of the results from the search result screen, he arrives to a detailed page of the chosen result. Here, all important information pertaining to that selected result is listed for the viewer. Dependent on the function of the application, a user can edit, assign, reference or add information to this details page. Similar to the search builder, the details screens were cluttered and unorganized which made it difficult for users to navigate through. I also observed that it increased cognitive load much more then necessary. Several clicks were made to find and complete simple actions.
Adopting the same side navigation layout from the search builder, I organized the data into tabs. Once a user selects a tab, only information pertaining to the active tab is displayed. This included all information tables and action buttons.
Modal windows were defined as a layout convention for items that required more in-depth information populated from the database that wasn't currently available on screen. Removing distractions that weren't related to the immediate task at hand was a product wide objective. Simple design choices such as darkening the content behind a modal when not hovered maintained the users focus on one particular item. Think about scenarios were a user is multitasking on a carrier or customer phone call.
Before handing over the designs and features over to scrum teams, I put the designs through several rounds of user testing. Here users followed a journey map and were instructed to think out loud expressing their thoughts on the design. They were also graded on scale of 1-5 on whether they succeeded or failed to complete a task.
A product launch schedule and deployment plan was crafted to foresee the next steps of the applications. Before launch, thorough rounds of Beta testing needed to take place. Testing every section of the application through all possible scenarios is crucial before launch. Quality assurance helped polish the product for final deployment.
Establishing a functional foundation was a major highlight in this journey. It allowed me to identify the business goals for the project. It helped the teams collaborate closer and use a standardized design system as a guide for use across all Transplace applications. It allowed the discovery of channels to effectively communicate internally across departments and connect to the end-user base.
The research guided the design in creating an up-to-date product that was familiar to the current user base and structured enough to facilitate future improvements. We identified areas of improvement in the old applications that saved dozens of hours of operation cost and improved user satisfaction. The research validated the need for new programs and an improved on-boarding tutorial system for users. It also shed light on new useful features documented for future updates such as interactive material and optimization technology. Users, operators, trainers and managers were excited with the redesign. Dozens of users conveyed how much more user friendly the system design was and how they wish they had it a year earlier. Users also conveyed appreciation for considering them in the product improvement process. They couldn't wait to use the full product suite. Educating Transplace on design thinking, equipping with an integrated UX process, and creating a design system enabled the company to build future products efficiently, retain client retention and provide real end-user satisfaction.
