Global

Page-1

Page-2

Page-3

Header

Footer

Aligning Dealer & Customer Needs

To Drive eCommerce GMV Growth

COMPANY

Chipply

MODEL

B2B

ROLE

Product Designer

DEVICE

Desktop, Mobile

TECH STACK

Figma, Figma Make, Lovable, Jira

Introduction

Founded in 2010, Chipply is an Enterprise Resource Planning (ERP) software for apparel decorators and dealers. These businesses use our platform to launch eCommerce stores, manage orders, coordinate production, and fulfill shipments for their customers.

As a product designer on a team of (2), I've been able to take significant ownership over projects, often within design-led initiatives. Designing systems that are set up to evolve has been critical as we build end-to-end features. I've really enjoyed the complex workflows and high level of systems thinking required, especially as I navigate information-dense features.

As a product designer on a team of (2), I’ve been able to take significant ownership over projects, often within design-led initiatives. Designing systems that are set up to evolve has been critical as we build end-to-end features. I’ve really enjoyed the complex workflows and high level of systems thinking required, especially as I navigate information-dense features.

The Ecosystem

Apparel Dealer

A company that sells decorated apparel

Pacific Sportswear

Promo Outfitters

Organization

An entity that needs decorated apparel

Football Team

Tech Company

eCom Customer

A shopper who buys decorated apparel

Football Dad

New Employee

Capitalizing on eCommerce Revenue Opportunities

Chipply collects a percentage of the Gross Merchandise Value (GMV) of eCom stores run on our platform. In other words, more purchases across more dealer stores = more Chipply revenue.

Despite representing the sole revenue source, our eCom stores were outdated and full of friction for shoppers. Similarly, the store builder for dealers lacked customization and branding.

Our design team spearheaded an initiative to drive eCom growth through the shopping experience and dealer store builder.

Improved Shopping
Experience

Browsing

Conversion

Configurable
Store Builder

Organizations

Stores

GMV

Revenue

Identifying Friction in the Shopping Experience

To locate problem areas, we conducted a somewhat scrappy research project of analyzing session recordings from eCom customers. This research was critical to convincing stakeholders to invest engineering resources in the project, as it clearly demonstrated how our poor shopping experience was leaving GMV on the table.

What obstacles in the eCom experience are limiting shopping and constraining GMV performance?

We found that, despite accounting for the majority of users, the mobile bounce rate was 2x greater than on desktop. This signaled that our desktop-first eCommerce experience was not serving our users, who predominantly shop on mobile.

68.7%

mobile users vs 30.7% desktop

2x

bounce rate on mobile vs desktop

Supporting this shift to mobile-first, we were able to determine problem areas for quick wins across the shopping journey.

1 Discovery

How users intentionally, or unintentionally, find products of interest.

2 Selection

How users evaluate items to determine whether to add them to their cart.

3 Conversion

How users place an order, turning interest into a transaction.

Dealer Configurability Unlocks New Markets

Our annual survey found that a primary need for dealers was increased customization on eCom stores. Before launching into a solution, we decided to dig into our user groups to find the root cause of this need. We looped this into an ongoing user persona initiative, and interviewed Sales, Marketing, and customers to analyze key players in Chipply ecosystem.

What factors are driving the demand for store customization, and what new opportunities could a store builder unlock?

We found that our dealers can be categorized as Team Dealers or Promotional Distributors. Team Dealers serve high schools and leagues, and need to set up tons of quick, simple stores every season. On the contrary, Promo Distributors face a competitive market among corporate clients.

Securing big organizational contracts requires customized, differentiated store experiences. In other words, while a salesperson for a team dealer may set up 10 identical stores a day, the equivalent position for a promo distributor likely spends several weeks customizing a store to secure a brand deal.

Importantly, Chipply is expanding into these high-GMV promo spaces, which is why the need for customization has been so loud.

Team Dealer

ORGANIZATION

Schools, Teams, & Local Programs

BUSINESS MODEL

Customers per store

Stores

STORE CHARACTERISTICS

Short, seasonal
Modest branding
Required and standard products

Promo Distributor

ORGANIZATION

Large Corporations & Groups

BUSINESS MODEL

Customers per store

Stores

STORE CHARACTERISTICS

Long-running
Strong brand identity
Product deals and special collections

Based on this user research and analyzing other site builders, we identified 3 key areas for configurability:

Promotional Content

Differentiated Product Displays

Differentiated
Displays

Branding & Imagery

Designing for Modularity

As we approached these goals, we needed to hold two truths: promotional dealers want to spend weeks on a store, while team dealers want to spend 2-minutes.

How can we provide deep configurability, without limiting efficiency?

At first, we thought in templates ("how cool if we had 'Sporty', 'Modern,' etc. stores). But, we soon realized we needed to refocus on the primitives and then build our way up to templates. Starting top-down would only result in limitations, as users couldn't untangle their preset template.

At first, we thought in templates (“how cool if we had ‘Sporty’, ‘Modern,’ etc. stores). But, we soon realized we needed to refocus on the primitives and then build our way up to templates. Starting top-down would only result in limitations, as users couldn’t untangle their preset template.

By first identifying the primitives for each area, we could work from the bottom-up. The resulting modular system can yield almost endless combinations, and is very well set up to accomodate more configurations in the future.

Top-Down

Templates

Options

Bottom-Up

Combinations

Primitives

While referencing other site builders was helpful, we have particular restraints in that most of our dealers don't want to be designers, they just want things to "look good." We needed to package deep configurability within a foolproof system with guardrails for styles and accessibility standards.

While referencing other site builders was helpful, we have particular restraints in that most of our dealers don’t want to be designers, they just want things to “look good.” We needed to package deep configurability within a foolproof system with guardrails for styles and accessibility standards.

We traced down to the primitives across Styles, Product Layouts, and a new Landing Page. Styles v1 includes a color theme and accent color. Users can combine default, spotlighted, or boosted layouts to create unique product lists. The new landing page has modules like suggested, featured, and banners.

With the primitives defined, the exercise became one of hierarchy and information architecture. Our central goal was to create a system that is set up to grow as the feature expands in the future.

Version 1
Using accordions for area settings overwhelm the user and require lots of scrolling. Most importantly, this layout cannot well accomodate more settings as we expand the feature.
Version 2
Using a double-pane for the editor relieves the spatial burden and gives ample real estate for future settings. However, separating each page into tabs makes the site architecture confusing and again does not set us up well to add more pages in the future.
Version 3
Using a simple two-tab architecture with Global and Pages maximizes the space. Within pages, using a tree layout educates the user on the layout of the pages themselves. Both panels have ample space for future configurations. Simple at present and ready to grow!
Version 1
Using accordions for area settings overwhelm the user and require lots of scrolling. Most importantly, this layout cannot well accomodate more settings as we expand the feature.
Version 2
Using a double-pane for the editor relieves the spatial burden and gives ample real estate for future settings. However, separating each page into tabs makes the site architecture confusing and again does not set us up well to add more pages in the future.
Version 3
Using a simple two-tab architecture with Global and Pages maximizes the space. Within pages, using a tree layout educates the user on the layout of the pages themselves. Both panels have ample space for future configurations. Simple at present and ready to grow!
Version 1
Using accordions for area settings overwhelm the user and require lots of scrolling. Most importantly, this layout cannot well accomodate more settings as we expand the feature.
Version 2
Using a double-pane for the editor relieves the spatial burden and gives ample real estate for future settings. However, separating each page into tabs makes the site architecture confusing and again does not set us up well to add more pages in the future.
Version 3
Using a simple two-tab architecture with Global and Pages maximizes the space. Within pages, using a tree layout educates the user on the layout of the pages themselves. Both panels have ample space for future configurations. Simple at present and ready to grow!
Version 1
Using accordions for area settings overwhelm the user and require lots of scrolling. Most importantly, this layout cannot well accomodate more settings as we expand the feature.
Version 2
Using a double-pane for the editor relieves the spatial burden and gives ample real estate for future settings. However, separating each page into tabs makes the site architecture confusing and again does not set us up well to add more pages in the future.
Version 3
Using a simple two-tab architecture with Global and Pages maximizes the space. Within pages, using a tree layout educates the user on the layout of the pages themselves. Both panels have ample space for future configurations. Simple at present and ready to grow!

Quick Wins from Discovery to Conversion

With limited engineering scope for this project, we highlighted targeted improvements to the shopping journey based on our session recordings. Rather than reinventing the wheel, we relied heavily on research into top eCom sites, like Shop and major retailers.

1.
Discovery
Current
LISTING PAGE
See More, Buy More
LISTING PAGE
WELCOME DIALOG
LANDING PAGE
2.
Selection
Current
PRODUCT DETAILS PAGE
Above-the-Fold Editors
PRODUCT DETAILS PAGE
3.
Conversion
Current
PRODUCT DETAILS PAGE
Efficient Fields
PRODUCT DETAILS PAGE
1.
Discovery
Current
LISTING PAGE
See More, Buy More
LISTING PAGE
WELCOME DIALOG
LANDING PAGE
2.
Selection
Current
PRODUCT DETAILS PAGE
Above-the-Fold Editors
PRODUCT DETAILS PAGE
3.
Conversion
Current
PRODUCT DETAILS PAGE
Efficient Fields
PRODUCT DETAILS PAGE
1.
Discovery
Current
LISTING PAGE
See More, Buy More
LISTING PAGE
WELCOME DIALOG
LANDING PAGE
2.
Selection
Current
PRODUCT DETAILS PAGE
Above-the-Fold Editors
PRODUCT DETAILS PAGE
3.
Conversion
Current
PRODUCT DETAILS PAGE
Efficient Fields
PRODUCT DETAILS PAGE
1.
Discovery
Current
LISTING PAGE
See More, Buy More
LISTING PAGE
WELCOME DIALOG
LANDING PAGE
2.
Selection
Current
PRODUCT DETAILS PAGE
Above-the-Fold Editors
PRODUCT DETAILS PAGE
3.
Conversion
Current
PRODUCT DETAILS PAGE
Efficient Fields
PRODUCT DETAILS PAGE