May 2022 -
Dec 2022
Figma,
FigJam,
Trello
3 UX/UI designers
UX/UI Design
Accessibility Design
Documentation
User Research
Nova Digital Foundations Guidelines
Nova Component Kit
During my 8-month UX internship at Teck’s technology transformation program called RACE21, I worked with two other designers on a part-time basis to build an all-new design system called NOVA.
The goal is to form a set of standards and a collection of reusable design components to be shared amongst the designers, curated with A11Y in mind.
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.
Accessible design is improving usability and experiences for all users, regardless of abilities.
We strived to create our design system to be compliant around the Web Content Accessibility Standards (WCAG 2.2) and during my internship, we primarily targeted challenges around visual and colour disabilities. It is of high importance for Teck products to allow strong visual interpretation due to safety awareness of any alerts on mine sites.
Flexibility fosters creative innovation.
Accommodating product evolution over time was another challenge. We wanted to cater to the capability of adding and removing new features based on user needs and stakeholder feedback. Maintaining flexibility from the design system will allow designers to implement design changes swiftly without disrupting workflows or upsetting users who are accustomed to specific elements of the interface being in particular places.
We used Google's Material 3 guidelinesand the Material UI component library as our primary source of reference for foundation and component building. This allowed us to focus on the cohesion of our system. By analyzing other design systems, we were able to target what would work most consistently for Teck.
Red and green is typically used to depict informational opposites in design. Some examples are:
As most of Teck’s users are mine site workers, needing to know the clear difference between these is highly important for safety on site.We experimented with different colours and hues for alert colours. Although the colours we concluded with are differentiable for those with colour deficiencies, we found that incorporating icons and symbolscan more clearly convey meaning alongside the colours.
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.
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:
Here are some final components:
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. I was able to test and incorporate componentsfrom this design system within my next large-scale project (see PortOps Rejuvenation Project) after receiving a full-time return offer.
© Cathy Yan 2024. Made with love and iced lattes
