Revamping developer docs on Shopify.dev

We set out to improve Shopify's developer experience by creating world-class dev docs that would increase both satisfaction and usage.

Shopify
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).

Screenshot of Liquid references on Shopify.dev in light modeScreenshot of Liquid references on Shopify.dev in dark modeScreenshot of Liquid references on Shopify.dev in dark mode on a mobile deviceScreenshot of REST Admin API references on Shopify.dev in light modeScreenshot of REST Admin API references on Shopify.dev in dark modeScreenshot of REST Admin API references on Shopify.dev in dark mode on a mobile deviceScreenshot of GraphQL Admin API references on Shopify.dev in light modeScreenshot of GraphQL Admin API references on Shopify.dev in dark modeScreenshot of GraphQL Admin API references on Shopify.dev in dark mode on mobileScreenshot of the Liquid references overview on Shopify.dev in dark modeScreenshot of the basics of Liquid references on Shopify.dev in dark modeScreenshot of Liquid references on Shopify.dev in dark mode, explaining how operators workScreenshot of Liquid references on Shopify.dev in dark mode, explaining how tags workScreenshot of Liquid references on Shopify.dev in dark mode, explaining how filters workScreenshot of Liquid references on Shopify.dev in dark mode, showing examples of how first and join filters workScreenshot of Liquid filters on Shopify.dev in dark mode on mobile