Case Study:
Drayage Application
Timeline: May 2022 - December 2022
A UX/UI Redesign for Enhanced Efficiency in Logistics
A 7-Month Journey to Transform Logistics Efficiency
Over the course of seven months, our team embarked on an ambitious project to transform the logistics efficiency for a major third-party brokerage firm. The core challenge was to streamline connections between big players like Walmart and various carriers. Our primary mission focused on crafting a user-centric system that would not only elevate the user experience but also boost the firm's profitability.
A Dual-Faceted Problem in Logistics
We identified a significant gap in the user experience; the system was functional but far from exceptional. The project had dual goals: to merge aesthetic appeal with operational efficiency. This design overhaul targeted not just the logistics staff but also extended to external partners who interacted with the system, ensuring that every user touchpoint was considered and enhanced.
My Role in the Collaborative
In my role as UX/UI designer, I contributed to the design strategy from conception through to implementation. This was a collaborative effort involving a dynamic team of engineers, stakeholders, and UX designers. Despite the challenges of remote collaboration, our team successfully bridged distances to build a cohesive and effective solution.
The Strategic Roadmap: From Wireframes to User Testing Triumphs
The project kicked off with the development of wireframes, laying a strong foundation for the user journey and identifying key areas for improvement. Extensive usability testing provided valuable feedback, shaping the subsequent design phases. A bold move was made to adopt a gaming-inspired interface, resonating well with the firm's dynamic brand identity. The design harmonized function and aesthetics, using tools like Tailwind and Angular Material. The culmination of this effort was evident in the enthusiastic feedback received during user testing on both desktop and mobile platforms.
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.