Choosing the Right UI Pattern for Your Product Update
A product update isn’t really about your product. It’s about your users.
It’s about making their lives a teensy bit easier and ensuring that your product continues to provide value to them.
But improving your product isn’t enough. The same fallacy behind the phrase “if you build it, they will come” applies to product updates. If you update it, they will adopt. Not quite.
That’s why the way you announce a product update is so important.
Bombard users with unwanted, too frequent announcements or overwhelming product tours, and you might burn the trust you’ve established. Yet, underselling an important new feature means lower adoption rates and a missed opportunity to deepen your users’ engagement.
Aligning your product update announcement with the appropriate UI pattern is crucial to helping users learn, adopt, and benefit over time.
We’ve examined hundreds of UI patterns used for announcing product updates and wrote this guide to help you decide what works for your next update.
Evaluate the Noteworthiness of Your Product Update
Most product people have a gut feeling of how significant their product launches and feature releases are, but there are things like personal connection to the product, or development time that can skew the decision.
Thinking through the following questions could help you better plan your product updates:
- How many of your users will the product update affect? Will the update impact all of your users or primarily users in specific job roles? Will new users and power users find and take advantage of the product update equally? How much of your user base is affected should shape how you target the product update announcement.
- How user-facing is the change? A back-end optimization that will dramatically improve the product experience affects all users, but it may not be evident to most users. However, a small UI change that might only appeal to a subset of users would be considered more user-facing.
- How much immediate revenue is the product update expected to drive? Some updates, like pricing changes, have an immediate impact. Significant new features could also impact revenue in a few ways. New features could be added to an enterprise plan to drive upgrades, opened up to all users to convert prospects, or priced as a stand-alone offering to create a new product line. Thinking through how much revenue you expect to see from the change could help quantify how big the announcement should be.
- How much time was spent updating the product? While time spent on a project is never a perfect indication of its value or success, it’s helpful to consider the resources that went into developing the update. This could reveal the internal value your team has placed on the update and help calculate ROI.
- How do users engage with your product (compared to other products)? It could be helpful to consider how much time users spend in your product compared to other products. Sales teams spend hours a day in a CRM, so for them, a new reporting feature makes a much bigger difference to their lives than a new feature in Kayak or Gusto.
Most Noteworthy: Stop Them Right At Login
Product launches and big feature releases have the potential to affect all users. They could also be powerful in attracting new users, or in turning inactive users into brand advocates. These changes might get picked up by the press or by other companies’ blogs, so it’s necessary to emphasize the value that users will receive.
To help coordinate big product launches, check out the Product Launch Plan Template.
Maximize the effectiveness of your next product update with the Product Launch Plan Template
I'd like content on improving user retention once a week.
A modal window can be great for large, Product Hunt-worthy launches. Our friends at ProdPad recently had one of these with their new Customer Feedback Portal. They announced the new product with a nice, big modal window. This modal was targeted to appear once on any page within the product, ensuring that users won’t miss the news.
Built with Appcues
ProdPad’s modal lists the new benefits users can expect, gives instructions on how to activate the Customer Feedback Portal, and conveys excitement. A powerful new tool deserves a big announcement.
Get Users’ Go-Ahead for Pricing Changes
Changes in prices also deserve a big, can’t-be-missed announcement. To grab users’ full attention, Netflix uses a full-screen takeover to introduce new pricing models. This screen appears immediately when users first log into their dashboard. By grabbing attention upfront with a dark gradient, Netflix ensures that users see, and agree to, the new prices.
No one likes a price hike, but Netflix conveys the why: giving users “more of the shows and movies you love.” Importantly, Netflix provides a link to cancel subscriptions for users who are unhappy with the change.
New plans and pricing models often repackage the product and reframe the value of the service. It’s crucial to make sure all users get the message and are on board with the changes.
Medium Noteworthy: Give a Tip at the Right Time
There are plenty of product updates that can be significant to users but might not require a huge splash. For these, more subtle UI patterns can strike the right mix of considerate and assertive.
Some users will be grateful for the tip, while others can easily dismiss the announcement with a click.
Instead of launching users immediately into their new Presenter view, Google Slides uses a small tooltip to announce the new feature after users have already entered into the traditional “present” view.
The tooltip gets right to the point, describing the two benefits users would get. Instead of having the CTA of the tooltip (“got it”) lead to an action, the tooltip points to where the user can access the new Presenter view from now on, helping to engrain the action into the user’s workflow.
While this approach requires two clicks where one could have sufficed, the new view is a pretty drastic change. Users who just wanted to see their slide in full-screen mode could have been thrown off by the new view:
By preempting the change with two clicks and a familiar screen, Google avoids taking users by surprise and potentially interrupting their workflow. The slow reveal eases users into a pretty big new feature.
Shutterstock uses a tooltip to introduce a new reverse image search functionality after users perform a regular image search. The dark gradient on the screen makes the message pop, especially important on a busy page filled with search results.
The tooltip tells users about the formats and size supported, which can help prevent friction. But it could have been even stronger if Shutterstock explained why users would want to perform a reverse image search.
If you don’t need to point to a specific element, slideouts can be a flexible alternative for delivering pithy, targeted messages anywhere on the page. Indiegogo uses a slideout to announce web support for Apple Pay. By placing the Slideout on the “How it works” page, Indiegogo targets users who want to learn more, rather than all users who visit the homepage.
Built with Appcues
The message not only describes how the new feature works, but it also reinforces Indiegogo’s commitment to supporting entrepreneurs.
Less Noteworthy: Let Users Initiate Further Learning on Specific Pages
Hotspots are the less intrusive UI pattern for product tours. The small icons, often in the form of circles, can be placed strategically on certain elements to indicate more information. Unlike some modals and tooltips, users have to click into hotspots to engage.
With hotspots, users have to confirm that they want a product tour and aren’t just thrown into one. Upwork, formerly Odesk, uses a well-placed hotspot in their chat screen to show users that the “enter” key could be configured as to send messages or add a line break. For active users, this shortcut could save a ton of time.
Pinterest uses a large, pulsating hotspot to point users to the shop section in the nav bar. While it’s easy to dismiss for users who know they don’t want to shop, the delightful design of the hotspot makes it hard to ignore.
Pinterest employs the same hotspot UI pattern for their “buyable pins” search, which serves a similar function—making sure users know that Pinterest is now also a shopping platform. While it’s a pretty overt use of a hotspot, the product update has huge potential to bring in revenue for Pinterest, so it’s worth grabbing users’ attention.
To make your hotspot more subtle, you can style them as question marks instead of pulsing beacons. Box uses a question mark icon that launches users into a multi-step product tour.
While the tour contains a lot of information, users who click into the question mark icon probably appreciate the guidance. In Box’s case, this UI pattern isn’t used to announce a brand new feature, but to remind users of a feature that remains helpful.
Above All, Be Considerate
In-product messages are effective because they target active users. This is the prime time for getting users excited about a product update and motivating them to activate new features.
There are other channels for announcing product updates that you can use in combination with in-product messages. Established companies like HubSpot might host a massive launch event. Meanwhile, email can be great for reaching users who aren’t as engaged and less likely to be in your product.
Regardless of the medium, announcing a product update requires a balance between declaring your work proudly and being considerate of your users’ time. The more attention you request, the more value the product update should deliver.