Con Edison operates and maintains one of the world’s largest energy delivery systems. Founded in 1823 as the New York Gas Light company, their electric, gas, and steam service now provides energy for the 10 million people who live in New York City and Westchester County.
14,000+ Full-time Employees
10+ Million Customers
Scaling an Enterprise Design System
As the Design Lead for Con Edison’s Digital Factory team, I led the expansion and enhancement of the company’s Enterprise Design System (EDS), enabling consistency, efficiency, and accessibility across a range of digital products and applications.
Throughout this project, I collaborated closely with product teams, developers, and key stakeholders to build feature-rich, full-stack utilities and coded components. This allowed us to create a suite of tools that not only enhanced usability but also ensured accessibility compliance (AA WCAG), which was a critical requirement.
Timeline
October 2021 - June 2024
Team
Rufai Ahmad
Product Owner
Steven Barrios,
Wilson Rivera
Tech Leads
Hadja Diallo
Scrum Master
My Role
Design Lead
Arnob Hridoy,
Lydia Li,
Prasad Vemula
Front-End Developers
Saatwik G.
Back-End Developer
The Problem
While Digital Factory had an established Enterprise Design System (EDS), it lacked scalability to meet evolving user needs. Without robust, accessible, and feature-rich components, building efficient and consistent applications across the organization was a challenge.
Goal
To enhance the scalability, usability, and adoption of Con Edison’s Enterprise Design System by expanding its feature set, improving accessibility, and streamlining design-to-development workflows.
Key Success Metrics
Adoption and Integration
Integration of the expanded design system across 16+ B2B/B2C applications, achieving uniformity and improved collaboration between design and development teams.
Accessibility Compliance
Achieve full AA WCAG compliance, ensuring inclusivity and accessibility for a diverse range of users.
Cost Savings
Reduce design and development cost through reusable components and streamlined workflows.
Design System Migration
Migrate the design system from Sketch to Figma.
Full-Stack Utilities
In-App Survey & Admin Dashboard
A full-stack utility enabling product owners to collect feedback from users. It included configurable questions, triggers, and an admin dashboard to review survey metrics and responses.
Photo Utility
Empowered users to capture, annotate, and edit photos within applications, offering a suite of photo editing tools (Tag, Add Text, Freehand Drawing, Crop) with an undo feature and a customizable photo gallery.
Photo Gallery
This utility allows consumers to display uploaded and edited photos. In addition, it can be integrated with the CCL Photo Utility.
Video Upload Utility
Enabled seamless video uploads with chunk upload functionality and customizable action buttons, making the process easier and more efficient for users.
Video Player & Playlist
Enhanced video playback with a user-friendly playlist feature.
Media Gallery
A cohesive utility to display multimedia content, integrating videos and photos with configurable action buttons, ensuring a user-friendly experience.
Components
CCL Content Carousel & Card Selector
Versatile components to display content interactively, supporting features like animations, paging, endless scrolling, and accessibility via screen readers.
Accessibility Improvements: A Priority for the Enterprise Design System
One of my first projects with the Enterprise Design System was addressing accessibility issues within existing components.
I conducted a comprehensive audit, evaluating every component for WCAG compliance, and collaborated with product teams to resolve accessibility concerns flagged by various product groups.
To tackle these issues effectively:
I created precise mockups that identified accessibility gaps and outlined clear solutions.
I partnered closely with engineering to implement these updates in production code, ensuring seamless integration and adherence to accessibility standards.
Together, we delivered improved, compliant components that supported a more inclusive user experience.
This work laid the foundation for our system's commitment to AA WCAG compliance, enhancing usability for all users and establishing accessibility as a core principle of the design system.
Design System: Sketch to Figma Migration
The migration of Digital Factory’s Enterprise Design System (EDS) design library from Sketch to Figma was a critical project driven by several key factors, including the sunsetting of InVision’s collaboration and prototyping tools.
The move was not only a response to a practical necessity but also a strategic opportunity to enhance workflows, collaboration, and scalability across the Digital Factory team.
Phased Migration Approach
To ensure a smooth transition, I developed and executed a structured, phased migration plan:
1. Preparation and Planning
Audit and Cleanup: Conduct an audit of the existing Sketch library to identify outdated, redundant, or underutilized components.
Stakeholder Alignment: Engage with designers, developers, and product owners to gather input on workflow needs and set expectations for the migration.
2. Rebuilding and Optimization
Naming Conventions: Established clear, scalable naming conventions for components to enhance organization and find-ability.
Component Categories: Reorganize the design library into intuitive categories, aligning with Figma's features for easier navigation and usage.
Symbol Rebuild: Recreate symbols in Figma, leveraging Figma's features such as Variants for component states, Design Tokens for consistency, and Variables for dynamic properties.
Fixing Imports: Address any inconsistencies or issues resulting from direct imports from Sketch, ensuring a seamless transition.
4. Team Onboarding & Knowledge Transfer
Conduct workshops to familiarize the team with Figma's functionality.
Share best practices for utilizing Figma's collaborative features.
Incremental Rollout: Released the new library in phases to gather feedback and make iterative improvements.
3. Implementation of Advanced Features
Design Tokens: Implement design tokens for typography, color, and spacing to enable consistent styling across applications.
Variables: Integrate variables for dynamic property management, improving scalability for themes and state changes.
Impact
The expansion of the Enterprise Design System has led to significant advancements:
Seamlessly integrated into
16+ B2B/B2C applications
ensuring uniformity and efficiency across Con Edison's digital platforms.
Achieved substantial cost savings totaling
$2.5 Million
in design and development expenditures.
Through meticulous efforts, the EDS has attained
AA WCAG compliance
reaffirming its commitment to accessibility and inclusivity.
Learnings
Two Key Learnings from the Enterprise Design System Project
Collaboration is Everything
One of the biggest lessons I learned was just how important it is to work closely with everyone involved—designers, engineers, and product teams. When we identified accessibility issues and needed to resolve them, it was crucial to break down silos and ensure that everyone was on the same page. By creating clear mockups, aligning with engineers on the technical solutions, and staying involved through to production, we made sure that everyone felt a sense of ownership over the end product. This collaboration turned what could have been a daunting task into a much smoother, more successful process.
Design Systems Need to Be Flexible and Future-Proof
Another key takeaway was the importance of building systems that can grow with the needs of the company. Moving from Sketch to Figma was a huge step forward, and it showed me how essential it is to design with scalability in mind. The flexibility Figma gave us, especially with design tokens and variables, helped create a design system that could evolve without losing its integrity. It’s a good reminder that a design system isn’t just about solving today’s problems—it’s about setting up something that can continue to work and grow with the team over time.