Announcement Modules
Announcement modules may look small — a thin banner at the bottom of the screen, or a dialogue at the top — but they carry a big job: grabbing attention and turning it into action. Especially when marketing new features or products, these little modules can make the difference between someone ignoring the message or clicking “Buy Now.”
Here’s what we learned from experimenting, iterating, and sometimes failing — with announcement modules designed for a variety of product and marketing needs.
Behind the Scenes: Why We Built the Countdown Timer Module
When we were gearing up for the launch of Diablo IV, it wasn’t just another game release — it was the launch. The whole organization was mobilized: the marketing team was planning campaigns, the game team was prepping milestone rollouts, and we on the UX side needed a way to clearly communicate when everything was happening.
There were several key moments we wanted to promote:
When pre-purchase became available
When early access started for pre-orders
And the big moment — when the game officially launched
We knew from experience that countdown timers work. Urgency drives action. But this was our first time really investing in a reusable, scalable countdown timer module. We weren’t just designing for this moment — we were building a tool the marketing and game teams could reuse for future moments too.
We focused on two main surfaces:
Web Shop Pages
The web team needed a sticky banner that was highly visible — especially on the homepage and the Diablo family page. The goal here was bold, high-impact visibility. We wanted players to immediately understand what was coming and when. This version needed to be loud and proud.Desktop App
The desktop experience was more content-dense, so the banner needed to live in-line with other marketing messages. It had to fit the aesthetic of the app and coexist with other announcements — while still catching the eye. Here, the design leaned into balance and subtle motion (e.g. animating the timer digits) to draw attention without overwhelming the layout.
The Impact: What We Saw After Launch
The countdown timer module ended up being a huge success. It drove a significant portion of the total pre-purchase revenue for Diablo IV, proving the value of clear, time-based messaging. Interestingly, while click-through rates were slightly lower than some past campaigns, traffic to the product detail page was much higher — suggesting we reached more curious users who weren’t initially planning to buy but wanted to learn more. It’d be worth a follow-up analysis to see how many of those visitors eventually converted. On the qualitative side, we also received positive feedback from players, many saying they appreciated the countdown and found it helpful, especially since they had been waiting a long time to dive into the game.
Why Countdown Timers Work So Well
Countdown timers aren’t just flashy — they work because of something hardwired in our brains: loss aversion. People are more motivated by the fear of missing out (FOMO) than by the excitement of gaining something.
Seeing a timer counting down triggers urgency. It says, “You only have this much time left to act.” Whether it’s a sale ending or early access closing, the visual of the ticking clock drives faster decision-making and reduces hesitation. No long paragraphs needed — just “Ends in 2h 14m” is often enough.
Design Decisions: What Worked (and What Didn’t)
🔧 Designing for Flexibility
As more teams got excited about the module — including cross-promotional campaigns and Battle.net-wide sales — it became clear that we needed to design with flexibility in mind. We worked with marketing and product partners to identify which parts of the banner were optional and which were required:
Toggle-able Elements: background art, game icon, secondary text, CTA button
Required Elements: Main headline, countdown timer (of course), and accessible text contrast
Layout variations: Center-aligned, spaced even or spaced out
Since the component with so many options and layouts to choose from, we ran into all sorts of micro-decisions while building these modules. Here are some that surprised us:
⏱ Designing the Countdown: Small Details That Mattered
When we designed the countdown timer, we realized pretty quickly that the smallest visual choices had a big impact on how clear — and how urgent — the timer felt. Here are a few decisions we made along the way:
⏱ Leading Zeros — Keep Them In
We debated whether or not to include leading zeros (like showing 01:04:23 instead of 1:4:23). In the end, we decided to keep them in. The consistent two-digit format made the timer feel more like a classic digital clock, which helped with visual rhythm and readability — especially when viewed quickly or from a distance.
🕐 Hour Slot — Don’t Drop It
As the timer counted down, another question came up: should we hide time slots when they hit zero? For example, if there’s less than one hour left, should we just show minutes and seconds?
We chose to keep the full structure visible — so even when hours hit 0, they still showed up in the layout. This helped maintain a consistent format and avoided visual jumpiness. Plus, seeing 00:23:15 felt more like a proper countdown than suddenly shifting to 23:15.
📆 Days vs. Hours — Show What Feels Most Urgent
When to show days, and when to switch to just hours? We found that:
If there are more than 48 hours left, it’s better to show days (e.g. “3 days” instead of “72 hours”). It’s easier to grasp at a glance and saves users from doing mental math.
If it’s less than 48 hours, it feels more urgent to show total hours left — “47 hours” sounds much more immediate than “1 day and 23 hours.”
This switch helped us balance clarity and urgency — keeping the timer informative without overwhelming users with unnecessary detail.
🎮 Hiding Game Icons for More Compact Design
Game icons were helpful for quickly giving players context — they could instantly recognize which game the announcement was for. But because we had limited space, especially on smaller screens, we often removed the icons to prioritize other content. That caused issues. If the headline didn’t clearly mention the game, users were left confused and unsure what the announcement referred to.
Lesson learned: Don’t rely on game icons alone to provide context. Always include the reference to game title in the headline or subheading to make the message clear across all screen sizes.
🔘 CTA Buttons — Crucial, But Not Always Needed
Calls to action (CTAs) like “Preorder Now” or “Learn More” worked well when users were in decision mode. But not every banner needed one. Sometimes we were just delivering information — like telling players when servers go live — and adding a button only cluttered the module.
We ended up making the CTA optional so the module could flex based on the message.
📌 Sticky vs. In-Line Banners
Sticky banners (ones that stay fixed at the top of the screen) are great for visibility — you can’t miss them. But they can also annoy users if overused, and it could be competing for other modules like sticky purchase panel. In-line banners (embedded in content or feeds) feel more subtle and integrated, though they’re easier to overlook.
We added the sticky option because it was a strong request from the marketing team. But it came with a clear guideline: use it sparingly — only for high-priority campaigns where visibility is absolutely essential.
❌ Dismissable vs. Non-Dismissable
Should users be able to close the banner? It depends. After plenty of discussion with the marketing team, we decided to prioritize user experience and reduce banner fatigue. If someone chooses to dismiss the banner, that’s a clear signal they’re not interested — so we respect that choice and don’t show it again.
📍Targeting: Right Time, Right Place
This was the biggest game-changer. When we showed a Diablo IV announcement inside the Diablo game tab, click-through rates were way higher. But when we showed the same banner on the homepage or inside another game’s tab, it felt intrusive — like a pop-up ad you didn’t ask for.
Lesson: Relevance is everything. Users respond better when the message matches their current context.
The Formula That Actually Worked
After testing and tweaking so many variations, we found that the best-performing announcement modules had two main key ingredients:
A clear, concise message
Delivered in the right place, at the right time
If those things were in place, the rest — visuals, layout, CTA, and even the countdown timer — just amplified the impact. Get the targeting and message right, and let the countdown do the magic.