S&C Electric Design Systems Data Visualization Summer 2022 All Shipped ✅

Building the Foundation
Others Build On

S&C Electric Design System — Components Showcase & Reflection

Duration
May – Aug 2022
Role
UX Design Intern
Team
S&C Design System Team
Tools
Figma · Jira · Confluence
Deliverables
4 shipped projects
S&C Design System Work Showcase
Overview

Designing for Designers
& Engineers

Design systems are infrastructure. They're the invisible layer that enables every other product team to move faster, build consistently, and focus on problems instead of patterns. As a UX Design Intern at S&C Electric's Design System team, I had the unusual responsibility of designing components that other designers and engineers would actually use — not just end users.

Over four months and across four shipped projects, I worked within an agile process with two-week sprints, completing 1–3 tickets per sprint. Every deliverable here is my individual work — shaped by rigorous team feedback, daily stand-ups, sprint demos, and weekly mentor sessions.

What made this role unique: the audience for my design decisions wasn't a general user. It was the development team and design system consumers who would build on top of what I created. Precision, documentation, and edge-case thinking mattered far more than they ever had before.

01
Data Viz SeriesChart & graph component variants
02
Example Web AppTesting environment for components
03
Mobile ComponentsThree responsive mobile components
04
Usage DashboardComponent adoption tracker
Duration
May – August 2022
Role
UX Design Intern
Team
S&C Electric Design System Team
Process
Agile · 2-week sprints · 1–3 tickets/sprint
Tools & Methods
Figma · Jira · Confluence
Interviews · Survey
Mid-term Review
Full marks ✅
Process

Working in the Rhythm
of Agile Sprints

01
Daily Stand-up
Share progress, blockers, and next steps with the full team every morning.
02
Design Reviews
Weekly sync with designers and developers to align on specs, edge cases, and feasibility.
03
Sprint Demo
Present completed tickets to the broader team at the end of each two-week sprint.
04
1:1 Mentorship
Weekly sessions with my mentor to review work, ask questions, and course-correct early.
05
Research First
Before designing any component, extensive research into patterns, context, and industry best practices.
Sprint timeline across the internship
Work Showcase

Four Deliverables,
All Shipped

Data visualization components — set 1
Data visualization components — set 2
Deliverable 01 — Data Visualization

A Full Series of
Chart Components

S&C Electric's enterprise dashboards needed a cohesive, reusable set of data visualization components — charts and graphs that would work consistently across multiple internal products. I designed the component series end-to-end: defining states, variants, responsive behavior, and specifications for the development handoff.

The challenge of data viz components isn't just aesthetics — it's encoding data accurately while remaining legible to non-technical users. I researched visualization best practices extensively before designing a single chart, which saved significant rework down the line.

Bar Charts Line Charts Donut Charts Figma Components
Example web app for component testing
Example web app — additional screens
Deliverable 02 — Example Web App

A Testing Ground
for Real Components

New design system components don't exist in isolation — they need to be validated in real-world UI contexts before being adopted by product teams. I designed a full example web application that served as a living showcase and bug-testing environment for the component library.

The app wasn't just a demo — it was a tool. Engineers used it to surface edge cases, QA used it as a test bed, and new team members used it to understand how components fit together in a real product context.

UI Design Component Integration QA Support
Mobile components
Deliverable 03 — Mobile Components

Three Components,
Mobile-First

S&C Electric's design system needed to extend its coverage to mobile interfaces. I designed three mobile components — defining touch targets, responsive breakpoints, and interaction states that aligned with the existing component language while accommodating the constraints of smaller screens.

Designing mobile components for a design system demands a higher level of specificity than product design — every state, every edge case, every interaction needs to be documented so that any developer consuming the component can implement it without ambiguity.

Mobile UI Touch Targets State Design Dev Handoff
Component usage dashboard — adoption over time
Deliverable 04 — Component Usage Dashboard

Making Adoption
Visible

How do you know if your design system is actually being used? The team needed a way to track component adoption across S&C's internal products — a dashboard that could answer the question: which components are being used, by which teams, and at what rate?

I led the end-to-end design of this internal tool — from research into what metrics actually matter to stakeholders, through the information architecture, to the final high-fidelity designs. This was the project that most pushed me toward product thinking, not just UI craft.

Dashboard Design Stakeholder Research Data Display End-to-End
Reflection

Honest Takeaways
from a First Internship

What went well
🎯
Design Quality That Held Up

I received full marks during the mid-term review — a meaningful signal that the work met the bar the team set for itself. My manager's direct commendation of the output reinforced that quality doesn't require experience, it requires care. That was an important lesson to carry forward.

👁
Learning by Watching

Beyond the formal work, I absorbed an enormous amount by simply being present — watching how my mentor Ann (affectionately known as the "Figma Guru" of the team) approached complex component architecture, how team members gave and received feedback in design reviews, and how technical decisions were communicated across disciplines.

🔍
Research Before Pixels

My instinct to research deeply before designing turned out to be exactly right for design system work. Understanding the why behind component patterns — accessibility standards, developer ergonomics, existing conventions — saved me from multiple dead ends and produced designs that didn't need to be rebuilt later.

What I'd do differently
🌱
Share Work Earlier, Rougher

I defaulted to only showing polished work — waiting until something felt "ready" before bringing it to the team. This delayed feedback that could have redirected my approach before I'd invested significant time. Rough work shared early is more valuable than polished work shared late.

📝
Document the Process, Not Just the Output

Watching my colleague Audrey's meticulous documentation approach was humbling. I came from a background where speed was prioritized over process records — but in a design system context, the reasoning behind decisions matters as much as the decisions themselves. Future contributors need context, not just files.

💬
Invest in Communication as a Design Skill

English being my non-native language, I noticed gaps in professional vocabulary and cultural communication nuances — small talk, how to frame ambiguous situations, when to push back. These aren't soft skills separate from design; they're how design gets implemented. I've treated communication as a craft worth developing deliberately since.

I'm more sure now that UX design is where my passion is, and I'm ready for it.

— Shaw Chen, end-of-internship reflection, August 2022
Next Case Study
Salt Tracker → ← Back to all work