Case Study:
Invoice System
Timeline: October 2021 - May 2022
Project Overview
A Third-Party Logistics brokerage company needed us to create a new invoice system that would integrate with their new drayage software. They connect customers, like Walmart, with carriers that can transport their containers. The company's profitability hinges on its efficiency, so they invest in software systems designed to enhance their operations.
Our task was to replace their existing software, Aljex, with a new invoice system. Aljex was complex, difficult to navigate, and didn't integrate well with their existing systems, leading to a lot of manual input and room for human error.
The new invoice system was one of many components that would be added, which only served the drayage teams at that point. There was also a need to implement systems supporting Over-The-Road (OTR), Asset Management, Carrier Management, and invoicing.
Before starting the project, we thoroughly explored their current system, which hadn't received any UX input. They had an existing style guide that the invoice system was supposed to inherit. My initial research focused on identifying usability and accessibility issues within their style guide.
One of the challenges we faced at the start of the project was that many stakeholders didn't believe in the UX process. Our goal was not only to create an efficient invoice system but also to demonstrate the value of UX in improving overall system usability and efficiency.
Color Research and Selection
The color scheme of a design plays a critical role in user experience, influencing aesthetics, usability, and accessibility. With this in mind, we embarked on an extensive color research process for this project.
Our research began with evaluating the existing color palette used in the company's current system. We assessed the existing colors' legibility, contrast, and overall visual impact. This involved examining how these colors performed in different contexts and lighting conditions, particularly considering the bright, large rooms where most users worked.
We also delved into the science of color perception, drawing on medical research and studies from institutions like MIT. These studies provided insights into how the human eye responds to different colors and brightness levels and how these factors can impact efficiency and comfort during prolonged screen use.
One key finding from our research was the potential strain caused by darker screen colors, especially when viewed for extended periods. On the other hand, lighter screen colors were found to enhance user performance and reduce eye strain.
Armed with these insights, we presented a revised color palette to the stakeholders. This new palette featured lighter colors with better contrast, improving legibility and reducing eye strain. We demonstrated the benefits of this new color scheme through side-by-side comparisons of the old and new designs, highlighting the improved readability and visual hierarchy.
Our color research was not just about improving the look of the design but also about enhancing the user experience. By choosing colors based on research and user needs, we created a design that was not only visually appealing but also user-friendly and accessible.
potentially enhance team productivity. At this stage, our focus was primarily on identifying the optimal color choices for the invoice system.
We prepared early wireframes of the invoice system, showcasing the design in the existing style guide and a proposed updated version. The updated version featured lighter colors with improved contrast. By presenting this two versions side by side, we demonstrated the significant improvements in readability and visual hierarchy offered by the new color scheme.
This comparative demonstration effectively highlighted the benefits of the proposed color changes. It showed how the table data became easier to read and how the elements on the screen were better differentiated, enhancing the overall user experience.
Color Recommendations and Demonstrations
Development of Style Guide and Design System
While our primary recommendation was to adopt lighter colors, we also proposed a dark mode color solution as a post-MVP option. This would cater to users working in low-light conditions or those with vision impairments.
After securing approval from stakeholders and addressing any engineering concerns, we received the green light to revamp their style guide and design system for integration into the invoice system. This revised guide would eventually serve as the DART 2.0 style guide to reskin the entire system.
The creation of this style guide involved certain compromises. We had to consider the engineers' capacity and proficiency with styling. We primarily adhered to default Angular Material styles to facilitate a smooth process.
We aimed to develop a new color style guide tailored for the forthcoming invoice system. Collaborating with another designer, we created updated components that would be utilized in building out each screen.
User Testing
Following our research, we validated our findings through user testing. This testing aimed to ascertain whether our new style resonated with the users and enhanced their work efficiency.
Our approach involved conducting one-on-one sessions with users, during which we observed them performing tasks on a prototype. All these sessions were recorded, transcribed, and subsequently analyzed using Dovetail.
This was this client’s first exposure to user testing, and they found the process intriguing. They witnessed firsthand how user research can contribute to superior software design. Encouraged by the insights gained, they later requested us to evaluate some of their other systems as well.
The Final Design
Key Takeaways
UX is research driven
and we can often
measure the value of
good design.
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.