Accelerate Speed to Market加快产品上市
- Faster design and Engineering cycles缩短设计与工程周期
- Drive down defects through retested, reusable components通过经过验证的可复用组件减少缺陷
Element Global Design SystemElement 全球设计系统
Summary摘要
Project Overview项目概览
$800K+By efficiency gains效率收益
$200K+Net annual savings年度净节省
+65%Design-token efficiency设计变量效率
-62%Design maintenance设计维护成本
Context背景
Element Design System OverviewElement 设计系统概览
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.从零搭建可扩展的设计系统，统一 Johnson Controls 的全球数字产品。EDS 提供完整的组件、模式与代码片段库，既加快产品上市，也让各 Web 应用使用一致的 UX/UI 语言。
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.从 0 到 1： 从零共同建设全球设计系统，目前已被 34 个设计团队和 2 个工程团队采用，并在组织内建立统一的设计语言。
- 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%.系统架构： 搭建完整的 Figma UI Kit 与规范，覆盖 27 个组件 和 6 个模式 （含数据可视化），将组件创建时间缩短 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).运营影响： 通过简化工作流，将设计维护成本降低 62% ，并将 Token 效率提升 65%，为公司节省超过 80 万美元 （约实现20 万美元 年度净节省）。
- Adoption & Training: Partnered with cross-functional stakeholders to drive adoption; supported bi-weekly Figma training to onboard teams and enforce core system principles.推广与培训： 与跨职能利益相关方协作推动采用，并支持双周 Figma 培训，帮助团队上手并落实设计系统的核心原则。
[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受保密协议保护 该项目受保密协议保护；我很乐意在非公开面试中进一步介绍过程与结果。
Contact Me联系我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: Johnson Controls (JCI) launched its Global Product Design Language in 2018: a design framework for physical products and integrated displays, applied to new product introductions for thermostats, sensors, controllers and a growing range of products.背景： Johnson Controls（JCI）于 2018 年推出全球产品设计语言，为实体产品与集成显示屏提供设计框架，已用于温控器、传感器、控制器等新产品的推出，覆盖范围仍在扩大。
Challenge: However, JCI lacked any formalized digital design system. The JCI master brand was diluted: each product brand had its own identity, and product teams set their own standards for UI atoms, components and patterns.挑战： 然而，JCI 没有正式的数字设计系统。JCI 主品牌被稀释：各产品品牌各有一套形象，不同产品团队也各自制定 UI 原子、组件和模式的标准。
High-level Problems核心问题
What we found:我们发现：
- Inconsistent and conflicting interface design and guidelines界面设计与规范不一致，甚至相互冲突
- Duplicated design and development of common UI components通用 UI 组件被重复设计和开发
- Lengthening cycle times for implementing design solutions设计方案落地的周期越来越长
- A diluted JCI master brandJCI 主品牌被稀释
- Usability issues in interface design, the color system and more界面设计、色彩体系等方面存在可用性问题
Inconsistencies in Today's JCI ProductsJCI 现有产品中的不一致
* 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.设计侧： 提升市场响应速度，共享数字产品最佳实践，并在 Johnson Controls 的数字生态中建立统一的体验，减少培训成本、促进产品采用。
Develop Side: Faster development time and reduced bug fixing.开发侧： 缩短开发周期，并减少缺陷修复成本。
Impacts: Other Benefits for Adoption影响：推动采用的其他价值
Amplify Brand Presence & Improve Consistency强化品牌影响力与一致性
- Unify our products and offerings (one JCI)统一产品与服务，形成一致的 JCI 体验
- Signal to the market our digital maturity growth向市场传达 JCI 数字化成熟度的提升
- 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提升组织整体设计能力，并为各团队提供支持
Without Design System缺少设计系统时
⬇️
Fragmented User Experience割裂的 用户体验
Scroll down for a deep dive into one of the core design patterns I owned继续向下，深入了解 我负责的一个 核心设计模式
Research & Analysis研究与分析
Global Experience Design + Brand Team + Okta全球体验设计团队 + 品牌团队 + Okta
Case Study: 0 to 1 Pattern - Log in & off案例：从 0 到 1 建立登录与退出模式
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.登录通常是用户与产品的第一次互动，也决定了后续体验的基调。Johnson Controls（JCI）的实体产品已有成熟的设计语言，但数字生态仍然割裂。
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🛡️ 风险分级访问 vs. 登录转化
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🧠 路径识别 vs. 认知负担
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.信息过载： 同时展示全部字段与 SSO 选项会增加浏览负担，让正确的下一步变得不清楚。
Wrong-path Errors: Users choose the wrong method (JCI password vs. SSO), hit dead ends, and restart—driving frustration and abandonment.误入错误路径： 用户可能选错 JCI 密码或 SSO 路径，走到死路后重新开始，最终产生挫败并放弃。
Decision Delay: Extra thinking time slows the login journey and increases drop-off under time pressure.决策延迟： 额外思考会拖慢登录，在时间压力下进一步提高流失。
03🏷️ Multi-tenant Brand System vs. Governance🏷️ 多租户品牌表达 vs. 系统治理
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.无边界定制： 允许每个团队自由定制，又会造成设计漂移、延长 QA 周期，并提高组件维护成本。
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.运营负担： 如果没有 Token、插槽和所有权等明确边界，定制成本会持续上升，并拖慢产品团队。
Currently, every app has its own login flow and manages the auth routing itself:当前每个应用都有自己的登录流程，并各自管理认证路由：
👆 Current Log in Flow 👆👆 当前登录流程 👆
Impact:影响：
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.留存下降与合规风险： 高交互成本造成旅程断裂并损害平台留存；密码复用还会成倍放大企业数据泄露与合规违规风险。
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以 SSO 为升级契机
- 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.本次改版也成为在全公司推广 Okta Single Sign-On（单点登录，SSO）的切入点，使分散登录逐步收敛到统一入口。
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.通过建立唯一事实来源，34 个以上产品团队不再重复造轮子，显著减少了全局技术债。
Goal目标
Consistent一致
- Align the digital entry point seamlessly with JCI's overall brand aesthetics and physical product language.让数字入口与 JCI 整体品牌视觉及实体产品语言保持一致。
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🛡️ 风险分级访问 vs. 登录转化
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.目标模式： 以 JCI 定制、由 Okta 托管的集中式登录入口，替代 JCI 生态中各应用自建的登录页面。
- 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).智能路由： 用户从任意应用进入集中式登录页；系统再根据邮箱查询结果，将其引导至 JCI 用户名/密码路径，或正确的 SSO 身份提供方。
- 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.平台价值： 集中化提升了治理与一致性，减轻产品团队的维护和安全负担，同时支持“一次登录、处处访问”的 SSO，并为品牌与客户提供可扩展主题能力。
02
🧠 Path Discovery vs. Cognitive Load🧠 路径识别 vs. 认知负担
3.1 Consistent component & terminology - "Log in & Sign up"3.1 统一组件与术语——“登录与注册”
3.2 Flexible Authentication Architecture3.2 灵活的认证架构
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:为满足 JCI 庞大产品组合中不同的安全与体验需求，我们在设计系统中定义了三类核心认证策略：
1. 🔐 Single Sign-On (SSO) — The ecosystem hub breaking down silos1. 🔐 单点登录（SSO）——打破孤岛的生态枢纽
- Behavior/Interaction: Integrates Okta's SSO service to build a unified, enterprise-grade authentication portal.行为与交互： 集成 Okta SSO 服务，建立统一的企业级认证门户。
- 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.设计价值： 打通产品间的身份壁垒。用户只需认证一次，即可无缝进入多个 JCI 产品，不必记忆多套凭证。
2. 🧠 Progressive Authentication — The standard for reducing cognitive load2. 🧠 渐进式认证——降低认知负担的标准方案
- Behavior/Interaction: Requests only the User ID upfront, deferring the password input to the next step.行为与交互： 第一步只请求用户 ID，密码输入延后到下一步。
- 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 scenarios3. ⚡ 单步认证——为高频场景最大化效率
- Behavior/Interaction: Displays both the User ID and password input fields on the same page, requiring no step-by-step navigation.行为与交互： 在同一页面展示用户 ID 与密码输入框，无需逐步跳转。
- 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🏷️ 多租户品牌表达 vs. 系统治理
Migration of Login Pages登录页面迁移
United approach to log in screen统一登录页面方案
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.作为 Global EDS 的基础能力，集中式登录框架推动了企业范围内的一致性，也为整体成本节省作出重要贡献。
🎯 UX & Brand Alignment🎯 体验与品牌一致性
- Product Adoption: Successfully integrated across 34+ design teams, unifying the digital entry point for the entire JCI portfolio.产品采用： 成功应用于 34 个以上设计团队，统一了 JCI 整个产品组合的数字入口。
- 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.工作流提速： 直接助力 EDS 在全球范围缩短组件创建时间，并降低界面维护成本。
🛡️ Security & ROI🛡️ 安全与投资回报
- Secure by Design: Enabled seamless Okta SSO integration and prevented malicious account probing via generic error handling.安全内建： 实现顺畅的 Okta SSO 集成，并通过通用错误提示防止恶意账户探测。
- Financial Impact: Played a key role in the systematic workflow improvements that saved JCI in operational costs.财务影响： 在系统化工作流改进中发挥关键作用，为 JCI 节省运营成本。