WHAT IT IS

During my UX internship at Teck’s technology transformation program called RACE21, I worked with two other designers to revamp and build an all-new design system called NOVA. The goal is to establish a useful and practical common set of design standards to be shared amongst the organization to create meaningful tools for our onsite workers.

Project Duration

May 2022 - Dec 2022
8 months

Role

UX/UI Design, Accessibility Design, Design System Management and Documentation

Deliverables

Nova Digital Foundations Guidelines, Nova Component Kit

Tools Used

Figma, FigJam, Trello, Confluence

PROBLEM SPACE

Disconnected user experience when interacting with tools from multiple project domains

Before I joined the team, Teck lacked a centralized design system. With 10 separate project domains, tools and products had their own identities due to different designers needing to create their own UI components and elements for each domain.
‍
This lead to:

duplicated common components
inconsistent tool interfaces
conflicting guidelines on what was right or wrong.

CHALLENGES

Accessible design and flexible components for the right platform.

Accessibility:
We found that many of our users on site had a difficult time using certain tools due to visual disabilities. We strived to create our design system to be compliant around the Web Content Accessibility Standards (WCAG 2.2).

Flexibility:
‍Teck has tools for workers on multiple platforms including desktops, tablets, and mobile phones. This meant our components had to be flexible, so users are able to interact with ease no matter what device they are using.

THE FOUNDATIONS

Nova Digital Foundations

The foundations include the visual elements needed to create the end-to-end user experiences that we want. This includes guidance on our colour system, typography, layout and elevations/surfaces. All elements are compliant around the WCAG 2.2 standards, and all are created in light mode and dark mode.

THE COMPONENTS

Nova Component Library

Each component in the NOVA Component Library has been created intentionally with the goal of meeting a specific interaction need. Component examples I have worked on include: buttons, checkboxes, chips, radio buttons, navigation bars, selects, split buttons, steppers, and text inputs.

TAKEAWAYS

From this internship experience, I was able to polish my technical skills in Figma (and fell in love with autolayout) while contributing to design for accessibility and other designers! Overall, I had a lot of fun contributing to a large-scale design system and was grateful to use many components in my next project (see PortOps).