STEP #1: CHALLENGE
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.
STEP #2: ATTENTION INSIGHTS
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:
In this AI attention heatmap generated by Attention Insight, we can see that the heading 15% OFF! NOV 1st to 7th ONLY and the subheading Healing and Amusing Editions combined together grab the most attention in this design. The second most attention (23.2%) is allocated to the heading informing about the ongoing sale with a 15% discount. The subheading at the bottom announces two new editions (10% of attention). Both of these are targeted to returning customers or at least well-informed leads.
In order to improve conversions for colder audiences, they should change the heading to declare a unique selling proposition that is relevant to such audiences. Also, leaving only one text block instead of two separated text blocks would concentrate the attention more effectively. They could reinforce the highlight on the heading with a lot of whitespace around it.
The first insight: focus attention on one heading with a value proposition for new users.
The individual object that receives the most attention (~24%) is the product packaging image which shows only the product name and the edition title. 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 replaced with an image that gives a sneak peek into the actual use of the product.
The second insight: show the product in use.
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.
The third insight: decrease the prominence of the logo.
Regarding the Shop Now button, they placed it on a different side than the heading and subheading. Such an arrangement breaks the attention flow, and it’s harder to notice this button. As we can see, it receives only 1.3%, which is well below the 4% average for the CTA buttons on landing pages.
We could bring the CTA button closer to the heading to improve the attention flow and make it less fragmented. Naturally, the gaze would drift from the heading to the CTA button, placed in close proximity to it, and thus quite a significant amount of attention would transfer to the button.
The fourth insight: bring the CTA button closer to the heading to maintain continuous attention flow.
Additionally, the design looks a bit dated, and there is a lot of unused whitespace on the sides that could be utilized.
STEP #3: RESULTS
Having all this in mind, a few iterations later, they came up with a redesign:
The first insight: 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 insight: the second most prominent object is the image of the product in actual use, with 27.8% of the attention drifting to it. Now people 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 third insight: smaller and more subtle logo now receives 2.7 times less attention. That frees up some additional attention to be focused on other design objects.
The fourth insight: 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
