Custom ink

Custom Ink design system and user experience

Custom Ink

Project Goal

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 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, and other screens experiences such as checkout, account management and catalog.

Softwares Used

Figma
Miro
User Testing
Storybook
Slack
Jira

Website

Click to view site

Challenge

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 to move all designs to Figma and ditch the softwares they were currently using such as abstract, invision and zeplin.

Research and Planning

First step for me during the transition phase from Sketch to Figma was 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

Design System

I broke out these piece 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 on 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.

Impact

A design system is a never ending product that needs constant maintenance and design input. Getting feedback from the team on weekly basis on what to improve and fix was the nature of Pigment. I ran some test 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.