me
How i elevated design quality to simplify component use and boost team efficiency.
How i elevated design quality to simplify component use and boost team efficiency.
Shipped
Role :
UX Product Designer
Type : Internship
Duration :
May'24 - Dec'24
Location :
San Jose, CA
CONTEXT
When a company evolves its design system, the goal isn’t just to update components, it’s to create a system that’s scalable, consistent, and easy to adopt.
For large teams, this means ensuring that both designers and developers have a clear structure to follow, minimizing inconsistencies and streamlining implementation.
Roku’s design team was migrating from a legacy design system to RDS (Roku Design System). This transition required rebuilding components, defining design tokens, and ensuring alignment with Roku’s brand identity, colors, typography, and UI patterns.
However, the process lacked standardized documentation and best practices, making it difficult for teams to adopt the system efficiently.
MY ROLE
Dhyan
+Devs
Collaboration With Designers and Developers
Component Design & Enhancements
Designed new UI components and improved existing ones with variants and properties for flexibility. Worked with engineers to ensure seamless integration.
Light & Dark Mode with Design Tokens
Defined design tokens for colors in light and dark modes, ensuring consistency and accessibility across the system.
Documentation on Zeroheight & Collaborating via Storybook
Referenced Storybook for design-to-code accuracy, collaborated with engineers to refine specs, and documented best practices in ZeroHeight for consistency.
Built a Scalable Component Library
Designed a reusable library for headers and footers, ensuring consistency, adaptability, and efficiency across products. Documented usage guidelines for seamless adoption.
Motion Design for Usability
Prototyped micro-interactions on Jitter to improve usability and interaction feedback. Documented motion principles to guide future implementation and standardization.
Product Collaboration
Worked with the Roku Pay team on Credit Balance and Payment Method screens, ensuring a seamless and user-friendly payment experience.
Here’s a glimpse.
Feel free to reach out to see more of the components and documentation I worked on, as well as access to the deck 🔒
COMPONENTS
Uploader
Split Buttons
ZEROHEIGHT DOCUMENTATION
Defined specs and documented best practices for the uploader component on Zeroheight.
Defined layout grids and breakpoints and documented best practices.
MICROINTERACTIONS
Toggle Animation, Roku Header, and Roku Product/ Thank You Page
HOW DID I APPROACH ?
Identifying the Need
Reviewed component gaps, assessed requirements, and ensured alignment with design system goals.
1
Researched & Defined Requirements
Audited existing patterns, referenced Storybook, and validated design tokens for consistency.
2
Designing the component
Created components with variants, interaction states, and responsiveness in Figma.
3
Validated with Storybook
Referenced Storybook to check design-to-code accuracy and worked with engineers to refine specs.
5
Documented in ZeroHeight
Defined specs, best practices, and usage guidelines to streamline adoption.
6
Implementation & Iteration
QA’d components, gathered feedback, and refined them before rollout.
7
Collaborated & Reviewed
Participated in design critiques, including RDS team meetings, Figma Branch Reviews, weekly UX crits, and engineer feedback sessions.
4
Best moments with the Team 🎉
KEY LEARNINGS AND TAKEAWAYS
Creating and managing design system at scale
Learned about a creating a design system, its elements, creating customisable components, distributing the library, assist and train people in using the design system.
Receiving feedback and iterating
Constantly engaging with the team and stakeholders to receive feedback on the constraints, limitations or requirements to iterate or revise the components to build the design system.
Cross Functional Collaboration
Worked closely with cross-functional teams, including developers and other stakeholders, to ensure alignment and smooth integration of the design system into the overall product.
Navigate through ambiguity
Move ahead without knowing the perfect answer for the questions. Walk past the hurdles and keep moving with trying multiple ideas.
Legacy
Design
System
Kitchen Sink UI
Roku
Design
System
Rds
THE CHALLENGE
Properties of a Tooltip ( Before and After)
Crafted with love on Framer🫶🏻 + lotss of chai ☕!
I trust to see you again, also I have a message for you. Hehe, bless you!
© Copyrights 2025. All rights & wrongs reserved
Dhyan Rajesh.