Learn the world of design systems
In the summer of 2022, I was a digital design intern for Shopify’s Checkout Extensibility team. I was tasked to assist with the design system redesign and to create documentation. During the internship, I worked with a cross-functional team to find potential pain points, streamline the UI Kit and create color guideline documentation.
Checkout Extensibility
The Checkout Extensibility team is building the future of checkout customizations on Shopify. The team builds new types of extension for customizing checkout. Users can utilize new checkout extension points, APIs and checkout UI components to provide functional customizations.
The Goal: is to build a component library that meets the highest bar for accessibility and performance that will be used by first- and third-party developers.
Target User: First- and third-party developers who uses their checkout extension API to customize Shopify storefronts checkout experience.
I audited the research repository and public documentation available to users (Shopify.dev, component library, past design system files etc. ) to understand current system’s issues. I also interviewed multiple stakeholders from internal designers to our target users, third-party developers.
Competitive analysis: I conducted competitive analysis to better understand how to create successful color documentation for developers. It is important to learn the pros and cons of existing color guidelines while understanding the current conventions which developers are used to.
The Developer Journey
After gathering all the research from different stakeholders and the audit, I created a design question and identified 3 areas of improvements that impacts the user’s experience.
Painpoint #1
Design system was outdated and does not align with documentation
I discovered a mismatch in information and semantics presented between the two library of information. Many components were also not linked correctly due to the Figma variant update.
Painpoint #2
There were gaps in documentation.
There were misalignment in documentation. Developers also expressed the lack of UI guidance was also causing friction.
Define documentation guidelines & standards
I worked closely with my manager, one designer, two developers and one content designer to craft different solutions for the pain points that were identified. I updated 8 different components and tested them against existing designs. Moreover, despite my short internship, I volunteered to write the color guideline documentation, since the developers have expressed color being their biggest point of confusion.
Solutions
There were a lot more color styles presented on Figma, however only the essential options are actually offered in dev customization.
I also updated the colors by validating against existing screens and testing color accessibility.
I worked with Figma branching to update the design system. I tweaked the errors caused by Figma variant update while testing the redesign against existing use cases to ensure the update is valid.
Since color usage was the biggest pain point identified, I proposed a color guideline as a supplement to the current repository of documentation.
I learned from the competitive analysis while taking Shopify’s document style into account, and drafted the layout. I gathered feedback through two sessions of designer critique and multiple check-ins with the content designer to create the final product.
Iterations and testing
Design system and guidelines are impacts the foundational designs of the product, so many use cases need to be taken into account. I tested each update against current designs to ensure everything works accordingly.
I worked with a manager and a content designer to polish the terminologies and grammar, then I presented the design at 2 design critiques and 3 developer interviews to validate my iterations. Below is an iteration example for the color role overview.
The design system was a process of constant iteration. I tested out different colors, font size and spacing against different screens to ensure the design system update wouldn’t break anything.
Color accessibility validation process
Text update validation
Spacing update & validation
Color Guidelines
The final color guidelines consists of three parts: principles, color roles and best practices. This is the first of many new design documentation for third-party developers planned in the strategy proposal I had submitted. It was met with great excitement and approval from my manager and the wider design team.
Design System UI Kit
The Design system consisted of 50+ components with newly updated color, spacing, font size…etc.
01 — Designing through constant iteration and extreme attention to detail
Redesigning a design system requires attention and caution, since you’re editing the foundation of all the screens that have been built. This is my first time working with Figma file branching and it was extremely helpful in ensuring nothing goes wrong. Redesigning a design system has also made me a more proficient Figma user.
02 — Working from both a designer and a developer perspective
This was my first time working on developer documentation and I had to learn to design from a developer perspective. The learning curve was real! Design system sits between front end development and user interface design. I learned to make design decisions while taking both aspects in mind. I was proactive in asking questions and made sure I had a solid understanding of the Checkout UI Extension before proceeding.
