Create Your First Project

Start adding your projects to your portfolio. Click on "Manage Projects" to get started

.pro-gallery-wix-wrapper {display: block !important;} .pro-gallery-wix-wrapper .gallery-item-container {opacity: 1 !important; display: block !important;}

Bead Board D2C PDP Redesign

Project type

UX/UI Design, E-Commerce

Date

April 2023

As a passionate beading enthusiast, I reached out to Bead Board Envy after struggling to customize and purchase their otherwise excellent product—a tray with bumpers and a felt surface that keeps beads from rolling off the workspace. I was hired to redesign the mobile e-commerce interface, with a focus on simplifying the user journey, clarifying product options, and improving visual hierarchy. I conducted a UX audit, created mid-fidelity wireframes and Figma prototypes, and delivered annotated designs for developer handoff. While the final implementation differs slightly from my original mockups, the result is a significantly more user-friendly site that transforms a confusing experience into one that better reflects the quality and charm of the product.

Mobile Med-Fi Mock-Up

This grayscale mid-fidelity Figma prototype represents my ground-up redesign of the product customization flow. I replaced multiple redundant product listings—each with confusing variant combinations—with a single, consolidated product page featuring a streamlined and highly customizable interface. Key options were grouped into clearly labeled, visually distinct sections to guide users step-by-step through the selection process. I introduced a size dropdown that dynamically adjusted the base price, organized fabric options into a thumbnail grid for easy scanning, and added swatches for work surface color. Stackable radio buttons allowed users to intuitively toggle add-ons like drawers, wells, and magnets. To reduce cognitive load, I moved detailed product copy well below the fold and recommended a "You Might Also Like" section above the footer to support conversion goals. The result was a cleaner, more engaging interface that better highlighted the product’s quality, charm, and customizability—making it easier (and more fun) to shop this niche offering.

Ecom Store Before Screenshots

Some screenshots of the original interface. The product page wasn't clearly navigable from the home page, there were too many options laid out in an unorganized way, and it was difficult to see the options.

Lo-Fi Wireframe

My initial wireframe for the customizable product. Ended up designing mobile-first and stacking the components.

.pro-gallery-wix-wrapper {display: block !important;} .pro-gallery-wix-wrapper .gallery-item-container {opacity: 1 !important; display: block !important;}

Create Your First Project

Bead Board D2C PDP Redesign

Project type

Date

Let's Design Together!