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
The process
Shaping a product
Foundations and components
this has been a gradual process still ongoing accordingly to the adoption of the design system across the university.
I started from
Also understanding the level of familiarity with the product is helping me to adrees the guidelines in a more targeted way. Guidelines for user using Microsoft product or html developers that need to adapt a third party platfom.
I started from
- component audit,
- stakeholders map and interviews
- technology map
- user interviews (prodict owners, developers)
- governance map and decision tree map
Also understanding the level of familiarity with the product is helping me to adrees the guidelines in a more targeted way. Guidelines for user using Microsoft product or html developers that need to adapt a third party platfom.
Design tokens
Design system management
Guidelines
Accessibility and inclusivity
Design system management
Communication and change of culture
UCL Design System ︎︎︎