AutoTec

AutoTec has been in business for over 60 years and has a wide range of software products. As often happens in software, some of their applications became outdated, requiring a massive migration to the cloud. Because each platform was built using different technology and systems, this led to huge tech debt, inconsistent visual language, and difficult to use products. With limited in-house resources to create a cohesive UI style for their migration, AutoTec engaged LunarLab to create a robust, comprehensive, and scalable design system created to work across both web and mobile experiences. 

Our first step was to audit the existing systems, looking to identify common structures like page layouts, navigation, and re-usable components. 

We started by creating standardized page layouts to be used across all AutoTec products. This allows development teams to create new screens faster, saving time and minimizing development costs. It also creates a more consistent experience for AutoTec’s support team, who are tasked with supporting users of these various systems.

We tested the new design system using some existing screens. This process allowed us to see the individual design system components, like inputs, buttons, tabs, etc., in context to ensure the design met AutoTec’s brand and visual standards. The new design system includes various button and input field sizes designed to work for both web and mobile. Using color styles in Figma, we were also able to utilize a single design system to be used across AutoTec’s six distinct brands. Having a single design system to work from means that the development team only has to code a button once, and with a simple color switch, that same button can be utilized across all brands and products. 

To learn more about how to increase trust with users, improve usability, and make development more efficient, check out our blog on design systems.