Project: E-Commerce Product Personalization

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.

Before (illustration)

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]

Before (not mobile-friendly)

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.

Before

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.