Revamping developer docs on Shopify.dev

Shopify.dev, May 2021— May 2022

Project overview
Shopify.dev supports one of the largest communities of third-party app developers in the World. Everyday, developers leverage APIs and SDKs to build themes, apps, and other extensions that solve merchant problems. These integrations help make commerce better by enabling flexibility and extensibility for critical experiences like checkout flows.

"Building for Shopify" was a strategic business goal. However, the existing developer documentation was lagging behind. I joined the project partway as a Staff Product Designer and focused on helping the team redesign reference documentation, craft new tutorials, and establish a local design system that could also introduced a new design language across all of Shopify’s developer-facing products.

In a leadership capacity, I championed UX, actively drove cross-functional collaboration, led remote design sprints, mentored other designers, and regularly presented updates to leadership for review and feedback.

On an individual level, I collaborated with Technical Writers to conduct content audits, craft new tutorials, and focus on redesigning overview pages for REST, GraphQL and Liquid documentation. In developing the local (.dev) design system, I helped establish new layout patterns, evolved existing styles and components, and created bespoke illustrations and spot icons to ensure a cohesive visual design language.

From September 2021 to June 2022, my redesigns were incrementally released, leading to a reduction in related support tickets, positive feedback from the community on social media and Discord, and acknowledgement from Tobi Lütke (CEO).
Goals
We set out to improve Shopify's developer experience by creating world-class dev docs that would increase both satisfaction and usage.

Official announcement video showcasing the new dark mode UI (2021)

Liquid references - Overview in light mode

Liquid references overview page

Liquid references - Overview in dark mode

Liquid references overview page in dark mode

REST references - Overview in light mode

REST Admin API references overview page

REST references - Overview in dark mode

REST Admin API references overview page in dark mode

REST references - API overview on mobile

REST references overview in responsive web

GraphQL references - Overview in light mode

GraphQL Admin API references overview page

GraphQL references - Overview in dark mode

GraphQL Admin API references overview page in dark mode

GraphQL references - API overview on mobile

GraphQL references overview in responsive web

Liquid references - Interactive code block for tags

Introducing basic concepts of Liquid

Liquid references - Operators basics

Tables, interactive code blocks, and code examples helped developers understand basic concepts and easily reference them

Liquid references - Mobile

Liquid references in responsive web

Liquid references - Basics introduction

By putting the content first, we found it easier to reorganize navigation and introduce elements like anchor tags for finding things faster

Liquid references - Conditional tags

Side-by-side code blocks established clear relationships between the code and output that was generated

Liquid references - Filters introduction

We even worked in (HEALTH POTION) examples to elevate our design language and brand further

Liquid references - Filters examples with illustrations

A flexible system of layouts allowed us to effectively design for both languages and APIs, integrating visual examples where appropriate

Liquid references - Filters overview on mobile

Our references were designed to work on any screen size