UCL Design System
University College of London 2024 - today
Guidelines, UI kit, design tokens that help create consistent, user-friendly experiences across UCL's digital experiences.
︎ My Role
As a Senior Product Designer, I thought, crafted and produced this design system. starting from the naming conventions, I defined the design tokens, designed and set up the component structure, and streamlining the handoff to developers.
I also write and publish the design guidelines.
As a Senior Product Designer, I thought, crafted and produced this design system. starting from the naming conventions, I defined the design tokens, designed and set up the component structure, and streamlining the handoff to developers.
I also write and publish the design guidelines.
︎ Skills and Tools
Skills: UX/UI design, design tokens structure, prototyping, testing, accessibility, icon design.
Team: I work with a Tech lead and several developers from other product teams, 1 junior UI designer and 1 midweight UI designer.
Tools: Figma, Github, Illustrator, Drupal CMS.
Skills: UX/UI design, design tokens structure, prototyping, testing, accessibility, icon design.
Team: I work with a Tech lead and several developers from other product teams, 1 junior UI designer and 1 midweight UI designer.
Tools: Figma, Github, Illustrator, Drupal CMS.
Styles
The foundations are based on the recent new UCL identity and new branding guidelines. They include Typography, Colors, Object styles, Grid system, Spacing, Icons.
Colors: primitives and semantics
Components
The UI kit is built in Figma using primitive and semantic variables. The components structure is carefully built and agreed with devs to make variants and states easy to manage through props.
Buttons component and guides
Input text and input number
UCL Design System ︎︎︎