Building Custom Ink's scalable design system

Custom Ink is a leading online platform that allows customers to design and create custom apparel and accessories. With a user base of millions, delivering a seamless and enjoyable user experience through a scalable design system is paramount to the company's success.

As a design lead collaborating with Custom Ink's design team, I undertook the challenge of enhancing their 'Design Lab Editor,' a critical tool for customers to create and visualize their custom designs, along with other screens such as checkout, account management, and the catalog.

I needed to create a library for the designers where they would have all the components synced to one master. This was extremely hard to do in Sketch. I suggested moving all designs to Figma and dropping the other tools they were using, such as Abstract, InVision and Zeplin.

My first step during the transition from Sketch to Figma was to do an audit of the entire experience at Custom Ink. Take as many applications and screens through a funnel to find inconsistency with colors, typography, components and general design patterns. Examples of problems found:

• Multiple hex codes for the same color
• Typography sizing all over the place
• No consistent components even buttons
• Marketing was not in sync with product
• No visual language or principles for designers to work from

I undertook various initiatives to discover companies with similar experiences or challenges, adopting a customer-centric perspective. This approach ensures that we learn from other businesses' solutions, avoiding the repetition of mistakes, and gaining valuable insights into the benchmarks for new and innovative solutions.

In my research, we have cross-referenced numerous companies that offer excellent customer-oriented design tools, streamlined order processes, and proficient management of their customer interactions.

At this juncture, the product team had adopted Figma as the primary tool for all design work, which presented an opportune moment to commence evaluations of the visual language. The rudimentary aspects such as color, typography, and spacing were meticulously scrutinized to create a foundational library of tokens with consistently accurate naming conventions. This proved to be an optimal course of action, as the components were built around these crucial elements, which, once resolved, prevented potential hurdles during the development of components.

The first round for all the atomic elements needed to be tested for contrast and correct sizing in order for the users to have a consistent and easy experience. I worked closely with the marketing and brand to get the correct HEX codes for the colors. The color palette was too small and would not work if we scaled it to large components and states. So I expanded the shades of the colors and created a larger palette that could support the new design system. The same went for typography and spacing: they needed to be documented and consistent.

After the visual design language and the atomic elements were defined I could publish the library and let the team start linking all the designs to the correct styles. I started with the most-used components, such as buttons, checkboxes, text fields, alerts and many more.

I broke out these pieces of the design system as patterns such as forms, headers, footers etc. The designers needed these to complete actual screens and this helped reduce the time it took to actually complete a screen. I would do workshops and teach the design team how to use all the atoms, molecules and organisms together in harmony otherwise they would not use it and the main goal of the system would fail.

A design system is a never ending product that needs constant maintenance and design input. Getting feedback from the team on a weekly basis on what to improve and fix was the nature of Pigment, Custom Ink’s design system. I ran some tests on how fast a designer could actually make a screen and how many they had to make and it dramatically decreased. From taking 3-4 hours on creating a simple checkout screen to only 1-2 hours with redlines and documentation. The engineering team had a library that was parallel to the design team and could be communicated easily with the new naming convention.

Overall the harmony between UX team, marketing team, and engineering team was of the same vision. Now Custom Ink could scale the products with consistent design and focus on how to improve user experience of their customers rather than spending most of their time on fixing design.

During the entire building process of the design system I worked with engineers to hand off components that were prototyped, spaced and redlined. This helped the transition from design to code providing the correct documentation on the components and token names to easily reference. The development team used Storybook to house the components and to undergo a review process with me.