Case Study:
Drayage Application
Timeline: May 2022 - December 2022
A UX/UI Redesign for Enhanced Efficiency in Logistics
This case study focuses on an extensive project executed for a third-party logistics brokerage firm. The firm's core operation involves facilitating connections between customers, such as Walmart, and various carriers to transport their goods. The firm's profit model is primarily based on the efficiency of this process, with their revenue generated from the price difference between what they charge customers and what they pay to the carriers.
The project's main goal was to boost the company's efficiency and profitability by revamping its existing system to be more user-friendly and visually appealing. The stakeholders desired a refreshed look and feel that aligned with their brand and introduced an element of excitement by incorporating a gaming-inspired aesthetic.
The project was carried out over a period from May 2022 to December 2022. We collaborated closely with the company throughout this time to ensure the software systems were designed and fine-tuned to maximize their efficiency and profitability.
Wireframes and Workflow Optimization
The initial phase of updating the loadboared process involved addressing workflow inefficiencies by creating wireframes. These wireframes served as the blueprint for the user experience, allowing us to visualize and streamline the user journey before proceeding to the visual design stage.
To identify areas for improvement, we conducted extensive Usability Testing. This involved observing users as they attempted to complete tasks within our design. Their interactions and feedback provided invaluable insights into where enhancements were most needed. The response to our designs was overwhelmingly positive, with users expressing excitement about the potential time-saving benefits of the new system.
However, our work didn't stop at this stage. We continued to iterate on our designs in line with design thinking principles. We revisited our wireframes, incorporating the feedback from the usability testing and refining the design to enhance user experience and efficiency further.
We also presented the stakeholders with wireframes in both the current style guide and an updated version featuring lighter colors and better contrast. This comparison demonstrated the improved readability of table data and a more effective visual hierarchy between elements on the screen, reinforcing the benefits of our proposed design changes.
The visual design phase of the project was initiated by creating a mood board to establish the desired look and feel. This mood board was a visual guide, helping us define the project's aesthetic direction. We presented four distinct design styles to the stakeholders in the initial round. These styles ranged from designs that closely mirrored their current branding to those that introduced entirely new visual concepts. This exercise was designed to challenge the existing brand perception and showcase the brand's potential evolution.
The visual design exploration was not merely about aesthetics; it was about aligning the visual identity of the software with the company's brand and the users' needs. We aimed to create a design that would be visually appealing and enhance the user experience and efficiency.
The stakeholders were actively involved in this process, providing feedback and input that helped us refine the designs. After three rounds of design iterations, the stakeholders felt that a design inspired by gaming and tech aesthetics was the right direction for them. This design choice was visually engaging and resonated with the software's desired exciting and dynamic feel.
In addition to the aesthetic considerations, we ensured that our design was fully responsive and adaptive, providing a seamless user experience across different devices. We also incorporated animations to bring the design to life, adding an extra layer of interactivity and engagement for the users.
Visual Design Exploration
Creation of Style Guide and Design System
Upon final approval of the designs, I developed a fresh style guide and design system. This was strategically crafted to facilitate collaboration with the engineers who would soon join our team to construct this project's visual elements and components.
While we continued to utilize Angular Material, this phase presented opportunities for greater customization. Our team's UX engineers played a crucial role in this process. They collaborated closely with me to comprehend and construct this design system using Tailwind, developing components with diverse interactions.
This new style guide and design system ensured consistency in our design and streamlined the development process, setting a clear path for the engineers to bring our designs to life.
User Testing
Our user testing phase aimed to identify usability issues in our design and understand user expectations. We created desktop and mobile prototypes for testing various features of the Loadboard. We conducted in-person usability tests with six participants in Reno, with each session lasting an hour. During these sessions, users were guided through tasks on devices we provided while team members documented findings.
Post-testing, we identified areas for improvement, particularly in the Advanced Search functions. We designed two workflows, created prototypes, and conducted remote A/B tests with four users, which helped us determine the most user-friendly solution.
Finally, we analyzed our findings using Dovetail, tagged noteworthy observations, and presented a Findings Report to leadership. This process allowed us to evaluate and iterate our design early before development.
Mobile Design Introduction and User Testing
While we had previously conducted numerous user testing sessions with ITS, this marked our first foray into showcasing a mobile design. We stressed the significance of responsive design and mobile accessibility from the project's inception. However, the client initially held reservations, perceiving their system as too intricate for mobile adaptation.
To address this, we decided to put the mobile design to the test with user testing!
Before interacting with the mobile design, users expressed doubts. They questioned the feasibility of translating the complex system to a mobile interface. However, their skepticism was swiftly replaced with enthusiasm upon engaging with the design and prototype. The users unanimously agreed on the immense benefits of the mobile version, appreciating its accessibility and convenience.
The successful introduction of the mobile design also caught the attention of the ITS Vice President. Impressed with our work, he introduced us to another department, leading to an additional project opportunity!
Landon
"This changes the game for every person on that floor! I'm not joking. I can literally update my loads from my phone."
James
"I feel just as comfortable here as I did with the desktop version."
Morgan
"Wow, I can't believe this is on the phone, and it’s really usable! Now that I can send a BOL from my phone… now that’s awesome!"
UX is research driven
and we can often
measure the value of
good design.
Key Takeaways
UX brings consultative value to projects, and sometimes that means pushing back on what we think we know and what the stakeholder thinks they know.
UX is research-driven, and we can often measure the value of good design.
Design is an iterative process to get to a finished product. We should never settle for our first design.
There will always be a push and pull between what schedules allow and the value we can provide. Don’t be afraid to push boundaries and show the art of the possible. In future projects, I’d like to see more testing with users and more understanding through journey mapping at the beginning of the project.