Improving UI Cohesiveness, Team Efficiency, and Speed to Market with Design Systems

Problem

Hotwire’s Design Language lacked cohesion from one platform to another, one channel to another. Designers spent time designing UI patterns that were already existing elsewhere, but with their personal touch. This resulted in a disjointed user experience in which there were apparent disconnects from one page or flow to another. Designers and engineers spent valuable time creating variations of UI designs that already existed, burning up valuable cycles that may have been spent better elsewhere.

Solution

To realize the user experience and team efficiency gains, I directed the implementation of specific tactics to turn Design Systems, and a unified design language, into a regular part of how Design, Product, and Engineering work.

I spearheaded implementation of the following:

  • Education: Educated and attained buy-in from heads of Product, Engineering, and Marketing, as well as broader company education around the importance of nuances of design systems.
  • Design Systems Leadership: Appointed a dedicated leader for Hotwire Design Systems that is responsible for centralizing common UI patterns across all user touch-points, worked with them to establish a strategy.
  • Cross-functional Workgroup: Created a Design Systems Working Group, comprising Design, Product, and Engineering, to unify on principles of collaboration, defining the processes needed to maintain and evolve a central UI language.
  • Improved Design Tooling: Changed design tooling from Sketch to Figma, which made it faster and easier for designers to tap into shared toolkits with the Broader Expedia team, and for closer collaboration with Product and Engineering.
  • Improved Cross-Company Collaboration: Changed expectations and workflow process across teams to centralize efforts to codify the best UI standards, re-use them across groups, evolving the design language cooperatively versus independently.

Outcome

Preparation for Hotwire’s Design Systems paid off, as it came in slightly ahead of broad replatform efforts across Hotwire’s web and mobile app platforms. As engineering teams ramped up UI on the new platforms, Designers worked with engineers to unify patterns, improve upon prior UI defects, and centralize on a pattern library that was represented in both code and design.

The team was able to re-skin native apps in an amazing one month turnaround, with application to web following in similar delivery time. Designers quickly moved from re-designing similar UI elements, to deeper focus on strategic UX problems, or visual polish the team lacked time to address in the past.

The culmination of new tools, process, cross-functional workflow and ways of looking at product delivery was a sea change in how the team delivers quality, with greater speed to market.