Teckro

(2020, Ongoing)

Design System

Overview

I took on the task of updating Teckro's design system by defining accessible type styles and colour palettes. Over the years, I've continued to develop and iterate on the design system.

Problem

Lack of clarity in colour and type usage led to inconsistency within the product.
Time wasted on not reusing components as they weren't set up.

Responsibilities

Ensured accessibility and maintained the design system.
Conducted research, workshops, and UI design.

Requirements

Align with Teckro's brand identity.
Promote visibility and community across the company.
Document design guidelines, components, and patterns for different teams.

Project steps

Research & discovery

Design

Project Conclusion

Key issues

Inefficiency in development

The absence of a reusable component library caused delays in development and redundant work.

Inconsistent branding

Lack of clear guidelines led to inconsistencies in colour, typography, and components across the product, diluting brand identity.

Poor accessibility compliance

Old design choices did not fully meet WCAG standards, leading to potential exclusion of users.

Research and discovery

I initially focused on defining accessible type and colour styles. I also researched the best practices from other design systems and focused on incorporating accessibility principles.

Webinars

Continuous Design System by Honza Toman
How to bake a11y into your Design System workflow by Marlene Högliner
Design Systems as a Product by Michael Henning
Design System Adoption by Jiri Trecak
Flexible design systems empower the community by Tom Cunningham

Accessibility & tools

Incorporating accessibility principles and guidelines into our design system is paramount to ensuring the inclusivity and user-friendliness of our digital products for individuals of all abilities and disabilities.

To uphold accessibility standards, I utilised colorcontrast.cc during the creation of the colour palette and typography combinations. Additionally, I employed the Stark plugin in Figma, a valuable tool for assessing and maintaining accessibility in the design process.

Colour palette and typography checks

When crafting the colour palette and selecting typography, I relied on colorcontrast.cc to assess the proposed colours. In Figma, I employed Stark Accessibility to ensure a sufficient contrast between text and background colours. This diligence in checking accessibility is especially crucial for creating an inclusive user experience.

When creating the colour palette and typography I used colourcontrast.cc & In figma I use Stark Accessibility

Contrast testing colour combinations

Important to design for users of varying abilities

Audit of the old design system

In revisiting our previous design system, I examined the old design files and collaborated with developers, identifying and documenting all the styles already in use. This comprehensive audit proved invaluable, facilitating a swift and seamless transition through style mapping.

Old colour palette

The former color system exhibited deficiencies in both structure and scalability. Many colors within the system were unused on the platform, existing as iterations of the main color. This approach lacked conciseness and efficiency. Additionally, the old system operated without defined design rules, contributing to a lack of cohesion.

Old typography styles

The typography styles in the previous system were notably limited, featuring numerous colour and font combinations that did not adhere to WCAG accessibility standards. This audit underscored the need for an overhaul, prompting a more thoughtful and inclusive approach to typography in the redesigned system.

Workshop

To align the team's goals, address concerns, and foster collaboration, we organised a comprehensive workshop.

Pre-workshop survey

I sent out a pre-workshop survey to engage the developers, get them thinking about our current design system and to highlight any key pain points to address in the workshop.

Post-it exercises

During the workshop, we engaged in dynamic post-it exercises. These exercises provided a platform for every team member to generate and capture their ideas swiftly. The process facilitated the gathering of diverse ideas and simplified the grouping of similar thoughts, encouraging active participation and collaboration among team members.

Design

My focus was on crafting a flexible framework that could accommodate the company's future growth. We also maintain an ongoing commitment to update and document our components. This continuous effort ensures clarity, consistency, and accessibility throughout our design and development processes.

Developing a colour palette

In developing our new colour palette, I implemented a strategic naming convention designed for scalability. Each colour serves a distinct purpose, contributing to a unified and harmonious visual identity across all our products. My primary objective is to establish a sense of continuity, ensuring that every product feels interconnected and emanates from the same source. The solid naming conventions I've instituted facilitate effective communication and scalability between our design and development teams.

Developing a typography system

I meticulously documented the various styles, providing clear guidelines on line lengths for each style. Additionally, I defined parameters such as letter spacing, line height, and comprehensive instructions on usage to ensure consistency and adaptability across various applications within the company.

Project conclusion

Design systems are dynamic and continually evolving entities. Key insights from this experience outline the importance of effective communication, designing with growth in mind, preserving consistency, prioritizing accessibility, and fostering comprehensive documentation.

Key learnings

Communication is key. Establishing a designated channel within Teams for open communication between designers and developers has proven instrumental. This platform encourages anyone to share updates or pose questions related to the design system, fostering a collaborative environment where developers feel more engaged.
The shift towards designing with iteration and expansion in mind is paramount. Recognising the necessity for flexibility in design allows for organic growth and evolution, aligning with the dynamic needs of the company.
Upholding consistency in design elements from typography and colour to components and behaviours. This commitment enhances overall branding, fosters familiarity, and elevates usability.
Integrating accessibility principles at every stage of design is crucial. Collaborating closely with accessibility apps, such as Stark, during the design process ensures that all products emerging from our system comply with regulatory standards and ensures we are not creating a product that excludes individuals with disabilities.
Recognizing the essential role of documentation is pivotal. Maintaining comprehensive and inclusive documentation is not only fundamental to the successful implementation but also to the widespread adoption of our design system, providing a robust foundation for future endeavors.

Microsoft teams design system channel

Impact of the design system

The team reported greater alignment & collaboration

Stating that the new guidelines reduced confusion and made it easier to work across teams."

Improved brand consistency

With internal audits showing a more unified look and feel across different products and features.

Less time wasted

Designers and dev alike have noted how the more cohesive design system has sped up processes and allowed us to work faster, more precisiely.

Inefficiency in development

The absence of a reusable component library caused delays in development and redundant work.

Inconsistent branding

Lack of clear guidelines led to inconsistencies in colour, typography, and components across the product, diluting brand identity.

Poor accessibility compliance

Old design choices did not fully meet WCAG standards, leading to potential exclusion of users.

Old colour palette

Old typography styles

Pre-workshop survey

Post-it exercises

Developing a colour palette

Developing a typography system

The team reported greater alignment & collaboration

Stating that the new guidelines reduced confusion and made it easier to work across teams."

Improved brand consistency

With internal audits showing a more unified look and feel across different products and features.

Less time wasted

Designers and dev alike have noted how the more cohesive design system has sped up processes and allowed us to work faster, more precisiely.

Best Before

Edenspiekermann

Char

Design West

The M word

District Spreads

Event work

FAT ÉIRE

Illustration