Overview
Headless commerce is a technological advancement for high-growth merchants. It allows brands total frontend customization while decoupling from the platform, providing flexibility in their technology stack.
Pack Commerce emerged from those merchant frustrations, having built custom commerce solutions for high-profile DTC brands such as Cuts and Vuori. We collaborated with the Pack product team and helped design the ultimate headless platform for Shopify Plus brands.
What We Did
Strategy
Product Strategy
Discovery & User Research
Design QA
Design
User Experience Design
User Interface Design
Visual Web Design
Prototyping & Ideation
Design System
Outcomes & Results
3
Steps to easily connect Pack to Shopify store
40+
Third Party App Integrations
$
6M
Raised Seed Round
100ms
Route to route page speed load time
In The Press
Cory Cummings, CEO at Pack
01
From Agency to SaaS Platform
The Pack platform emerged from its agency heyday, building custom solutions for notable brands. After raising a fresh round of funding, the team was in full growth mode, transforming from a service provider to a SaaS product. Our challenge was to design an accessible platform for marketers, managers, and developers— while transitioning messaging and brand voice from agency partner to tech platform.
We conducted a series of stakeholder interviews to understand merchant pain points across headless offerings in the marketplace. We deduced feature sets that were pragmatic and simplified the product roadmap. We weren't interested in feature parity but the total merchant user experience. We designed a simplified onboarding flow, guiding all users through several steps to complete the signup process. We wanted developers and marketers to get started with Pack quickly and easily.
The main dashboard contains vital storefront information, including revenue numbers, traffic data, conversion rates, and overall site speed. We designed tabbed experiences for each so merchants can view their store data at a moment's glance. The dashboard naturally blended in with the multi-tabbed navigation sidebar that’s fully customizable across multiple storefronts. We ensured that everything was a few clicks away when designing the central hub for Pack.
A common friction point for brands with headless builds is the primitive merchandising experience offered by competitors. Brands were limited with native product bundling and subscription options. We redesigned the merchandising experience so merchants can easily update their product catalog. We simplified the intelligent grouping of products based on a collection of attributes. We made it painless to create product bundles with rich metadata.
With Pack, merchants can quickly build a nearly infinite configuration of product groups and collections. The new platform powers custom frontend experiences for all types of shoppers.
Another common constraint with modern headless builds is the obscure development setup. You have to wrangle together multiple apps just to build a headless site. We stripped down the steps necessary for developers to quickly get started and focus on building the most performant storefront possible. Developers can plug into Git with custom API keys and start building without any opinionated workflows. They also have quick access to all deploys and status logs, providing a master view of all the storefront builds.
Working with the Pack product team was incredibly helpful as they provided a hands-on developers experience, along with its set of pain points for us to solve. The new developer experience is easier to navigate, opinion free, and, most importantly, easy to jump in and build.
02
All New Site Customizer
Many WYSWYG customizer tools for headless offer barebones solutions. Our team rethought the site customizer experience from the ground up. How can we design an experience allowing marketers to quickly spin landing pages and AB test new products? How do we pack features for operators to create unique brand experiences without needing a developer?
The new site customizer has feature-rich capabilities centered around the sidebar UI. It's expansive and slides out, showing a full preview of the site, allowing for real-time editing. Each component is designed for flexibility and is easily accessible across a growing UI library. These include banner image slideshows, product carousels, video modules, and rich text editing. Merchants can modify each page using these components, further extending the capabilities of the Pack platform.
We designed a large batch of custom components built into the site customizer for total front-end flexibility. Merchants can easily choose a component and modify their storefront's look, feel, and functionality.
03
Platform Access On The Go
Rather than distilling the platform into a mobile-specific experience, we prioritized features and experiences useful for merchants who work on the fly. We ensured that Pack was easily accessible for merchants on the go, having the ability to make store updates and merchandising products from their mobile devices. The navigation is easy to maneuver and access with a few finger taps.
04
A Global Design System
The Pack product was getting bigger and more complex, but the designs didn’t scale with it, so we worked on solving that. We designed a custom iconography library and a fresh new color scheme, including bold lifestyle assets and a new set of UI components. Each component was carefully considered for its use case and feature parity, flexibility, and extensibility across the platform. Ultimately, the global UI kit needed to be cohesive and extend across all touch points in the future.
