Calashock Design Diaries: Sales Banners and Special Offer Popups That Work

Ecommerce is a contestant competition, not just against other businesses, but against notifications, calls, and emails, against all of life. You are in constant competition for your customer’s attention. Every second and every detail of your website counts. From banner and popup design to buttons, the Calashock Design Diaries will dissect every detail. With our in-house UX design guru Alexandra Anokhina to guide us, these articles will help you master your ecommerce design. One pixel at a time.

While banners can be bothersome, they remain a prevalent part of our digital world. By understanding your customers’ experiences and the advertising saturation they encounter, you can create more effective and respectful banner strategies.

Composition

When it comes to your website’s landing page or homepage, storytelling plays a crucial role. However, it’s equally important to recognize that each section of your website has its own narrative, akin to an episode in a TV series or a teaser for an upcoming season.

Unveiling Your Offer

Think of your banner as a hero that comes to your customer’s rescue. Identify who or what resolves a specific problem for them. Whether it’s a new packaging solution or winter storage ideas for large items, your banner’s protagonist should be clear.

Creating the Visual Scenario

The visual elements you employ should direct user attention effectively. Human tendency leads us to follow someone else’s line of sight, which you can use to your advantage. Guide users’ focus to distinct elements or encourage them to scroll.

Select an impactful image of the featured object

For instance, if it’s a fabric, consider what aspect matters most to the buyer – texture, material, emotional connection. Steer clear of overly abstract visuals.

Placing an object in context is crucial

Buyers seek more than just physical possession; they want to see purpose. Display products alongside the banner, helping users quickly grasp the overall look and feel – think of the IKEA catalog.

Gif-Banners

Conveying Complexity with Simplicity Gif-banners are ideal for showcasing processes that are challenging to describe through words alone. Remember that videos and audio can distract users, so ensure you maintain control over them. Users should be able to halt videos or audio and switch to static images, especially in cases of poor connectivity.

Effective Promotion Messaging

During discount periods, customers can feel overwhelmed by choices, leading to quick decisions to forego purchases. To combat this, use the banner to clarify your promotion visually or textually. Align the banner with navigation principles to reduce emotional and physical hurdles in finding the right products or categories.

Red Rooser Coffee has a great example of well-composed hero banner and secondary banners

Oka’s hero is vivid, animated and catches attention

Accessibility and Technical Considerations

Maintain consistent branding elements, such as colors, typography, and logos, to establish a unified brand identity across banners and website sections.
Keep text content concise, as banners aim to capture attention swiftly. Integrate whitespace for an organized layout, avoiding clutter and excessive design elements that could distract from the main message.
Focus on a limited number of banners to prevent overwhelming users and diluting the impact of each one.
Ensure banners are searchable by search engines, featuring live text and interactive buttons instead of static images.
Craft responsive designs that adapt to various devices and screen sizes, guaranteeing a consistent user experience.

Craft Sportswear has a great concept for different banners which allows to feel the brand on different levels: exploration, style, technology

Engaging with Different Banner Types

Intervene consciously. Sounds strange, but we need to acknowledge one thing – buying behaviour is changing, and the way we talk to buyers is changing. We are expected to respect personal boundaries and how we communicate with buyers. Remember that we are surrounded by notifications: phone, email, and websites. Scattered attention is the bane of our time, so instead of amplifying that effect, it’s better to stand out by being respectful.

Pop-Up Banner upon Entry

This type of banner, seen first upon entering the site, is common but can lose value if not strategically designed. Typically, it prompts users to subscribe or become loyal customers before exploring the shop. Ensure the banner is relevant by placing it on appropriate pages, such as those featuring discounts or essential information – product detailed pages, product listing pages. Avoid relying on users to remember your message, as closing banners without reading them is commonplace. This oversight can lead to missed opportunities.

Two screenshots from supply.co showing relevant and conversational popups with offers that engage users.

Sticky or Rolled-Up Pop-Up Banner

This solution addresses the challenge of user forgetfulness. However, consider the clutter on the screen, such as cookies, chatbots, and fixed headers. Design the pop-up to stand out while not hindering user interaction, especially on mobile devices.

Great Jones uses this type of banner

Great Jones shows a great example of a sticky banner which expands of collapses depending on customer engagement but stays visible on the screen.

Exit Pop-Up Banner

This banner should be used sparingly and thoughtfully. It should not resemble desperate bargaining. Consider strategies like prompting users to explain why they’re leaving the site, engaging in dialogue, and obtaining valuable feedback. It might not be about price – it might be about something that will give you an opportunity to improve. Have a dialogue, it’s much more valuable, it’s human, and will reduce your guesswork about what went wrong.

Recognize also that users often open multiple tabs and having numerous exit pop-ups can be frustrating. Design with the user’s experience in mind, acknowledging the prevalence of banners in today’s digital landscape.

In summary, sales banners and special offer pop-ups are a common tool in ecommerce. So common that if not executed thoughtfully, they will be more or an annoyance to your customers than an effective conversion tool. Keep in mind your customer’s experience and the saturation of advertising they encounter.

Ensure each banner tells a unique story with a clear protagonist that addresses specific customer needs. Use visual elements to guide user attention and context to make the product relatable. Gif-banners simplify complex processes, but maintain control to prevent distractions.

Maintain branding consistency, keep text concise, and limit the number of banners. Make them searchable and responsive across devices.

Engage with different banner types thoughtfully. Pop-ups upon entry should be relevant, sticky pop-ups should stand out without hindering interaction, and exit pop-ups should initiate meaningful dialogue.

Respect for user boundaries in an increasingly digital world is key. By following these principles and learning from examples, you can create effective banner strategies that enhance user experiences and drive engagement.

How can Calashock help?

Need help designing your banners or popups? Does your store need a redesign? Maybe you need a whole new website built from the ground up? We have over 14 years of experience designing and building beautiful and intuitive ecommerce websites that maximise merchants’ ROI. From replatforming to ecommerce strategy, web design to SEO. Talk to our expert team to see how we can help you grow your online business and supercharge your sales.