HYDROGEN BY SHOPIFY
Driving Enterprise Merchant Adoption
BACKGROUND
Shopify launched Hydrogen as a toolkit for building custom headless storefronts. I was asked to lead the redesign of its developer onboarding, partnering closely with engineering and product to design a new experience that helps developers scaffold, configure, and preview a live storefront in minutes—accelerating time-to-value and making evaluation more intuitive.
COMPANY
MY ROLE
YEAR
SKILLS
Design Lead
Shopify
User Research, Product Design, Stakeholder Management, Interactive Prototyping
2023 (✓ Shipped)
CHALLENGE
Low developer adoption is limiting opportunities with enterprise merchants
APPROACH
I started with an audit of the Hydrogen developer preview to map key workflows, surface areas, and onboarding gaps. I then led developer interviews to understand how they evaluate new tools, get started with Hydrogen, and seek support during setup and debugging.
KEY FINDINGS
Gaps in documentation: Developers read documentation before installing, but struggle to understand how the pieces fit together
Starter template friction: Developers waste time stripping out unnecessary code
Lack of guidance: After installation, developers are left without clear next steps
SOLUTION
I improved Hydrogen’s developer docs to better guide users from setup to a working storefront. I also designed a CLI-first flow paired with a minimal starter template, allowing developers to scaffold and preview a storefront in minutes using mock data (no Shopify account required). The experience was supported with contextual guidance throughout the developer life cycle (creating, linking, and deploying) to maintain momentum and evaluate faster with confidence.
IMPACT
22%↑ Weekly Downloads
143 Live Storefronts
$1 Billion+ in GMV (Gross Merchandise Value
Developer documentation that helps developers spin up a working storefront in seconds using the --quickstart flag, making it easy to evaluate Hydrogen
In collaboration with the CLI Foundations team, I led the UX redesign of the Shopify CLI introducing a tokenized design system that standardized type, layout, spacing, and color. This work provided patterns that improved usability, and established a consistent developer experience now adopted by teams across the organization — both internal and external
Choose to start with sample data (no account or API keys required) or log in to a Shopify account to seamlessly pull in storefront data
CLI options allow developers to generate a tailored storefront in just a few steps, automatically scaffolding boilerplate code
In collaboration with the CLI Foundations team, I led the UX redesign of the Shopify CLI introducing a tokenized design system that standardized type, layout, spacing, and color. This work provided patterns that improved usability, and established a consistent developer experience adopted by teams across the organization — both internal and external
A production-ready skeleton template delivers a pre-built storefront with boiler-plate code and minimal styling with mock or live data
A full-featured demo store provides a real-world example, combining a standard storefront setup, core components, queries, and tooling, with advanced features like styling, predictive search, filters, and GDPR compliance to showcase Hydrogen’s performance and flexibility