Hey Harper.

In 6 months, we restructured, redesigned, and re-developed HeyHarper's e-commerce from the ground up, using Shopify and Storyblok. The results? A 17% increase in Conversation Rate (CVR), a 10% uptake in product views, a 2% increase in the Add to Cart Rate (ACR), and a slight increase in the Average Order Value (AOV), based on the results of a two-week long A/B testing comparing old and new versions.

But it didn't end there: we've built a full-blown game. Yes, it's an actual game on an e-commerce website.

Even though it may sound like a useless gimmick, users who play the game convert 7 times more, add to the cart 10 times as much, and have an AOV 9% higher than those who don't. In addition, the CVR of those who play increased by 17% in the European Union store, 9% in the United States store, and 12% in the United Kingdom, on top of the growth shown above.

All in all, all these buffs in the metrics generated around 3M€ more in revenue for HeyHarper. Now, back to the actual e-commerce.

First, the starting line.

Old Hey Harper was built fully using Shopify and its templates. As the majority of e-commerces are. It posed a problem when more and more apps made the shop heavy, clumsy, and with awful performance.

Increasing someone's experience isn't merely tied to good design and fancy colours, even though we can do that well. Instead, a user's experience depends on many other factors. Performance, reliability, and crash-free sessions would impact the CVR, and with that said, we set up Sentry with a targeted 96% crash-free sessions to ensure observability and prompt action on reported issues.

As a reference, we aim at 99% crash-free sessions in all our projects. Still, in this case, we had to lower it due to the heavy use of Google Tag Manager (GTM), which injects scripts that pop a lot of errors, and the decision to log all 404s as errors so that we know which portion of the users are trying to visit a page that doesn’t exist anymore (valuable for discontinued products). In any case, with all these caveats, 96% is really good.

In addition, the willingness to spend more money in a shop is unquestionably related to its reputation and credibility. To this extent, good design and a well-laid-out structure have a massive impact.

Another high-impacting factor is clarity. Unlike many other experts, we disagree with lots of buttons, lots of links, and pop-over modals that jump up now and then. Instead, we believe (and this is proven by all the metrics shown above) that having clearer, simpler navigation, without many deviation paths, focused on what really matters, and burning all the excesses will draw better results.

With this, we kept navigation and content to a bare minimum and erased all the convolution, having only two gateways to the shop instead of eight.

To pair with the overhauled navigation, we restructured the entire website map, changed the product pages to more prominent imagery, and focused on cross-selling and up-selling while concealing secondary information to reduce noise.

In addition, after extensive research, which we're happy to share a bit below, we've made quite a few changes to reduce cart abandonment and improve the overall experience.

We don't believe trapping clients with accounts will make them buy more. Instead, we are convinced a good experience and a good product will keep clients coming back, regardless of whether they have an account or not. To overcome trust issues, we made delivery times evident off the bat on the product page, as well as the free shipping. In addition, we made all charges clear on the cart instead of forcing customers to go to the checkout to find out.

Speaking of trust, we brought reviews to the top of the product page to emphasise the quality of the products and, naturally, as a by-product, to influence the perception of soon-to-be customers.

A bit of tech.

Technologically speaking, we ditched Shopify themes entirely. Instead, we use Storyblok as the source of truth for marketing content and assembly of all pages while relying on Shopify as the database for product and order management. As shown above, this allowed us to drastically improve Hey Harper's shop performance, including SEO (even though we're not using any SEO plugins or other apps), not to mention the added flexibility for content management, page creation, page editing, and a lot more.

Now, regarding flexibility, all pages are modular, block-based, and adaptable to each specific use case, enabling Hey Harper to mix and match blocks as they see fit.

Mobile.

Needless to say, it was all designed and implemented mobile-first. iOS is by far the most used Operating System, followed closely by Android.

Other fun things.

We introduced “Shop the Look”, a full-blown immersive set that may inspire customers to purchase more than one piece at a time, with the ability to add to the cart quickly.

The "Style by You" section follows the same approach: inspire and convert. But this time, we used featured clients' Instagram posts. On the downside, the images require curation, but on the other side, it is by far the most faithful way of showing the product in use.

We wanted to streamline this entire experience. Instead of forcing customers to stick around for extended minutes, navigating back and forth to see product details and then back to the product list page, we made two key decisions to improve their experience. We implemented swipeable thumbnail images and colour selection from the thumbnail itself.

Some details do more for the user experience than significant changes. Users can now swipe the images within the product thumbnails rather than having to enter a product detail to see all the pictures.

At the same time, we've created a neat interaction that allows users to assess and choose colours without leaving the product lists page. Even though this isn't something new (to show the colours in the thumbnail, we mean), the clean way of doing this is.

Design System.

A design system stands as the cornerstone of the design, providing a solid foundation that shapes and unifies every project's visual and functional aspects. It ensures the website can continue to grow in terms of content and pages without compromising its visual qualities.

It also ensures a cohesive integration of the brand identity itself.