MARK YOUNG
SENIOR UX DESIGNER
A CASE FOR MODERNIZATION
Product: J.B. Hunt Transportation Design System
Role: Senior UX Designer
Tools: Figma, Adobe XD
Methods: Research, documentation, component design
​
TL;DR
-
Design systems benefit all products and teams regardless of size.
-
Design for the common denominator.
-
Edge cases happen but shouldn’t dictate design decisions across an entire platform.
-
Create simple, consistent components and you’ll create happy users.
​
Product Overview
J.B. Hunt’s internal design system supports 20+ web applications, 3 mobile applications, and a very large team consisting of UX Designers, Research
​
Discovery
Design Systems, whether it’s in support of a small application or an entire enterprise solution, are a necessity. As our team grew exponentially over the years, it became painfully obvious that Adobe XD was no longer the right software for our needs. Here comes Figma to save the day! We knew early on that Figma was going to be the right software, but as they say, “It takes a big ship a while to turn”. With our web applications using 70+ components and mobile using 40+ (and growing) we knew it wasn’t going to be an easy task.
In this case study, I won’t necessarily address all the steps we took to make this transition but will look more closely at my process for researching, formalizing, and designing a component.
​
Research
Modal windows have been around since the 1980’s, so you’d think they’d be hard to screw up, right? Well, in the case of our mobile applications, without a proper design system with guidance in place, we did just that. As you’ll see in the image below, while digging through our applications, I found countless examples of how we were using modals. My main goal with this research in mind was to find a consistent theme within our modal windows and create a simple pattern that would accommodate all use cases, but more importantly, accommodate our users’ needs.
After a few iterations and conversations with our product teams, we went with a very straightforward modal that consist of the following:
-
Header
-
Optional Icon (4 Severity Types)
-
Body Message
-
Actions (Primary, Secondary, or Tertiary Combinations)
​
Part of being a design system lead is not just making things pretty, but they must make sense. Providing well-documented guidance is also a part my process. This documentation runs through our content team and eventually ends up on our internal design system documentation site along with code examples for implementation guidance. You can view some of that documentation here.
Final Design
Straight forward and gets the job done. You can view the full documentation with specs, structure images, use-cases, button rules, and severity types here.
Impact and Learnings
As stated previously, design systems are absolutely necessary. As shown in the research here, without a proper design system and guidance available, large teams (and small) can quickly introduce inconsistencies. Those inconsistencies eventually make their way to the end users. This was only one of dozens and dozens of components that were part of our transition from Adobe XD to Figma, and a lot of hard work was dedicated from our team to do so, but remember, regardless how long it takes to turn the ship around, you have to start somwhere.