Checkout & Accounts Editor
Checkout & Accounts Editor
Checkout & Accounts Editor
Shopify
Shopify
Shopify
Product Designer
Product Designer
Product Designer
Customer Accounts - Merchant Experience
Customer Accounts - Merchant XP
Customer Accounts - Merchant Experience
TL;DR
The launch of the new customer accounts and the extensibility program created an urgent need; allow merchants to preview and customize their buyer's platform.
The only way to do that was via the Checkout editor, which had a rigid and poor user experience, and ultimately, was not built for scale.
The launch of the new customer accounts and the extensibility program created an urgent need; allow merchants to preview and customize their buyer's platform.
The only way to do that was via the Checkout editor, which had a rigid and poor user experience, and ultimately, was not built for scale.
PROBLEM
Improve the existing limited editor experience for merchants when customizing their checkout
Improve the existing limited editor experience for merchants when customizing their checkout
Allow merchants to preview Customer Account pages in the editor
Allow merchants to preview Customer Account pages in the editor
Empower merchants and developers by creating an environment that allow experts to design beautiful and fully integrated apps for merchant's customer accounts
Empower merchants and developers by creating an environment that allow experts to design beautiful and fully integrated apps for merchant's customer accounts
SOLUTION
Revamped the editor UI by creating the apps tabs, direct extension placement and a self-guided experience
Revamped the editor UI by creating the apps tabs, direct extension placement and a self-guided experience
Enabled Customer Accounts pages to be 'previewable' in the Checkout editor. Later we renamed it to "Checkout & Accounts editor"
Enabled Customer Accounts pages to be 'previewable' in the Checkout editor. Later we renamed it to "Checkout & Accounts editor"
Designed the extensibility framework with best practices and native integration
Designed the extensibility framework with best practices and native integration
PROJECT OVERVIEW
Early 2023 we launched the New Customer Accounts, and this alone was the biggest milestone of our mission. However, merchants didn't have a way to preview and edit their customer account pages in the editor.
Later that year we launched the extensibility program, so app developers would be able to design fully functional apps to extend customer accounts capabilities…
…and the Dev Community went crazy with the announcement of the extensibility program
Early 2023 we launched the New Customer Accounts, and this alone was the biggest milestone of our mission. However, merchants didn't have a way to preview and edit their customer account pages in the editor.
Later that year we launched the extensibility program, so app developers would be able to design fully functional apps to extend customer accounts capabilities…
…and the Dev Community went crazy with the announcement of the extensibility program
MY ROLE
I led the ideation and execution of the unified apps tab, centralizing the discovery and management of app blocks. Additionally, we integrated the active inspector from the theme editor, allowing direct manipulation of app blocks in the preview.
Finally, I worked to establish extensibility guidelines and UI components that ensure a native, branded experience for all future app integrations with customer accounts directly from the editor.
I led the ideation and execution of the unified apps tab, centralizing the discovery and management of app blocks. Additionally, we integrated the active inspector from the theme editor, allowing direct manipulation of app blocks in the preview.
Finally, I worked to establish extensibility guidelines and UI components that ensure a native, branded experience for all future app integrations with customer accounts directly from the editor.
Design Strategy & Vision
Defined the core UX principles and workflows for managing app extensions
Design Strategy & Vision
Defined the core UX principles and workflows for managing app extensions
End-to-End Design Leadership
Led the creation of the editor's UI, from initial flows and patterns to the final shipped product
End-to-End Design Leadership
Led the creation of the editor's UI, from initial flows and patterns to the final shipped product
Cross-team Collaboration
Partnered closely with the Checkout team, to ensure a scalable, consistent foundation for both surfaces
Cross-team Collaboration
Partnered closely with the Checkout team, to ensure a scalable, consistent foundation for both surfaces
SOLUTION
I designed a user experience focused on simplicity, and a powerful tool that is future-proof and scalable.
I designed a user experience focused on simplicity, and a powerful tool that is future-proof and scalable.
Streamlined & Intuitive
Unified Apps Hub: I've designed a new Apps tab with "All" and "Added" views, allowing merchants to easily discover, search, and manage all their app blocks from a single, central location.
Direct Placement
Visual Drag-&-Drop
Streamlined & Intuitive
Unified Apps Hub: I've designed a new Apps tab with "All" and "Added" views, allowing merchants to easily discover, search, and manage all their app blocks from a single, central location.
Direct Placement
Visual Drag-&-Drop
Streamlined & Intuitive
Unified Apps Hub: I've designed a new Apps tab with "All" and "Added" views, allowing merchants to easily discover, search, and manage all their app blocks from a single, central location.
Direct Placement
Visual Drag-&-Drop
Developer Friendly
Provided developers with clear extensibility guidelines and a preview framework, enabling them to design, test, and build higher-quality, more reliable apps before launch.
Native UI Component Library
Default Placement Framework
Developer Friendly
Provided developers with clear extensibility guidelines and a preview framework, enabling them to design, test, and build higher-quality, more reliable apps before launch.
Native UI Component Library
Default Placement Framework
Developer Friendly
Provided developers with clear extensibility guidelines and a preview framework, enabling them to design, test, and build higher-quality, more reliable apps before launch.
Native UI Component Library
Default Placement Framework
RESULT & IMPACT
The new editor became the catalyst for a thriving ecosystem, directly contributing to platform growth and merchant success.
The new editor became the catalyst for a thriving ecosystem, directly contributing to platform growth and merchant success.
40
Carefully curated and available at GA launch
40
Carefully curated and available at GA launch
40
Carefully curated and available at GA launch
+50
UI Components
+50
UI Components
+50
UI Components
