Getting more shoppers to checkout

I was the only UX/UI designer on Create Room's marketing team. Over six months, from December 2020 to June 2021, I reworked the pages of their Shopify storefront and moved the site to a new theme. Homepage drop-off fell from 50–60% to 20–30%, and product pages went from 4.2 seconds to 1.8 seconds to load.

The problem: Shoppers left at every step

Create Room makes craft furniture and sells to customers in the US, UK, and Canada. Their main product, the DreamBox, brought in most of the revenue. The website was slow and crowded, and analytics showed people leaving at every step between the homepage and checkout.

My goal was to get more of those visitors through to a purchase.

I decided what each page and section needed to contain and do, cut the sections that weren't helping, reordered the rest, and built the pages. Our graphic designer created the graphics based on what I asked for, and I edited them as I built.

1. Finding where people dropped off

I started in Google Analytics and Shopify Analytics and mapped the path from the homepage to the product page, cart, and checkout.

In the US, 4.3 million sessions started on the site and 2.8 million of them left from the first page they landed on. About half of those sessions started on the homepage. Of the people who clicked through to a second page, about 40% left from there too, and only around 161,000 had reached the cart by their third page.

The numbers come from this Google Analytics user flow:

Analytics showed me where people were leaving but not why. To fill that in, I watched session recordings and looked at heat maps to see where people hesitated or gave up, and I emailed customers to ask what they were running into.

2. Two problems in the funnel

There was a separate DreamBox detail page that overlapped with the product page. 211,000 sessions started on it, and more passed through it on the way to the product page. It added a click without giving people much they couldn't already get on the product page.

The bigger issue was price. The old product page showed what each style option added (+$200, +$600) but not the price of the DreamBox itself, so many people didn't see a total until the cart. I didn't want anyone hitting sticker shock that late, after they'd already spent time picking a configuration, so showing the price earlier became one of the goals for the redesign.

The detail page comes out of the path, and the price moves from the cart up to the product page.

3. Setting goals

4. Homepage

The homepage got the most traffic, so I started there. I used Cialdini's principles of influence as a checklist for what each section should do, and most of the work came down to three decisions.

Showing the whole catalog

The team debated whether the homepage should sell only the DreamBox or help people browse everything Create Room made. The DreamBox brought in most of the revenue, so there was a real worry that giving other products space would pull attention away from it. I ran the browsing version as an A/B test for about 30 days. DreamBox sales held steady while the rest of the catalog got space on the homepage, so we kept it.

I kept running A/B tests after launch, usually for about 30 days each. At our traffic levels, a lot of them didn't reach a clear result.

Putting real customers up front

A DreamBox is a big purchase, and most people hadn't seen one in person. I gave ratings, reviews, and photos of customers' own craft rooms a prominent spot on the page, as social proof.

Giving people a reason to come back

Most visitors weren't ready to buy on their first visit. The Creator Club let customers earn points for buying, sharing projects, and getting involved in the community, so returning visitors had something on the homepage for them too. I also made room for a free planning guide for designing a craft space, which gives people something useful before asking them to buy (reciprocity, in Cialdini's terms), and a quiz that recommended a DreamBox setup. Both gave people a reason to stay on the site before they were ready to buy.

Homepage drop-off went from 50–60% down to 20–30%.

5. Product page

The product page was the slowest page on the site at about 4.2 seconds, and elements moved around as it loaded. I focused on three things:

• Showing the full price near the top, next to the add-to-cart button
• Keeping the page stable while it loaded, so the button and options stayed where people expected them
• Cutting content so people scrolled less to reach the button

Product page drop-off fell by about 30%, and load time went from 4.2 seconds to 1.8 seconds.

6. Cart

The old cart had a busy background image, unclear sections, and links that sent people back out to other pages. I simplified it so the order, the total, and the checkout button were easy to find, and removed the outbound links. Shipping estimates, the warranty, and the money-back guarantee sit next to the total.

7. Reusable sections

I defined a set of reusable page sections and what each one needed to do, our graphic designer designed how they looked, and I built them into the new theme. The marketing team could put together a new landing page from those sections in a few hours, where it used to take days.

Results: Fewer people leaving at each step

• Homepage drop-off went from 50–60% to 20–30%.
• Product page drop-off fell by about 30%.
• Product pages went from 4.2 seconds to 1.8 seconds to load.
• The theme went from 800+ files to about 500.
• Conversion went from 3.0% in Q4 2020 to 3.7% in Q4 2021, up 23%.

Moving to a better-supported theme, optimizing images, and removing old code made the whole site faster.

Conversion grew steadily through the year, and the pandemic, with a lot of people setting up craft spaces at home, helped too. The drop-off numbers on each redesigned page are the clearest sign of what the redesign itself changed.

Takeaways

• Set a baseline and share results as they come in. I could watch drop-off go down in analytics, but I didn't present it much. Showing those numbers regularly would have made it easier to get buy-in for the next round of changes.
• Agree up front on who makes the call. I reported to two managers who sometimes wanted different things, and a change one team liked would get pushback from the other. Now I'd raise that early and agree on who decides site changes.