Teck Internship • 8 minute read
Context
Within the Nova Design Systems team, alongside two other designers who contribute on a part-time basis, my chief responsibilities included developing components and refining the style guide in accordance with Google's Material 3 guidelines. This design system has become an essential tool for 10+ designers working on Teck's diverse digital product portfolio.
HOW OUR DESIGN SYSTEM WORKS
ATOMIC DESIGN METHODOLOGY
Atoms → Molecules → Organisms → Pages
Leveraging Atomic Design, we dissected complex interfaces into fundamental elements, streamlining the design process for Nova's components. This methodology enabled us to build consistency and scalability across Teck's digital ecosystem, from the smallest unit to complete pages.
ATOMS
📁 Nova Digital Foundations
This foundation file serves as the bedrock of our design system, encapsulating essential elements like colour styles, text styles, and spacing guidelines.
MOLECULES
📁 Nova Component Kit (Building Blocks)
Our Component Kit, aligned with Material 3 guidelines, houses a collection of standardized components acting as the building blocks for intricate designs.
ORGANISMS
📁 Nova Component Kit & LHA Component Library
These 2 files host advanced organisms tailored to meet the unique demands of different Teck products. This synergy allows for versatile, product-specific designs.
PAGES
📁 LHA Component Library
Pages, being highly specific to each product suite within Teck, are curated within a dedicated product-specific library to ensure that designers can utilize product-specific layouts.
PROJECT #1
BACKGROUND
Our weekly feedback loop with designers is pivotal to Nova's agility in fostering a collaborative environment that propels the system's growth. This process ensures Nova adapts swiftly to new design trends and user needs, maintaining its effectiveness across Teck's unified product range.
DESIGN PROCESS
ANALYSIS
Scoping out possible use cases on the existing product suites that we have
Leveraging Atomic Design, we dissected complex interfaces into fundamental elements, streamlining the design process for Nova's components. This methodology enabled us to build consistency and scalability across Teck's digital ecosystem, from the smallest unit to complete pages.
RESEARCH
Following Material 3’s guideline as the North Star, aided by other established design systems as secondary inspiration
Our research was anchored in Google's Material 3 guidelines, with Material UI's component library as a core reference to ensure our design and development environments were aligned. This approach guaranteed that the behavior and interaction of our components would seamlessly integrate with the development framework, fostering consistency across our products.
RESEARCH
Defining the specifications for the component
In defining component specifications, we closely adhered to Google's Material 3 Design Kit, utilizing it as our blueprint to ensure our components' behavior and interactions mirrored the development environment. This alignment between design and development facilitated a cohesive user experience and streamlined collaboration.
DESIGN
Working on a branch
Working in a branch makes sure that no unwanted changes can occur, which can cause problems, and also allows us to track systematically the progress and update of Nova.
DESIGN
Color & state layer
A state layer is a semi-transparent covering on an element that indicates its state. State layers provide a systematic approach to visualizing states by using opacity. This method ensures designers can effectively communicate the status of components during handoffs, simplifying the process and enhancing clarity for development teams.
DESIGN / ATOM
Creating the atoms by utilizing variants & properties
By leveraging Figma's amazing variants and properties feature, we crafted the foundational atoms of our design system. This approach enabled us to establish customizable and reusable design elements.
DESIGN / MOLECULE
Grouping the atoms into molecules
Molecules in our interfaces are crafted by strategically combining atoms to function as cohesive units. These groupings serve as the backbone of Nova, facilitating more complex interactions and functionalities.
DESIGN / ORGANISM
Building more complex components from molecules
We constructed organisms by assembling molecules, creating more complex and functional components. These organisms are designed to fulfill specific roles within the interface, enhancing the user experience through their integrated functionality.
DOCUMENTATION
Providing an overview & guideline for the component
This documentation ensures that all team members understand the component's purpose, functionality, and application, guiding consistent implementation across our products.
REVIEW
Push for review and reiterate based on feedback
After finalizing a component, I push my branch for review within the Design Systems team. Based on their feedback and comments, I then refine and iterate the component, ensuring it aligns with our standards and expectations before merging it.
PUBLISH
Once everything’s aligned: Merge & publish!
And that's one component done.
FINAL COMPONENTS
Tabs
Tabs organize content across different screens and views. Use tabs to group content into helpful categories.
Chart & Visualization
This component is used to present complex data in a standardized manner, allowing users to easily understand trends, patterns, and insights throughout the different Teck products.
Segmented Control
Segmented control help people select options, switch views, or sort elements. It is used for simple choices between two to five items.
Info Chip
Info chips can be used to inform the user of something that needs the user’s attention. They can also be used on their own to categorize items.
IMPACT
100x YoY Growth in Usage
The concerted effort to mature Nova culminated in widespread organizational endorsement, reaching from the design floor to management levels. This milestone marks a significant leap in acceptance and commitment across the company, signaling Nova's pivotal role in our design and development process.
Averages less than 1% detaches on some of the components that I’ve built
This underscores the adaptability of the components I developed, indicating they are versatile enough to be used as-is by designers, negating the need for manual adjustments and detaches. Such flexibility underscores the components' efficacy in meeting diverse design needs with minimal modification.
And most importantly: it saves designers’ tons of time and increases our product’s cohesiveness!
Feedback from my peers during the weekly design system release sessions has been overwhelmingly positive, highlighting the significant time savings and enhanced consistency across our products thanks to the newly introduced components.
PROJECT #2
PROBLEM
Context
This discovery surfaced during usability testing for a different project, revealing that individuals with visual impairments struggle with interpreting our alert colors. This issue is particularly critical in the mining industry, where alert colors are vital for immediate situational awareness and safety.
Pain Points
1. Difficulty distinguishing between certain alert colors, like yellow and green, in field conditions.
2. Existing color intensity lacks the urgency required to prompt immediate action.
3. Issue with text readability against the background colors, which diminishes visibility even under standard indoor lighting.
DESIGN PROCESS
RESEARCH
Color principles
Investigating into accessible color schemes revealed three key guidelines. Firstly, ensuring high contrast for universal legibility is essential (WCAG’s standard is > 4.5). Secondly, colors must be distinguishable by those with colorblindness to maintain clarity in alerts. Lastly, enhancing vibrancy to capture attention and convey urgency addresses feedback about the current colors' lack of impact.
RESEARCH
Landscape Analysis
I delved into how other leading design systems implement alert colors, focusing on their strategies for accessibility. This comparative analysis provided valuable insights into industry standards and innovative approaches to color accessibility.
eXPErIMENTATION
Finding new colours
My exploration involved combining and refining colors from various design systems, aligning them with our established color principles. This process led to the selection of several new color options, ready for evaluation and testing for their effectiveness and accessibility.
TESTING / CONTRAST
Using the "Contrast" plugin on Figma
To verify the accessibility of our new color choices, I utilized the "Contrast" plugin, which evaluates color combinations against the WCAG's minimum contrast ratio of 4.5. This tool was instrumental in ensuring that our text remains readable against background colors, directly addressing the critical issue of visibility & readability.
TESTING / CONTRAST
Utilizing Tanaguru Contrast Finder to find similar colours that fulfill the contrast requirements
I leveraged Tanaguru Contrast Finder to assess the contrast between color pairs, ensuring compliance with the required contrast ratio of >4.5. This tool was invaluable in identifying alternatives whenever initial choices fell short, guiding us towards colors that both meet accessibility standards and align with our design requirements.
TESTING / COLOUR ACCESSIBILITY
Using Sim Daltonism to simulate different types of colourblindness
Sim Daltonism, a free application, became an essential part of this project by allowing users to see colors through the lens of various color vision deficiencies. This simulation helped us understand how our chosen colors would appear to users with different types of colorblindness, ensuring our designs are inclusive.
COLLABORATION
Finding the colours that pass the colourblind through a collaborative exercise
In our weekly design feedback sessions, I hosted an exercise with 8 UX Designers to collectively determine the most visually accessible colors. This teamwork approach enriched our decision-making process with diverse perspectives, ensuring our final selections would be universally comprehensible.
TESTING / NOVA COMPONENTS
Applying the new Colors to evaluate brand coherence
The final step involved integrating the colors into Nova components to assess their harmony with Teck's brand identity and visual impact across our product suite. This practical application was crucial for confirming the colors not only met accessibility standards but also enhanced the aesthetic and functional coherence of our products.
FINAL COLOURS
IMPACT
Two weeks following the rollout of the new alert colours, I conducted asynchronous surveys to gauge the impact and gather feedback. The summarized findings revealed a positive shift in user experience, with notable improvements in color accessibility, readability, and the overall visual appeal of our interfaces.
RETROSPECTIVE
Project Takeaways
Here are the major lessons that I learned from these 2 projects.
Embracing accessibility as a core design principle
Through the process of updating Nova's color schemes for better accessibility, I gained a deeper understanding of how inclusive design practices can significantly enhance user experience. This project highlighted the importance of considering a wide range of visual abilities from the outset, demonstrating that accessibility is not just a compliance requirement but a fundamental aspect of thoughtful design that directly contributes to user satisfaction and engagement.
Critical thinking on component design
Delving into each component's design necessitated a deep dive into various options and possibilities, highlighting the importance of critical thinking. This process taught me to meticulously evaluate each design choice, ensuring that every component not only meets aesthetic standards but also aligns with functional and accessibility requirements. Through this, I've learned the value of a deliberate and informed approach to design, which is crucial for creating components that are both versatile and user-friendly.
You’ve reached the end. Thank you for reading!