Jewelry Tray Direct
Project
Product Configurator
Role
Product Designer
Areas
UX, Design
Project Overview
Refreshed configurator designs to enable new product launch
Jewelry Tray Direct is a leading provider of drawer inserts for both consumer as well as business customers. As part of a recent capability expansion, they are now offering fully custom-made products to the market. As such, JTD required a product configurator to be added to their existing e-commerce site.
Problem
Since its inception, Jewelry Tray Direct has carved out a niche business market, selling drawer inserts for use across a wide range of applications, from homes to display cases at jewelry stores. However, their custom solution market was lagging as they did not have a way of allowing their customers to build their own custom layouts without direct contact with the organization’s sales team. As such, they required a technical solution to be developed on their existing ecommerce site to solve this issue.
Solution
After a comprehensive look at the competitor market, it was decided that JTD required a full product configurator to be built on their existing site. This would allow new and existing customers to build their own drawer inserts and streamline JTD’s e-commerce process.
My Role / Responsibilities
As the Design Lead on this project at Wonderful Collective, I was tasked with all research, wireframing, design system development and design executions. I also worked directly with the developer at handoff and stood alongside the technical team through the QA and launch process.
Research
Simplification & consolidation of the user experience
Initial research of the market found many comparable configurators which were poorly designed and lacked a simple approach to the UX. Additionally, it was concluded that a mobile first design approach would be utilized.
1 / Competitor Analysis
After examining a range of product customizers that currently exist in the market, it was found that almost all within this niche area were poorly designed. Functionally, they did not allow for easy editing of sizing and often broke when trying to go backwards to edit these fields. Additionally, the UX was very disorganized and the screen elements were laid out in a way that made building anything on mobile almost impossible.
2 / Functionality Mapping
Before diving into initial wireframing or design, a rough sketch of the configurator’s base functionality was created. The goal of this stage was to explore what specific features were of critical success to a user, thus making sure those elements were prioritized and well organized on the screen.
3 / Error States & Edge Cases
Alongside understanding the base functionality of the product, a comprehensive list of error states and edge cases was created to ensure that the designs would accomodate all users and desired configurations. Through this process, the team gained a strong understanding of particular bottlenecks that may arise and were able to craft solutions/ideas prior to executing the designs.
1 / Competitor Analysis
2 / Functionality Mapping
3 / Error States & Edge Cases
Design
Considered designs that diminish pain points & empower user success
The final designs blend considered UX thinking alongside a comprehensive Figma component library, empowering the client to succeed now as well as far into the future.
4 / Wireframing & Dev Notes
Alongside building wireframes which reflect all the common and edge case UX flows, the designs were carefully tagged with development notes. These would ensure that the design phase would reflect particular functionalities and make the pass to the dev team much more seamless.
5 / Figma Component Library
A full component library was created which contained all necessary screen elements and their variant states as a user would move through the product. These components were tested for accessibility compliance and considered at a variety of screen sizes / devices, ensuring success for all user types.
6 / Final Designs
The final designs were constructed with a strong focus on the research and attempting to build the easiest possible product customizer for users. Many configurations and layouts were explored, with the final designs laying out the strongest assortment of design elements. These final versions were brought through comprehensive internal tests to ensure they worked across a range of cases and accomplished all the goals laid out in the initial client kickoff.
