Resale Shopify Theme

CHALLENGE

Transforming a design system into a configurable Shopify template.

ROLE

Lead designer, collaborated w/ 2 PMs, a scrum team of 9 engineers

shopify theme cover (1)

What is branded recommerce?

Trove provides white-label technology to power the secondhand resale program for brands such as Patagonia, REI, lululemon and Arc’teryx.

We manage the brand’s trade-in program and their resale site. Despite being entirely powered by us, it's essential that the resale site feels seamless to the brand’s mainline site experience. This instills trust in the shopper, because they know their purchases is backed by the brand itself.

recom branding (1)

Problem

Due to the high UI customization needed to achieve this level of branding, we’ve been building custom resale sites for each brand partner.

This was extremely expensive to maintain and required a lot of engineering and design time to build - approx. 34 engineer weeks and 4 design weeks per launch. This made it hard to launch programs quickly, which ultimately impeded us from scaling our business.

Solution

Finally in 2022, we decided to replatform to Shopify. This would allow us to build a single site theme that can be applied to multiple stores in a much scalable way.

shopify theme

My role

I was responsible for designing the resale site theme that would serve as the base template for all our partner’s resale sites. I also designed the full set of UI configurations that would allow a non-engineer user to apply a brand’s styling to the base theme via a visual editor.

resale template

Base site template

config settings

Full set of UI configurations

Achieve the same level of “branded-ness” with a fraction of the customizations

The biggest challenge of this project is drawing the right balance of having enough flexibility for the theme template to adapt to every brand, without creating a million configurations that would be impossible to manage by the site managers.

By this point, I’ve helped a fair share of brands to launch their recommerce sites to have a good grasp of what UI elements are the most important to make a site feel “branded”. The approach is to focus on making the highest impact elements configurable and deprioritize the rest (80/20 rule).

ui element prioritization

Spreadsheet prioritizing the most important UI configurations

product tile config

Example configurations for a “high impact” element - the product tile

Impact

One base theme → endless branding: this project enabled a non-engineer user to achieve the same level of site branding that used to take hundreds of hours of engineering time to build.

💡 For the business:

  • Shortened program launch timeline by 43%
  • Reduced engineering capital cost per launch by 66%
  • Key effort for our business’s scalability

🖌️ For the design team:

  • No more full site figmas per brand partner
  • Significant time saved from onboarding-related design work and less styling update work post-launch
  • More time available to focus on core resale UX initiatives!

Made by Katie • 2024