TriNet asked EchoUser to create a unified design system to support its design and engineering teams. At the time, TriNet had multiple internal style guides, created by different entities and at different times. They were inconsistent, overlapped coverage in some areas, and didn’t have coverage in other areas. The style guides’ ineffectiveness caused the engineering teams to ignore them and create their own custom UI elements without regard to what others were doing elsewhere. As a result, TriNet’s products suffered from numerous UI inconsistencies that compromised the platform’s usability.
The design system as a means to harmonize design and engineering
Besides enabling a consistent user experience across TriNet’s products, we wanted the new design system to improve how designers collaborated with engineers. The inconsistent, contradictory style guides had helped to break down the design-engineering collaboration and encouraged engineers to work independently of the design team. Our work on the new design system would therefore require winning over the engineering team by showing that the design system would also benefit them by making their own jobs easier and improving the quality of their output.
A multi-faceted approach to untangle the maze
Untangling the mishmash of style guides required a purposeful, multi-pronged approach. The first step was to decide on a foundational design system that would serve as the basis for the new design system. We conducted a brief competitive analysis of existing design systems, and along with the TriNet design team, concluded that Material Design should be the basis for the new design system.
At the same time, we completed a detailed audit of all of the existing internal Trinet style guides. We identified what the style guides actually covered, where there were overlaps, where there were contradictions within overlaps, and where the style guides had gaps in coverage for TriNet’s existing products.
Finally, we began creating the new design system. This involved re-skinning the applicable existing Material Design elements into the TriNet look and feel. We resolved the UI contradictions specified in the previous style guides by determining the preferred design and rendering it in the Material Design/TriNet style. And finally, we created new UI designs for design elements that weren’t covered by previous TriNet style guides or Material Design.
Collaboration as a key to acceptance
There were a lot of interested stakeholders as the design system would be affecting all of TriNet’s products. We worked directly with the designers, product owners, and engineers from as many of the product areas as possible. We created a cadence to review and iterate key design decisions with all of the stakeholders to ensure their concerns and needs were accounted for in the final designs.
A unified design system put to use, immediately
We successfully created a useful design system that would serve the existing TriNet products as well as new products and functionality in their pipeline. The VP of engineering was so happy with the new design system that he mandated that going forward, the engineering team would be required to use the design system immediately.
