Increase revenue and improve mobile conversion with a redesigned mobile first e-commerce experience.
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:
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:
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.
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.
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!
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.
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.
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.