Skip to content
← All projects

Project: E-Commerce Product Personalization

example logo

At a glance:

Website
Petite Keep
Skills
UX, Wireframing, Visual Design, Project Management
Impact
Rendered images of every trunk size and fabric combination
More accurate preview of personalization
Launched site in 2024, doubled sales to $10M (projected for $17M in 2025)
Seamless integration with their 3PL for personalization
Featured on Shark Tank: S16E09. Secured 3 Sharks and $400k in exchange for 15% equity
Prototypes
3D model prototype

I led a project to rebuild Petite Keep’s e-commerce website in order to accurately preview their personalized keepsake trunk to their customers.

Research

When looking through customer service requests and their current site, Petite Keep had found that there were two main blockers for customers when purchasing a higher ticket and personalized item. One, the buying experience was not mobile-friendly. Two, the product and personalization preview were not accurately showing what the customer would purchase.

Plan

Like all e-commerce sites, the approach should always be product-outward. I decided to highlight a few key roadblocks from a design and system lens and tackle those as our key touchpoints.

Execution

First, Petite Keep used a third-party logistics partner (3PL) for years, but they never had a direct integration with the fulfillment system because of the way their products were set up in Shopify. I worked with their 3PL to transmit the final product’s customized line items to their system spec so fulfillment could be automated saving tons of hours for both their 3PL and the Petite Keep team.

Second, the product images were illustrations, not accurately showing the product for purchase. I hired Sean Brooker, who I've worked with on other 3D projects to create a model and system to render static product images for three trunk sizes and 18 fabrics. Having these renders gave us the ability to show customers the exact product they were ordering.

Keepsake trunk illustration

Before (illustration)

Keepsake trunk 3D Render

After (image from 3D render)

Third, with these images in hand, we could also accurately show the embroidery personalizations. Since personalizing a trunk wasn't a required part of the process, but 90% of customers typically added it, I needed to make sure the preview was accurate and quick. With 24 different thread colors, eight different fonts, and two types of embroidery (text and monogram), this was a complicated task.[1]

Keepsake trunk embroidery options

Before (not mobile-friendly)

Keepsake trunk embroidery options

After (mobile first)

In the end, we ended up with a far superior site and personalization experience for customers. Our site helped double sales over the next year and ease operational overhead with their 3PL.

While this project presented a fun and complex challenge, it touched every aspect of the business. I developed systems and documentation to help their team take ownership of all the changes we made together throughout the project.

Keepsake trunk product page

Before

Keepsake trunk product page

After

Personalization Process

[1] Personalizing a product is essentially filling out a form with specific inputs and values, so I created a group of progressively enhanced web components that would show the proper variant image as well as the personalization in place and real-time on the product as the customer typed. This web component also set custom line item properties that would be added to the cart and used by the 3PL for fulfillment.

Other projects: