Willis Tower Watson (WTW)

WTW is a major player in the global insurance and risk management market. With disparate product development teams using their own methods and design standards, the company had trouble maintaining consistency across products. WTW needed infrastructure to implement organization-wide standards that were easy to adhere to.

Because of the complexities of the existing system, WTW required an advanced, custom-built design system with the capacity to scale. WTW was using multiple platforms and frameworks, and the new system needed to incorporate smoothly with all of them and behave in an expected way to match existing standards.

Willis Tower Watson, known globally as WTW, is a risk management and capital investment firm operating in over 140 countries. The company has multiple technical product teams spread across the world. Before partnering with Overlap, WTW leadership was using four separate platforms to manage departments and development teams. Product Consistency Across Disparate Development Teams

The product teams themselves were using different tools, libraries, and frameworks to build products, and consequently had trouble maintaining UI/UX consistency. Because the teams were only trained to work in their specific environments, it was impossible for them to support each other or spread development resources across the company when needed.

Every group was following their own design methods which led to an inconsistent look and feel. To maintain the level of consistency they were looking for, WTW needed a universal digital system to help them standardize design processes and user experience elements across departments and development teams.

WTW needed consistency in product branding, support policies and procedures, voice, and UX/UI, including layout, theming, and functionality. At the same time, they didn’t want to rob developers of the freedom to change certain elements. To accomplish both of these goals successfully, they needed a robust, custom-built solution.

Overlap created a fully-customized enterprise-level design system to accommodate WTW’s goals and direction, and suggested additional enhancements along the way.

Relying on a design method called “atomic design,” Overlap was able to build the component library starting with basic elements like buttons and links, and then re-use those as part of more complicated components like date-pickers and modal windows. This approach makes the code more maintainable by keeping changes isolated.

Custom components of the design system included a built-in library of code templates where development teams can configure elements based on project requirements. Developers can easily obtain code for components based on color, mode, style, etc.–and then all they have to do is copy and paste. This empowers individuals to add a personal touch while maintaining the integrity of the WTW brand.

Additionally, the build process had to account for WCAG Level 2 requirements–rules designed to make websites more accessible to users with disabilities. This can include elements like screen readers and accommodations for vision problems like color blindness. Overlap took the time to ensure every component met the WCAG Level 2 requirements.

Overlap worked with WTW to strengthen their QA process, working with them to develop a thorough quality control checklist to ensure all elements are ready to ship. This includes checking for accessibility and screen readers, testing across browsers and devices, and evaluating responsiveness.

After implementing the design system, WTW’s teams are less siloed. They can claim their independence while maintaining brand and product consistency. Because of the success WTW has seen post system launch, they plan to expand to the entire employee base of over 45,000 people.