Element Global Design System
Role:
UX Design Intern
Timeline:
July 18, 2022 - Sep 1, 2023 (1 Year 3 Months)
Team
Global Experience Design
Business Line:
Element Design System
Summary
Project Overview
$800K+
By efficiency gains
$200K+
Net annual savings
+65%
Design-token efficiency
-62%
Design maintenance
Context
Element Design System Overview
Built a scalable design system from the ground up to unify Johnson Controls’ global digital products. EDS provides a comprehensive library of components, patterns, and code snippets, accelerating speed-to-market and ensuring a consistent UX/UI language across web applications.
My Responsibility
0 to 1 Creation: Co-developed the global design system from scratch, now adopted by 34 design & 2 engineering teams, establishing a unified design language across the organization.
System Architecture: Built a comprehensive Figma UI kit and guidelines for 27 components and 6 patterns (incl. data visualization), reducing component creation time by 42%.
Operational Impact: Streamlined workflows to cut design maintenance by 62% and boost token efficiency by 65%, saving the company over $800K (achieving ~$200K net annual savings).
Adoption & Training: Partnered with cross-functional stakeholders to drive adoption; supported bi-weekly Figma training to onboard teams and enforce core system principles.
[UNDER NDA] This project is protected by confidentiality agreements, but I would be happy to walk you through my process and the outcomes in a private interview for more details
High-level Intro
Problem
Goal: Enhance market agility, and establish a cohesive UX across the digital ecosystem to amplify brand presence, increase product adoption, and accelerate development speed.
Context + Challenge
Context: While JCI established a physical product design language in 2018, it lacked a unified digital counterpart.
Challenge: Fragmented digital standards and siloed product teams led to a diluted master brand, with inconsistent UI components and patterns across the portfolio.
High-level Problems
Context: While JCI established a physical product design language in 2018, it lacked a unified digital counterpart.
Challenge: Fragmented digital standards and siloed product teams led to a diluted master brand, with inconsistent UI components and patterns across the portfolio.
Inconsistencies in Today's JCI Products
* Ambiguous visual representation for confidentiality
Goal & Vision
Design Side: Increase our market speed, share current digital best practices, and create a unified look & feel experience throughout the Johnson Controls digital ecosystem, leading to less training and increased product adoption.
Develop Side: Faster development time and reduced bug fixing.
Impacts: Other Benefits for Adoption
Accelerate Speed to Market
Faster design and Engineering cycles
Drive down defects through retested, reusable components
Amplify Brand Presence & Improve Consistency
Unify our products and offerings (one JCI)
Signal to the market our digital maturity growth
Increase brand equity, design becomes a differentiator
Increase Efficiency
Faster customer onboarding (Learn 1 product, gain familiarity with all)
Increase familiarity with field & support functions
Engineers, Testers, and Designers can move between projects
Raise design acumen and provide support across the entire org
Research & Analysis
Global Experience Design + Brand Team + Okta
Case Study: 0 to 1 Pattern - Log in & off
Current Status: Log in / Log off screens
Login is frequently the first time a user interacts with a product, setting the tone for their entire experience. At Johnson Controls (JCI), while physical products shared a robust design language, the digital ecosystem remained fragmented.
👆 Current Log in & off screens 👆
Problem: The Challenges & Strategic Trade-offs
Designing a global authentication framework required navigating complex business requirements and user experience friction.
01
🛡️ Risk-based Access vs. Login Conversion
Balancing enterprise-grade security with a high-success login experience requires intentional trade-offs.
Excessive Friction: When the login pattern includes too many fields, choices, or steps, users are more likely to hesitate or drop off.
Inconsistent Patterns Across Apps: When products implement login and recovery differently, users see different steps, errors, and terminology.
Lower Completion Rates: Extra friction can reduce sign-in completion, especially for first-time or infrequent users.
More Password/Access Issues: More lockouts and resets can lead to more support requests and longer time to access the product.
02
🧠 Path Discovery vs. Cognitive Load
The primary entry point must help users reach the correct login path with minimal thinking and minimal errors.
Ambiguous Entry Choices: Generic labels like “Sign in” and “Sign up,” or presenting multiple auth options at once, forces users to decide before they understand the context.
Information Overload: Showing all fields and SSO options simultaneously increases scanning effort and makes the “right next step” unclear.
Wrong-path Errors: Users choose the wrong method (JCI password vs. SSO), hit dead ends, and restart—driving frustration and abandonment.
Decision Delay: Extra thinking time slows the login journey and increases drop-off under time pressure.
03
🏷️ Multi-tenant Brand System vs. Governance
A unified login pattern must scale across products, brands, and customers—without turning into a one-off factory.
One-size-fits-all Standardization: Forcing a single layout and visual treatment across all products can under-serve flagship experiences and customer expectations.
Unbounded Customization: Letting every team freely customize login creates design drift, longer QA cycles, and harder-to-maintain components.
Inconsistent Brand Presence: The ecosystem feels fragmented; users may question legitimacy when the login experience looks different across products.
Operational Overhead: Without clear guardrails (tokens, slots, ownership), customization becomes expensive and slows down product teams.
Currently, every app has its own login flow and manages the auth routing itself:
👆 Current Log in Flow 👆
Impact:
⚠️ User Friction & Security Risks
A poor entry experience depletes user patience and directly threatens enterprise data integrity.
Credential Fatigue & Password Reuse: A disjointed ecosystem forces users to memorize separate credentials for different sub-products, inevitably driving widespread "password reuse" behaviors.
Retention Drop & Compliance Blackhole: The high interaction cost causes disjointed user journeys and poor platform retention. Meanwhile, password reuse exponentially multiplies the risk of enterprise data breaches and compliance violations.
⚙️ Engineering Waste & System Redundancy
Siloed development models lead to an unquantifiable waste of internal resources.
Reinventing the Wheel: Without a unified standard, individual product teams build and manage their own login pages and underlying authentication logic from scratch.
Resource Drain & Maintenance Quagmire: Massive engineering resources are squandered maintaining redundant, decentralized security backends. This inflates overall operational costs and severely delays the time-to-market for new products.
"
01
How might we reduce duplicated implementation and support burden from app-owned login flows while keeping sign-in success high?
02
How might we guide users to the correct sign-in path on the first try to reduce drop-off and speed up time-to-access?
03
How might we support product/customer branding needs in login without increasing variant complexity and slowing down delivery?
"
Opportunity
From UI Fix to System Overhaul
We seized the chance to upgrade the messy, decentralized backend architecture by introducing a standardized frontend interface.
The SSO Catalyst
We leveraged the redesign as the perfect vehicle to roll out Okta’s Single Sign-On (SSO) service enterprise-wide, transitioning from fragmented logins to a unified gateway.
Eliminating Redundancy
By establishing one source of truth, we had the opportunity to stop 34+ product teams from reinventing the wheel, drastically reducing global tech debt.
Goal
Consistent
Align the digital entry point seamlessly with JCI's overall brand aesthetics and physical product language.
Balanced
Optimize the delicate trade-off between enforcing robust enterprise security and providing frictionless user convenience.
Adaptable
Flexibly scale across different product weights (flagship vs. sub-products), diverse user types, and multi-device breakpoints.
Solution
Design Solution
Problem: The Challenges & Strategic Trade-offs
Designing a global authentication framework required navigating complex business requirements and user experience friction.
01
🛡️ Risk-based Access vs. Login Conversion
Centralized Login Page
Target pattern: A centralized login entry point—customized by JCI, hosted by Okta—replaces app-owned login pages across the JCI ecosystem.
Smart routing: Users are redirected from any app to the centralized Login Screen, then routed to either JCI username/password (no IdP on record) or the correct SSO Identity Provider (IdP found via email lookup).
Seamless return: After authentication (and optional account selection for multi-org users), users are redirected back to the originating app’s Home Screen.
Platform value: Centralization improves governance and consistency, reduces maintenance/security burden on product teams, and enables SSO (“log in once, access everywhere”) with scalable theming for brands/customers.
02
🧠 Path Discovery vs. Cognitive Load
3.1 Consistent component & terminology - "Log in & Sign up"
3.2 Flexible Authentication Architecture
To meet the diverse security and user experience needs across JCI's massive product portfolio, we defined three core authentication strategies within the design system:
1. 🔐 Single Sign-On (SSO) — The ecosystem hub breaking down silos
Behavior/Interaction: Integrates Okta's SSO service to build a unified, enterprise-grade authentication portal.
Design Value: Completely breaks down identity barriers between products. Consumers only need to authenticate once to seamlessly access multiple unrelated JCI products, eliminating the heavy burden of memorizing multiple credentials.
2. 🧠 Progressive Authentication — The standard for reducing cognitive load
Behavior/Interaction: Requests only the User ID upfront, deferring the password input to the next step.
Design Value: Drastically reduces cognitive load by eliminating non-essential visual distractions. The system automatically determines the correct login path in the background, instead of forcing users to read through options and manually choose.
3. ⚡ One-step Authentication — Maximized efficiency for high-frequency scenarios
Behavior/Interaction: Displays both the User ID and password input fields on the same page, requiring no step-by-step navigation.
Design Value: Tailor-made for products that require high-frequency log-in and log-off actions. By avoiding unnecessary page refreshes and redirects, it provides the fastest possible entry experience for specific high-frequency business use cases.
03
🏷️ Multi-tenant Brand System vs. Governance
Migration of Login Pages
United approach to log in screen
Focused (Centered Align Component)
Marketing Billboard (Left or Right Align Components)
👆 Login Flows; [Scroll Horizontally to See More ↔️] 👆
👆 Component Details; [Scroll Horizontally to See More ↔️] 👆
Solution Impacts & Business Values
As a foundational pillar of the Global EDS, this centralized login framework drove enterprise-wide alignment and contributed to significant overall savings.
🎯 UX & Brand Alignment
Product Adoption: Successfully integrated across 34+ design teams, unifying the digital entry point for the entire JCI portfolio.
Frictionless Experience: Eliminated password fatigue and cognitive overload through progressive authentication and clear terminology.
⚙️ Engineering Efficiency
Single Source of Truth: Stopped individual product teams from reinventing the wheel by centralizing authentication UI and logic.
Accelerated Workflows: Contributed directly to the EDS's global success of cutting component creation time and reducing UI maintenance.
🛡️ Security & ROI
Secure by Design: Enabled seamless Okta SSO integration and prevented malicious account probing via generic error handling.
Financial Impact: Played a key role in the systematic workflow improvements that saved JCI in operational costs.