Enhancing C-SPAN’s digital archive to improve how researchers, educators, and the public find, interact, and understand video content.
Role
UX Design Intern
Project Type
Internship
Duration
January - May 2025
Sprint 1
Design System and Style Guide
Background
C-SPAN didn't have a lot of focus on design within their development cycle. With the lack of design tools like Figma, they did not have a centralized design system or style guide.
Creating a design system I can use throughout my internship would not only increase my productivity, but it would also allow me to easily prototype and show user interactions to my manager and development
Problem
The lack of a design system and style guide led to a lot of variation in fonts, colors, layouts, and interactions within their website.
Why Does This Matter?
Inconsistent User Experience
Harder Navigation
Accessibility Concerns
My Process
Identify Style Elements
First, I went through the site and utilized the inspect tools and plugins to identify the different fonts, sizing, colors, and use cases throughout the site
Consolidate + Standardize
Creating a consolidated style guide enabled the team to easily reference different design aspects without having to look through code. Furthermore, this allowed me to add all the variables to Figma Workplace for ease of use when prototyping.
Develop Nested Componenets
Using components allowed me to nest interactions within each other, enabling me to better showcase mockups to the development team.
Results
Further Iterate
I established C-SPAN's first component library in Figma, featuring over 40 reusable components, including cards, transcript formatting, buttons, icons, and more, which enables faster prototyping and standardization across the redesign.
Increased Scalability
Improved Consistency
Sprint 2
Speaker Information Feature on Video Pages
Background
C-SPAN's AI video analysis tool uses facial recognition to identify people within congressional videos. This allows users and transcripts to pick up on who is speaking throughout the video.
Problem
The current interface only identifies the speaker but doesn't provide additional information, such as their party affiliation, career, or committee affiliations.
Why Does This Matter?
Users may want more context on who is speaking
Enables users to easily find other videos the speaker is in
Turns C-SPAN from a video archive into a powerful research tool
My Process
Understand Current Experience + User's Wants
The initial problem my manager wanted me to solve was finding ways to add more context to congressional videos. To achieve this, I first needed to understand what users want to know and the level of detail they need.
Wireframe + Iterate
At this stage, I used guidelines to refine designs and prioritized quality over quantity to create consistent solutions that meet users' needs.
Results
Feedback & Handoff to Development
I was able to present the wireframes and prototypes, as well as my design decisions and process, to C-SPAN's CEO and my manager. This allowed me to effectively showcase the impact of this feature on C-SPAN's users and get feedback on possible areas for further iteration, enabling the feature to be pushed to development.
Live Version
The development team was able to use my notes and Figma's dev tools to update the current video pages with the iterations
Prototypes sent to developers
Live version on website
Try out the tool on C-SPAN’s website! While watching any congressional video, users can instantly learn more about the speaker, with automatic updates appearing as the person on screen changes.
