UI/UX Design System

The Process

Business Goal

The company had kept growing for two decades based on its aging flagship software, but there were many development teams maintaining and building niche applications, each with their own UI standards and styles. The Marketing team was working on a company-wide rebranding, and one of the major goals was to unify our offerings under a modern and coherent visual language that would help customers onboard and use our software with greater confidence.

As the company’s first UX designer, I quickly introduced myself within the development teams, took inventory of the existing software, and established a reusable visual style for the company's newer software. With the UX team set to grow, this style system needed to be well researched and documented to support new designers and developers being brought onboard.

Design System Goals

• Empower developers and designers to implement consistent interfaces without constant UX oversight
• Enable continuous iteration of the system as new products and accessibility standards emerged

Topics Covered

• Design Fundamentals: Usability heuristics, UI testing guidelines, accessibility and internationalization considerations
• Styles: Color, light/dark themes, typography, iconography, and interface writing guidelines (including a library of existing messages) to ensure consistency and readability
• Interactions: Performance guidelines, loading indicators, methods for handling errors, and micro interactions
• UI Elements: A library of common, reusable UI components, complete with styles for all state changes (such as error, hover, and focus states)
• Resources: Helpful reference sites and onboarding documentation for future UX teammates

Design and Leadership Challenges

• Provide guidance that covers the needs of many desperate types of software, including legacy interfaces, that have little consistency across their UIs
• Gather all iconography across many different development environments and offer a single, high-quality source for all
• Convince many project leaders to use the reusable styles and assets to move gradually toward greater consistency across the business
• Present to development teams and leadership to introduce both the design system and the UX role to a company that had never had them
• Continuously add new topics and content to ensure decisions are documented and recommendations remain current
• Work with the flagship product’s development team to gradually implement icon updates and a dark/light theme within a large legacy system

Development Story

From day one at AGI (Analytical Graphics, Inc.), I needed to onboard quickly. My first assigned project was already in development, and the design support provided by an external agency had been lacking. I started by surveying what had been developed, what was imminently needed for upcoming features, and what usability issues were already present. The project was new software that hadn't been released yet, so I went through a heuristics analysis and drafted a set of styles and recommendations to close any obvious usability gaps.

After my first team had accepted and began implementing the newly-drafted styles, I set about documenting them, since another UX hire was imminent. Drawing upon my experience at a previous job, I wrote a style guide containing notes for all the aesthetic styles along with many short essays detailing UX considerations and best practices that would help keep the design team consistent into the future.

Since the company had never had a UX team, I had a lot of freedom to develop the role and prove its value. During my onboarding window, I introduced myself throughout the company and started to build an understanding of the many software offerings being developed and supported. Though they were all very different, having been developed from the late 1990s to the late 2010s, I soon had an idea of many high-level similarities and common customer requests that would be beneficial to analyze and standardize to speed development and improve usability.

Despite regular customer questions about WCAG accessibility, there was no company standard for teams to follow, so I did the research and added guidance to the design system. Hundreds of icons had been created and used inconsistently across many teams’ environments, so I gathered them all, standardized them, and documented everything. There were consistent requests for color-blind accessible themes, so I created a controlled interface palette that any of our software projects could use. Confusing, code-heavy error messages were commonplace in the software, so I wrote a writing guide with sample user-friendly messages. Though the standards couldn’t supersede customer research and direct feedback, they gave a baseline for broad usability considerations.

When my first new UX teammate was hired, she greatly sped the development of the style guide, contributing the light theme colors, more icons, and an internal website to easily share the guidelines with developers. The team established a reputation as a force multiplier, accelerating delivery across the engineering org: we had all the colors, fonts, icons, UI components, messages, and behavior standards worked out. Though not every development project had been allocated support from our team, there were standards available for everyone to reference.

The design system provided visual consistency and a strong brand to AGI’s library of software, allowing us to present a unified face to the market leading up to the 2020 acquisition by Ansys.

Gallery

Sample Page Dark Theme Light Theme Error Handling Error Handling Early Wireframes

Outcomes

• A design system that grew gradually and was adopted by 10+ product teams across the company's portfolio over 6 years
• Standardized 500+ icons into a single, accessible library with consistent semantic meaning
• Reduced UI development time for teams utilizing the component library
• Fewer UI bugs reported by customers thanks to the style standards and pre-release UI reviews