We'll redesign any section of your website to be optimized for conversion. Get a quote
Back

Homepage

1. Announcement bars should only be used to show actionable offers

Consider updating the announcement bar to link to a sign up form for users to get launch notifications or pre-orders. I would also include an updated CTA, for example, "New iPad Pro & iPad Skins Available Soon! Pre-order Now" or "Sign Up for Notifications."

Otherwise, I would remove the announcement bar.

Best Practices

An announcement bar can take up 5 to 7% of the very valuable real estate above the fold. A two-line bar might take up more.

Announcement bars should be used for actionable announcements. Almost always, this means an offer.

When using an announcement bar, make sure it links to the offer. Either a way to automatically apply a coupon, or a link to a sale product or category. If there's no offer, there's no reason to include an announcement bar on every page.

Free shipping isn't a unique USP for most brands anymore—people expect it. It also doesn't change anyone's interest in the products on sale when first arriving at a site.

Effort: Low

Impact: Low

2. Place the button to open the main navigation menu on the right side of the screen
Best Practices

Since 85–90% of people are right-handed, it's better to place the button to open a site's main navigation on the right hand side where it is more easily accessible.

Effort: Very Low

Impact: Low

3. Ensure your value proposition is above the fold on mobile

The header text "Now it's Personal" is catchy but lacks specificity regarding the products GelaSkins offers. Potential customers are more likely to bounce if they don't immediately understand what a store is selling—even if they're in the market for what you're offering.

Consider changing "Now it's Personal" to something more clear like, "Make your tech yours with custom art cases and skins."

Best Practices

Users need to be given a clear and compelling reason to engage with your site as soon as possible. It's not that people don't know that they need to scroll to see more—it's that they need a reason to do so. By placing your value proposition above the fold on mobile, you can grab users' attention right from the start and entice them to explore further.

Effort: Low

Impact: High

4. Lead with a clear and concise value proposition

Consider updating the subheader slightly to be more clearly benefits-focused. For example, "Say bon voyage to boring black boxes. Personalize your tech with your favorite art and make your devices stand out."

This makes the benefit (personalization and unique design) just a bit more clear.

Best Practices

Your value proposition is the "hook" that draws visitors in. It should be a simple one- or two-liner that tells people exactly what you offer and why it's worth their time. When people land on your homepage, they should be able to grasp the unique value you provide within 5 seconds. A good value proposition gives them a reason to explore further.

Your homepage value proposition will depend on the type of store you run. For example, if you have a small number of products, your homepage value proposition might be more product-focused. If you have a wide range of products, your homepage value proposition might be more company- or brand-focused.

Regardless, keep these guidelines in mind when crafting a value proposition.

Focus on clarity before creativity

Above all, you must ensure your value proposition is clear. Easier said than done, since a value proposition needs to answer many questions—

  • What product are you selling?

  • Who should buy your product?

  • How will buying your product improve the visitor or their life?

  • Why should the visitor buy from you and not your competitors?

  • When will the value be delivered?

Understand your customer and their voice

The language you use plays a big role in shaping the perspective of people who end up on your site. Your visitors should see themselves in your value proposition. A good strategy is to use the exact words of your current customers to hook your future customers—look to any existing reviews or testimonials for inspiration.

Emphasize specific benefits, not vague hype

If you've walked down a single block in New York City, you've seen dozens of stores claim to have the "World's Best Coffee." Every sign you encounter makes it a little more difficult to believe the previous one.

Hype, which can come in the form of vague superlatives ("best") and exaggerations ("world's best"), can be dangerous that way. Instead, focus on distinct benefits and the concrete value your product delivers.

Effort: Low

Impact: Medium

5. Consider showcasing art collections with a carousel rather than a static image

This image does a good job showcasing the many art styles on offer, but it's a bit challenging to take in—especially on mobile where it feels cramped.

It might be worth experimenting with a carousel that features the available art style collections. Each image could be of a product—e.g. a phone case or laptop skin—with art that exemplifies the collection's style.

I would make the images large to give people enough room to see details in the art, but also always show at least an extra half slide to indicate that there's more content with different art styles to browse.

Effort: Medium

Impact: High

6. Ensure elements fit within the mobile viewport to prevent horizontal scrolling

On mobile, the homepage can scroll slightly to the left and right which can frustrate users and make the site feel cheap.

Adjust the size of any overflowing elements to fit within the viewport.

Effort: Very Low

Impact: Medium

7. Important interactive elements should be designed to stand out and appear interactive

These buttons are good—they look like buttons—but the font size could be larger and/or perhaps more bold to grab attention.

This note applies to buttons across the site.

Best Practices

It's essential for important interactive elements on a website, like buttons and links, to stand out and be clearly recognizable as clickable. When interactive elements are easily identifiable as such, it reduces user frustration and encourages use of the features or engagement with the content you've invested in on behalf of your customers.

Effort: Very Low

Impact: High

8. Use specific, benefit-oriented copy in buttons

"Get Started!" is ok, but does lack specificity. While it may prompt some users to take action, there is room for improvement.

"Upload Your Image" or "Create Your Custom Design" would clarify what the user is about to do and highlight the personalization aspect of the offering, making the action more enticing.

Best Practices

Making button copy more relevant and enticing increases clickthroughs from visitors who find the offer interesting and relevant.

Common button text like "Shop now" or "Try now" is not very specific. It often works well enough though, since the surrounding text and images give enough of an idea about what you'll be trying or shopping on the other side of the link. That said, there's no reason not to improve buttons like these when possible.

For example, a furniture store might switch their "Shop now" button out for "Shop bestsellers", or even "Shop bestselling mid-century furniture" to make it clear what's on offer. In another example, a vitamin company might replace "Try now" with "Try comprehensive gummies" to provide a clear understanding of the product and hint at its benefits.

Effort: Very Low

Impact: Medium

9. Implement a carousel for press logos to conserve space

The current layout of the press logos takes up too much space on mobile for the value they provide.

Adding them to an auto-rotating carousel would conserve space while still letting each image get its time in the sun.

Effort: Low

Impact: Low

10. Use headings as signposts to guide users

Move the heading above the image so users have context on what they're looking at before they get to the image.

Also consider adding more context to the heading itself, for example, Featured Artist: Victo Ngai

Best Practices

Users scan webpages to understand its contents and decide which sections are most likely to be relevant to them. Headings act like signposts to help guide browsers through your site. Therefore, they should indicate what a section is about. Without headings, people don't know what to expect which increases the likelihood they misinterpret the section's contents after a cursory glance or skip over it altogether.

Effort: Very Low

Impact: Medium

11. Consider showcasing more artists and collections

Effort: Very Low

Impact: Medium

12. Integrate benefits from "Our Mission" section into the site for a more compelling message

The "Our Mission" section has some gems, but people are unlikely to read or absorb it as it's currently designed.

Remove this section entirely and instead find a way to weave the benefits in seamlessly across the site, highlighting your unbeatable colors, top artist trust, and 20 years of experience at key points in the site—e.g. above the fold on the hero page and on product pages.

Effort: Medium

Impact: High

13. Switch from carousels to a 2-product wide grid for better collection visibility

The current carousel format for displaying product types requires users to scroll through slides to see what devices are supported. That makes it harder to quickly see all available options and identify intereesting product types.

Switching to a 2-product wide grid layout would allow users to view many more options at a glance, helping them orient themselves around what's offered and navigate quickly.

Effort: Low

Impact: Medium

14. Adjust icon size and update messaging for better impact

These icons are too small, which makes them hard to pick out. Additionally, the "Made in Canada" message is not a strong selling point compared to others that might be more impactful.

Increase the size of the icons to improve visibility and replace "Made in Canada" with a more compelling selling point, like the excellent color fidelity in your printing and 20 years of experience.

After updating this section, you could move it up just below the hero section to give people a quick and clear understanding of GelaSkins' expertise and differentiating qualities.

Effort: Low

Impact: Low

15. Consider swapping this section with the "Create your own!" section above

This section has a stronger design—both the image and the black background/white text area are more engaging.

Effort: Very Low

Impact: Medium

16. Update "Upload a Photo" text to be more clear

Since this section doesn't have the "Create your own!" copy in its image, the headline "Upload A Photo" is a little bit ambiguous.

Updating it to "Create your own—upload a photo!" would be helpful.

Effort: Very Low

Impact: Medium

17. Links to social media accounts should open in a new tab

Effort: Very Low

Impact: Low

Next steps

That's all the notes for this design. Check out the other designs in this section—
12
34567
8
9
1011121314151617Mobile