Created a design system from the ground up that is versatile enough to unify three historic legacy products, and flexible enough to adapt and scale with ongoing company acquisitions.
UX/UI Design, Design System Creation and Management, Component Library Creation, Accessibility Design, Responsive Design.
Design Director
UX Design Lead
Figma, Miro
12 Weeks
UX/UI Design, Design Patterns, Design Systems, Responsive Design, WCAG Compliance, Atomic Design
TechInsights, a leader servicing the semiconductor industry has historically existed as separate platforms with individual teams maintaining their own source of standards for UI elements, components, modules, and datasets in both the front-end and back-end of these systems.
Common ongoing issues with the legacy systems:
Legacy product unification and ongoing acquisitions continued to perpetuate a fragmented user experience. This weakening of the TechInsights brand was jeopardizing the company goal of 100k platform users in 2023. An investment into a centralized design system was more important than ever.
OUR BRAND IS OUR PROMISE OF QUALITY
Foster trust – A consistent experience is not only vital to our platform users, but with an increase in growth and acquisitions, TechInsights must also be trusted by our growing team uncertain of their place in a new parent company.
A BLUEPRINT FOR SUCCESS
Aligning our Teams – Internal growth, remote teams, and overall expansion require a clear blueprint to guide the building of and maintenance of our scaling product offerings.
INCREASE EFFICIENCY
Shared component and pattern libraries – bringing speed to both the design and development process to allow for faster design cycles, and reuse of components allow for shorter sprints.
TechInsights today is the result of multiple product mergers and acquisitions. Each merger brought new users and new products to the fold. Our understanding of the UX/UI decisions that came before us was murky at best. So to better understand the current state of our existing design ecosystem, we needed to audit the legacy UI.
We meticulously mapped our 3 legacy products to :
The process helped us clearly see all discrepancies and inconsistencies across our product and serve as a foundation for our design system work. By the same token we had a view of common components and patterns that would require unifications across the platform. It also made clear to us that in order to move forward, we would need to do some level setting and foundational design resetting.
Critical to the success of the system was the alignment of all our products on the foundational elements for a unified platform. The system is structured to be scaled for each new acquisition, meaning that our foundational system needed to account for known and unknown UI elements. Our foundations supported our brand, grid systems, spacing scale, typography scales, color systems, and icon set.
Type, colour, and spacing: We chose a complete reset starting from the basic styles. Platform fonts were chosen for optimal legibility and character size at for small UI elements and complex tables. Colour systems were stripped down to neutrals and primary highlights, as well as basic system status. Spacing would employ 8-pixel increments to complement common device screen resolution
Common elements: Colour palettes and fonts were applied to the most common UI elements with a mandate of meeting basic accessibility requirements and have sufficient contrast values.
Icon sets: Standard icon sizes and styles were created complete with guidelines on usage, and naming conventions.
With the basics of our design system established, we began by creating a component library. This collection would serve to provide reusable interface elements. We collected common component types such as toolbars, cards, tables, and modals.
With continuous platform growth top of mind, our system aimed to be:
To make our design team more efficient and so we could reuse assets when designing for different devices or layouts:
Each component set needed flexibility in the UI and pixel accurate instruction for our developers to more easily implement:
Contrast Values: We designed with accessibility in mind and strived to comply with WCAG AA accessibility standards.
These were developed in consideration of growing and expanding the platform with new acquisitions and product offerings. These reusable combinations of components address common user needs.
Any design system is only useful if it’s utilized and understood. We needed to share the design system, the common patterns, and the methodology to our product managers, developers, and company stakeholders. We also needed a common language for communication and documentation of common design patterns and components.
Atomic Design: to educate our design system users, we chose the Atomic Design methodology which breaks common UI elements down into their individual parts. These elements can be combined into more complex component sets while maintaining a standards.
https://bradfrost.com/blog/post/atomic-web-design/
Naming conventions and standardization: Using Miro, we created a series of documents and blueprints so we would have a common standard set of labels for patterns and components. Each pattern was linked back to the high-fidelity Figma designs. The standards could be present in user flows and in handing off design targets to development team, or when generating user stories and acceptance criteria.
Responsive design: As part of our most common patterns, we aimed to include responsive design guidelines for our developers and to clearly show how different components and patterns would behave or transform at various screen sizes.
Now that our platform has a stable design system to build upon, it was more important than ever to look at the rest of our customer journey and related brand elements. Email templates were required, and an active effort to rebrand our corporate website, marketing outreach, and mobile application cannot be overlooked.
Email Templates, Social Media, User Engagement, and Web: Welcome messaging, subscription digests, new data alerts, events, and system notifications are but a few examples of the TechInsights email messaging systems. The brand must be consistent across all channels to truly build trust and user engagement.
We built design system from the ground up in order to share a common design language and unified 3 legacy platforms and 3 platform acquisitions into a commonly recognizable and repeatable system. We provided education to our developers and internal stakeholder, yet a continued investment into this system is key so it can be adopted by any team moving forward.
Our design systems must be maintained and it must evolve:
Contact me at chris@cgervais.ca