Johnson Controls - Design System

Role: Visual designer
Involvement:
- UX & Visual Design
- Design system management
- QA
Client: Johnson Controls
Websites: johnsoncontrols.com & tyco.com

Johnson Controls is a global, multi-industrial company that builds products and technology, integrated solutions and energy storage. They offer the world’s largest portfolio of building products, technologies, software, and services.

Our team was tasked with aligning Johnson Controls global website to new brand architecture and go-to-market strategies. In addition, we sought to respond to customer needs and guide them to a holistic solution, with the right products, partners, and service—to drive growth.

The key piece of this effort was to design and build a design system that would unify the brands’ digital experiences and serve as the framework for their many product brand sites.

As part of a large multi-disciplinary team, my focus was primarily on the following:

• Create an ecosystem for multiple brands that appear to be born from the same primary brand—Johnson Controls.

• Design a best-in-class product website (Tyco.com) that will be a model for all other product brand sites.

• Design for a personalized experience based on audience and channel.

• Work closely with the development team to ensure adherence to the design and quality delivery.

Unified, but Distinct
Working with largely the same set of components, we defined patterns and rules to be used across all brands while making accommodations for Tyco.com. By taking this approach, we leveraged the efficiencies of a design system, while creating avenues for each brand to shine and accommodate unique content.

Personalization Methods – flexibility on every page
Personalization was a key part of optimizing the user experience and in driving growth. Tailoring content was considered throughout the design and build of each site and at the component level. Multiple homepage options were designed based on audience types and needs to support personalization.