Return to knowledge base main page

Landing page redesign

The Skin Deep is a brand that created THE AND interactive documentary, THE AND relationship card games, and Honest X card games. Their sales were booming during a 6-month hot streak following their Emmy award-winning documentary. However, they realized that this marketing tactic based on the success of their documentary would soon dry up.

Also, recognizing the suboptimal state of the current unoptimized Shopify Plus site and its potential customer leakage, The Skin Deep team hesitated to allocate additional funds toward marketing. It was necessary to improve the customer experience to continue growing by converting new unaware visitors from ads. So they turned to conversion rate optimization. 

One of the things that were uncovered during the CRO audit was that website visitors who hadn’t seen the ads weren’t converting. No content on the homepage would explain The Skin Deep brand or how their card games are different from the competitors’ products. It’s hard for the colder audience to convert if they can’t understand what the product is about. 

Here’s how it looked:

Old version of The Skin Deep landing page
Heatmap of The Skin Deep old version landing

Most of the attention (~24%) goes to the product packaging, which shows only the product name and the title of the edition. That isn’t very descriptive, and if you don’t know anything about the product, this product image doesn’t convey any interesting info about the product. It could be changed to an image giving a sneak peek into the actual use of the product. 

A comparable amount of attention (23.2%) is allocated to the heading informing about the ongoing sale with a 15% discount. The subheading at the bottom is announcing about two new editions. Both of these are targeted to returning customers or at least well-informed leads. To improve conversions for colder audiences, the heading should be changed to declare a unique selling proposition that is relevant to them. 

Targeting returning customers is further reinforced by the fact that above the average amount of attention (5.7%) is paid to the logo so that visitors who watched the documentary could easily recognize the familiar brand. Such a highlight on the logo might not be necessary when targeting a colder audience. 

Regarding the Shop Now button, it is placed on a different side than the heading and subheading, which breaks the attention flow, and it’s harder to notice it. As we can see, it receives only 1.3%, which is well below the 4% average for the CTA buttons on landing pages. 

The CTA button could be brought closer to the heading to improve the attention flow and make it less fragmented.

Additionally, the design looks a bit dated, and there is a lot of unused whitespace on the sides that could be utilized. 

Having all this in mind, a few iterations later, they came up with a redesign:

New version of The Skin Deep landing page
Heatmap of The Skin Deep new version landing

With an asymmetrical design and increased white space around it, the heading on the left screen side became the main focal point, now receiving 29% of the attention. The text, instead of informing about the sale, now subtly tells how buying the product would benefit them. 

It proposes that this connection card game is not only the best in the world but can also be a great alternative to flowers as a gift. It’s implied that the game is more valuable than flowers since it is more effective at deepening the connection between partners. A first-time visitor now understands the value proposition of the product. 

The second most prominent object is the image of the product in actual use, with 27.8% of the attention drifting to it. People now don’t just see the packaging of the product, but they get a sneak peek at what it would feel like to use it. They get to read one question from the card game from this POV perspective like they were the ones playing the game. It conveys that it’s an engaging question that will spark an interesting conversation, really deepening the connection.

The CTA button now gets more attention as it’s part of a natural attention flow where the visitor’s attention naturally drifts from the heading to the CTA button right below it. It’s more alluring to click it even though it’s a ghost button possessing less visual weight from a graphic design standpoint. 

In the end, these changes resulted in a 93% increase in conversions on desktop and tablet homepages. 

Source: Blue Stout