A redesigned, responsive e-commerce experience that enables family and friends to transform children's artwork into sterling silver jewelry.
UX, UI, jQuery prototype
OBJECTIVE

Increase revenue and improve mobile conversion with a redesigned mobile first e-commerce experience.

BACKGROUND

Kidz Can Design is a service which creates sterling silver jewelry created from artwork sent digitally or by mail. The primary audience is mothers and grandmothers with the goal of creating sentimental gifts.

KCD's primary goal was to increase revenue through two efforts: improve purchase completion rates (which suffered from drop-off mid-funnel as well as very high mobile SEO traffic bounce rates) and testing pricing optimization.

The new experience was redesigned from the ground up - mobile first and customer first. We revisited the entire flow to simplify choices, consolidate and remove excess, and implement a consistent site style. These improvements increased conversion, significantly lowered drop-off and bounce rates, and boosted revenue.

I built an interactive prototype which contrasts both the new and old experiences across each device breakpoint (desktop, tablet, and mobile). Try it out:

Open Prototype
PROCESS

After a kickoff meeting to define our targetted goals, I took a bird's eye view of the entire site to better understand why it was performing poorly. Each page was visually dense and made decision making overly complicated. It also used a preconfigured desktop template which scaled poorly on mobile and likely contributed to the conversion issues.

Based on this overview, I developed some key opportunities:

  • Make choices clear and intentional
  • Make product offering more approachable
  • More efficient flow: less steps, taps
  • Simplify styling to better focus on content

Starting mobile first, I mapped out low fidelity wireframes of the new experience. Below, I describe in greater detail the decisions made at critical points in the funnel: the homepage, choosing a style, customizing your jewelry, and checkout.

A more inviting and actionable homepage
The old homepage is comprised of graphic tiles, using a lot of valuable space to "tell" and requiring the user to read (in a variety of fonts and colors) to understand. Additionally, because everything is a graphic, it's unclear what's clickable. Surprisingly, only the large pink "click here" button works! On mobile, this primary call to action is cut off by the fold and is below the fold on tablets.

The new homepage has a much clearer entrypoint to get started and simplifies the layout and styling for easier comprehension. Below the header, a set of tiles show the product offering, provinding clear pricing and another opportunity into the funnel.

Before || After
Making choices clearer
With 10 product offerings, evaluating all options effectively was laborious, particularly since many had conceptual overlap. The differences between a pendant, traditional, or nameplate necklace were difficult to parse.

Even worse, the same product information was repeated across each option making finding the differences even harder. This led to the previous experience being over 8600 pixels tall on mobile - about 14 page scrolls!

Explorations of layout and interaction models. We decided tiles had the best balance of actionability and space conservation.

In the redesign, we simplified the initial product offering to five distinct options. Instead of asking users to compare 10 jewelry choices, we simplified the proposition to "Where do you want to wear this jewelry?" After deciding, configurations (such as pendant vs. traditional necklace) were made available on the product pages themselves.

Additionally, we simplified the repeated product details to three key points as global messaging at the top of the page.

A better product page
The previous experience had customization options scattered across the product page, artwork upload page, and checkout. Worse yet, options were not grouped clearly which can result in user confusion and missed opportunities to increase the overall jewelry price.

The new experience consolidates all customizations onto the product page with clear separations between grouped options. It also incorporates different examples of the jewelry on the page to increase user investment.

Before || After
Better conversion with a more efficient checkout
The previous 5-6 step checkout began with an account roadblock. After confirming with KCD that over 95% of purchases were new guests, we removed the friction of account creation and made this optional step clearer later in the flow.

The checkout also used an accordion model, which pushed content further down on the page with each subsequent step. The overall length also likely contributed to conversion dropoff.

The new mobile-first checkout pared down the requirements to only the essential steps across three pages. We made smart edits such as removing Fax and Company fields since we know these are personal purchases. The value of entering your email is now more clearly stated (order updates) with an explicit option to create an account to save shipping/billing info.

Try it for yourself
Experience both new and old sites across all device breakpoints:
Open Prototype
Let's work together
Contact Me