What’s up, Conversion Rockstars! 

Welcome back to ConversionMail, your backstage pass to the hottest CRO tips and tricks that will make your metrics sing. Let’s get this show on the road! 🎸

High Converting Design Inspiration

CRO Insight

Mobile product page design 101.

When designing your Ecom mobile landing pages, it’s essential to strike a balance between displaying key elements prominently and ensuring a smooth user experience.

Here’s how you can optimize the principles based on the wireframe, while focusing solely on Ecom essentials:

→ Clear Value Proposition: Begin with your 'Value Proposition Featuring Benefit' right at the top, making sure it’s the first thing a user sees, emphasizing the unique value and benefit of your product.

→ Thumb-Friendly Design: Ensure your Call to Action button is large and easily tappable. Place it where users can comfortably reach it, encouraging them to finalize their purchase.

→ Visual Hierarchy for Conversion: Utilize size and color contrasts to make the 'CTA' button stand out, guiding users naturally towards making a purchase.

→ Leverage Social Proof: Display star ratings prominently near the product title to reinforce buying confidence through immediate social validation.

→ Optimized Image Sizing: Utilize 1:1 size ratio images in your product display, as this square format maximizes visibility on mobile screens and allows ample space for additional elements.

→ Thumbnail Previews: Incorporate thumbnails below the main image to indicate more visuals are available. This not only saves space but also invites users to explore the product further through additional images.

→ Trust Signals: Include payment options and security badges visibly, as seen in the wireframe, to reinforce trust and security in the transaction process.

By focusing on these e-commerce-specific tips and maintaining a clean and clear design, you can create a mobile landing page that not only appeals visually but also drives sales and improves the conversion rate

Make Your Call-To-Action Buttons More Clickable

1️⃣ Always use one clear call-to-action

You need to be thinking "direct response".

What is the ONE action you want someone to take?

Use one clear button to avoid confusion and help your audience to take the desired action more effectively.

2️⃣ Communicate the desired action

You need to make sure your button copy explains exactly what happens when users take the next step in your funnel.

Such as signing up, purchasing, or getting more information.

For example, "Contact Us" becomes "Book your discovery call now"

3️⃣ Choose your colours wisely

Colour choice matters.

Select CTA button colours that stand out from your site's background.

You need to stop the scroll.

Contrasting colours can grab attention and encourage click.

Try: #FF9900 #64bc0e

4️⃣ Add a directional cue

Visual elements like arrows, chevrons, emoji's or images can guide users towards the next steps.

Use these both on the end of your call-to-action buttons but also to direct towards the button itself

For example "Add to cart" becomes "Add to cart →"

5️⃣ Anchor with trust and credibility

Reassure your visitors that they can confidently click your button by showcasing trust and credibility principles near your CTA.

Use payment seals, trust badges, guarantees, awards, certifications and more.

6️⃣ Add scrolling call-to-action button on mobile

Incorporate a scrolling CTA button on mobile.

As users scroll down your mobile site, a sticky CTA stays visible, ensuring easy access and increasing the chances of engagement.

Only show when 25% of your page is scrolled.

7️⃣ Place on the right

Leverage the Gutenberg pattern by placing your CTA button on the right side of the page.

This follows the natural reading direction, making your users read your headline and value proposition before deciding to take action.

8️⃣ Anchor with social proof

Display endorsements, customer testimonials, or the number of satisfied customers/users near your CTA button.

This reinforces trust and encourages users to take action, knowing others have had a positive experience.

Another box ticked.

9️⃣ Use full-width buttons on mobile

Opt for full-width CTA buttons on mobile devices to maximize visibility and tap-target size.

This makes it easier for users to interact and engage with your CTA.

Our data consistently shows full-width buttons outperform smaller widths.

🔟 Use the word now

Incorporate a sense of urgency by adding "now" to your CTA text. This encourages users to take immediate action.