Design System / Branding
Dodge UI/UX
Building a design system post-rebrand for digital solutions in mechanical power transmission
In November 2021, the Dodge Industrial business was acquired by RBC Bearings from ABB, a large industrial conglomerate. Following this, Dodge was allowed full control of its brand for the first time in decades, allowing them to build on the identity that had been cultivated and respected for so long at customer sites independent of the parent company. Dodge was finally free of branding as just another TLA (three letter acronym).
Because of the departure from ABB, Dodge had only one month to lose all ABB branding (a soul-crushing red palette) across all avenues: literature, websites, programs, etc. Additionally, Dodge would only retain access to critical ABB programs for one year. This situation led to the urgent need for a new software design system that fits with a new brand but is also flexible to adapt and change as that identity is better defined.
While the software design system will be used across the entire Dodge digital experience, it was most imperative to have it be established for the development of a new Industrial Internet of Things (IIoT) automation platform. This platform had to go live by November 2022, and development started immediately post-acquisition, so there wasn’t any time to spare.
Feedback was gathered from different areas of the company: software development, product management, and marketing, to answer the question of: “What do we want our software to look like?”. Overwhelmingly, everyone wanted to preserve the unique Dodge identity, be cutting-edge, and be user friendly. It was this dialogue that set the foundation for the development of this design system.
Dodge was founded by Wallace Dodge in 1878 to sell his first product: the Magic Wagon Jack. It’s exactly what it sounds like... a jack for your wagon. This successful product was the precursor to the jack we all love and hate when we need to change out a flat tire on our vehicles today.
The company eventually transitioned to mechanical power transmission components, first with the introduction of the Wood Split Pulley. The product portfolio grew to be inclusive of nearly all types of rotating equipment. By the mid-1900s, Dodge was the largest and most well-established brand in the industry. And with a stellar engineering team, Dodge led the way in product innovation, bringing more efficient, and most importantly— safer, equipment to market. Today, Dodge is the leading brand in North America and an innovator that global competitors are constantly looking towards for inspiration.
Dodge makes products that help move things in industry with rotational power. It’s all about torque! Think about a conveyor in an Amazon warehouse. The worker puts a box on one end, and the conveyor moves it to the other. In order to do that, there needs to be a motor, a gearbox to slow down that motor, and bearings to support the rotating shaft. While this is a small application, the principles can be scaled up to larger applications, like a belt conveyor moving thousands of tons of rock per hour. These products are made to work in dirty, tough, and wet environments.
It might be a surprise to think about software products coming from a company that makes mechanical equipment, but software has been critical to Dodge for decades.
In the late 1970s, Dodge released a bearing design program that was used by original equipment manufacturers (OEMs). Santa was a big fan, see image right.
In the early 1990s, Dodge launched PT Wizard, a program used to select equipment and design entire belt conveyor systems, an industry-first.
In 1999, Dodge released a dedicated eCommerce platform (another industry-first) that made it easier for customers to find product information, determine availability, and purchase parts.
And in 2016, the legacy continued with the release of Dodge Passport, the next generation of product selection programs. This program was subsequently rebranded in 2022 back to PT Wizard, hoping to cash in on the name recognition and legendary the original possessed.
First and foremost, all products have the same paint job, a greenish teal, affectionately known as “Dodge Green”. You can spot a Dodge product on a conveyor easily just by the color, which has all sorts of product replacement and marketing benefits.
Beyond that, the symbol of the company is the “Diamond-D”, which is represented across every piece of literature, every hat given to a maintenance manager, and every product nameplate. It has gone through some revisions over the years, but generally, its core shape has remained.
Following the acquisition, Dodge’s marketing team was liberated to embrace the original brand, rather than that of the parent company. This concluded in a refreshed Diamond-D, a new color palette, and Archivo as a chosen typeface. This new identity would form the core of the software design system.
I was tasked with creating this design system at the start of the development of Dodge Optify, the new IIOT automation platform. This allowed us to test the system and put it to use immediately, but it also didn’t allow for a lot of time to develop a unique system.
From working on my own startup, I had previous experience with MUI and the corresponding Figma library (the best $69 any new designer can spend, IMO). With an army of Polish developers already intending to work in React, it seemed a good pairing. It also had an added benefit of helping onboard the only dedicated UI/UX designer, a college co-op, to a reliable and accessible component library within an established design framework, Material Design.
After discussions with the team, we agreed to use MUI as the UI backbone of the desktop app. Other software programs, be it a new mobile app or Dodge's existing eCommerce site, would need to be updated to match styling. MUI's inherent flexibility allowed it to act as a solid foundation for customizations that would make the design system *feel* Dodge.
Well, this will be a short section! To help facilitate the quick turnaround of this design system, we decided to go with the typography elements that come standard with Material UI. The font that Dodge chose for all applications is Archivo, so this was the only major change. In the future, I believe typography should be revisited to better be in-line with the typography of our print material and literature, with heavier weights for headings.
The marketing team had already defined a solid color palette; teal as the main backbone, with both light and dark variants, and sunflower, a bright yellow used as an accent. In order to develop additional states of secondary components, light and dark variants of sunflower were generated to accompany the previously selected colors.
The burning question of this color scheme was, “What do you do with sunflower?” It’s bright and easily noticeable, but presents serious accessibility challenges. White can’t be used on sunflower, and sunflower can’t be used on white.
Considering these challenges, it made sense to limit sunflower to few instances, primarily in the form of a CTA or an advancing navigation through the program. A rule was established that only one use of filled sunflower could exist on the screen at any time. Outlined sunflower would be used if there is an action that is in the same hierarchal level (but not the primary action), or in the case of a backwards navigation element.
Since teal is the primary color, it made sense to reinforce teal throughout the program. Active states are indicated by teal, be it a switch or a select field. Additional in-app actions can also be teal (contained or outlined), assuming they’re not the advancing action on the screen.
Navigation elements like the app-bar and tab-bar are dark teal, so they are deemphasized, but still promote the brand. An exception was made here for the mobile tab-bar, since user feedback indicated that it felt claustrophobic. The mobile tab-bar was changed to a white background with dark teal active states.
A final aspect of color was developing for data visualization. The primary applications of these colors would be for print literature, comparing asset KPIs within the automation platform, and for internal dashboards in PowerBI. There are hurdles to developing these data visualization colors, as it necessitates balancing accessibility and readability with brand aesthetics. This was the first time I had ever chosen colors for this purpose, so I started by doing a lot of research. Ultimately, I settled on a process that Kevin Lanuk, Design System Lead at Cigna, published on his Medium. I followed this process pretty closely, so I won't repeat the details, of which he has written about with proper eloquence and conciseness. Much kudos to him.
The sequential color palette was the first generated, as it forms the backbone of the rest of the palettes. I targeted to have 7 to 10 sequential palettes, as this led to enough variations for the categorical palette, which involved taking specific shades from the sequential palette. The divergent color palette sought to use color contrasts that were aesthetically pleasing, but most importantly, made accessibility the primary concern. The above color palettes were approved by the brand team, and put to immediate use. As of now, there are no new places of data visualization within the Dodge ecosystem that can't be accommodated by these palettes. I'm proud of how these ended up and it was a fun foray into working with data visualization.
There seems to be an overall trend in software design to softer edges and more rounded components. I like this look, as did the marketing team. Familiarity is a benefit, but it also didn’t help to differentiate the software. In a lot of ways, it looked like ABB’s design system, with nearly identical radii. With the opportunity of a new brand identity, it seemed criminal to not lean into the personality of Dodge.
There’s something to be said about squared corners on input fields. It feels like old-school engineering drawings; it feels technical. And Dodge makes technical engineered products. Hard corners for fields is a visual differentiator, but it isn’t distracting. Entering inputs into a selection program with squared fields feels like you’re interacting with a highly technical product, and so that was the direction pursued.
But should squared edges be everywhere? Dodge products go on shafts, which have a circle profile. Nearly all of Dodge products are circular or use organic rounded edges on the exterior. Round is very much a part of the brand too, so it was decided to keep buttons and modals as rounded shapes. This contrast with the squared input fields really makes the programs pop in a unique way.
Lastly, let’s talk about the FAB. Sure, we could do a round FAB, but why bother with that when it could be a diamond! The Diamond-D is iconic and should be reinforced where possible. The diamond isn’t distracting, it isn’t any less easy to press, and it’s just as noticeable, if not more so. This last bit of detail makes the software feel Dodge.
One of the last tasks in creating design system elements was to create new icons that could be used across software platforms, but principally in the new automation platform. Critical to the success of these icons is that they are consistent with other generic icons used in the program, which are filled and follow Material Design guidelines. Like all good icons, they are SVGs and fit within keylines.
Icons needed to be created to represent Dodge products, including the mechanical products themselves, as well as the new Industrial Internet of Things (IIOT) devices that make them smart. These icons would primarily be used for viewing “assets” grouped together in a tree. Because there is a hierarchy, the products need to be distinct from each other, while the IIOT devices need some sort of indication that they’re connected to differentiate them from the devices that are offline.
Icons were then required for different tabs in the Optify tab-bar, arguably the most important navigation element. Since these are used for navigation and serve as a constant reminder to the user of their location within the program, it is important that they are 1) visually distinct, and 2) adequately represent that section of the program. The result is icons that fulfill those requirements and naturally guide the user to the proper tab.
Additional miscellaneous icons were created, for automation and eCommerce purposes.
The vectors themselves were created by Dodge marketing, but I was the primary driver of their development: leading them through iterations, keeping them consistent with Material Design guidelines, as well as working with the business teams to confirm usefulness. Some compromises were made in the final icons, principally a less than 1px line thickness within certain icons. Rather than recreating the icons within keylines, the visual designer simply resized the whole icon. Not wanting to make perfect the enemy of good, this concession was accepted and we moved on to other design tasks.
That being said, the end result is a set of icons that work really well, and also lay a great foundation for future additions as the portfolio of Dodge software programs grows. Personally, this process really excited me, and was the first time I ever felt the desire to get into visual design. Moving forward, I want to learn Adobe Illustrator and jump into vector art.
As of the writing of this post, I've worked at Dodge for nearly 6 years, my entire career aside from my year working on my startup full-time. I graduated from college in 2016 and went into training for sales, before moving to Jackson, Mississippi to support industrial customers. In my time in the field, I used our digital tools at one of the highest rates of all 100+ Field Sales Engineers. Using our selection programs, I was able to quickly spec in our products for all kinds of applications. Using our eCommerce site, I could advise on pricing and availability in less than 30 seconds. And lastly, I was there to see the launch of our IIOT products and place them in some of their first applications. Coming back to corporate, I knew I wanted to make these tools more accessible and easier to use. Developing the UI/UX of all future applications is the capstone of my experience at Dodge Industrial.
This design system was not the first I developed, but it was certainly the most comprehensive. Rather than building for one desktop/mobile application, I designed for eCommerce, product selection programs, an automation platform, and internal dashboards. I was able to touch new facets of design such as icon development and colors for data visualization. I was able to successfully implement new branding principles: colors, typography, patterns and all. Accessibility was my main focus, and I believe I created a system that works well for most users. This design system also pressed me to move faster and work with an international team. It's hard to not look back at your work and see opportunities for improvement, but here, I'm still incredibly proud.