Unifying In-Product Notices on WordPress.com

In-product notices

About this project

After going through the WordPress.com Signup flow, a user is immediately dropped into their Home page, a.k.a., Customer Home.

While guidance for next steps is provided through the Site Setup List, a stack of seemingly urgent notices are displayed on the left sidebar alongside the Plan upgrade nudge, distracting the user from the main intent of this page.

In other words, we thank them for signing up, but also tell them, “…but wait, look at the sidebar, something appears to be is broken!”

My Role

As the design lead for this project, I was involved in all phases. Being in a cross-functional team, I collaborated with one other designer who was working on another task that contained functionality interwoven with certain aspects of this project. I also worked on the UI and visual designs of the screens, and created custom illustrations for enhancement.

  • Product and UX design
  • Flow mapping
  • Wireframing
  • UI and visual design
  • Illustration
  • UX audit

What problems are we solving?

Problematic Information Architecture

As a new user, there are too many things competing for my attention. Which ones do I complete first?

Misuse of color patterns

We use a single color (dark gray) for anything that needs the user’s attention, but using them heavily results in banner blindness. The colors red, yellow, and green which supposedly indicate a notice’s level of priority do not mean anything to the user.

Non-utilization of existing components and patterns

We have notices scattered in many different places around the product without clear guidelines as to what goes where.

Initial Proposal From The Team

These were the preliminary designs that the team was going to go for…

In other words, we were merely going to:

  1. Move the stacked notices from the sidebar to Customer Home.
  2. Style them differently; assign different colors to indicate their level of importance (red – high-priority, yellow -medium priority, and blue – low-priority/informational.)

What are the problems with this approach?

This isn’t solving the crux of the problem.

Merely relocating notices from the sidebar into a different section within the product introduces the exact same problems in a different location.

What about our Notifications Panel? Why don’t we utilize an already existing functionality? A place where most people have been trained to look if something needs their attention?

So I suggested we…

Look at the problem more holistically. In order to do that, we need to:

  1. Do an audit of our existing notices within the product – what are our current notices, and where do they live?
  2. Display the right information at the right time – notices should be contextual, and whenever possible, offered piecemeal instead of bombarding the user with multiples all at once.

From this audit, what were we able to achieve?

  1. Categorize (more about that below) already existing notices and find a more appropriate home for them, especially those ones that were stacked on top of each other in the sidebar.
  2. Utilize already existing patterns and components within the product (such as the Notifications Panel) instead of introducing brand new patterns and components.

How did we categorize these notices?

A. High-priority, blocking notices

What is this?

Any type of notice that blocks the user from being able to do anything.

What notices fall under this category?

From this audit, there really only is one notice that falls under this category and that is – if a user’s site violated WordPress.com’s Terms of Service resulting in a suspension

What does this look like currently?

  • We send the user a notice via the Notifications Panel.
  • We do not inform the users via email as many of these suspended sites are considered spam, but we would like the ability to do that in the near future for legitimate accounts.
  • We disable all features by merely displaying infinite preloaders. It is not clear that only 3 features are accessible (Export, backup download, and Domain Transfer).

What should this look like?

  • Clearly communicate the site’s suspended status to the user.
  • Only surface the 3 features that are available – the ability to Export content, download backups, and transfer Domains. Everything else should be removed.
  • Add a clear link to Support should the user need to dispute the suspension.

B. High-priority, non-blocking notices

What is this?

Any type of notice that is important, but does not block the user from doing anything else.

What notices fall under this category?

Domain verification, Domain expiration, Plan expiration.

What does this look like currently?

As a prominent, omnipresent, non-dismissible notice in the sidebar that looks like an error/warning.

What should this look like?

  • As actionable task cards in Customer Home.
  • Use dark gray since this is the one color we use for anything that needs the user’s attention.
  • While we want these to be distinguishable from Medium-priority Notices (see C below) and create a sense of urgency, we also don’t want these to be too obstructive (Note that some users actually do not wish to renew their purchases, so it’s important for these tasks to be dismissible either temporarily or indefinitely.)
  • Send the user another nudge via the Notifications Panel (whenever necessary) after x days if they miss the notification in Customer Home, or navigate away from this page.

C. Medium-priority notices

What is this?

A non-time-sensitive action that the user needs to complete.

What notices fall under this category?

Email address verification, DNS configuration, G Suite (custom email) setup completion.

What does this look like currently?

As a prominent, omnipresent, non-dismissible notice in the sidebar that looks like an error/warning.

What should this look like?

  • As actionable task cards in Customer Home.
  • These shouldn’t have been displayed as notices to begin with because there is nothing wrong. Rather, these should be displayed as actionable, non-intimidating tasks that the users can self-serve.

D. Low-priority notices

What is this?

Any type of notice that is only informational. The user doesn’t need to take any action.

What notices fall under this category?

Domain propagation.

What does this look like currently?

As a prominent, omnipresent, non-dismissible notice in the sidebar that looks like an error/warning.

What should this look like?

  • As a notice under the Notifications Panel.
  • This notice is more of an FYI to the user, hence, it shouldn’t look like a warning that may cause alarm.
  • If the user navigates to their Domains page, they will be notified there as well.

User flow

Using these newly categorized notices, I created a flow map to illustrate to sequence of events and how they relate to one another.

With this flow in mind, we were able to display notices to the user more contextually with respect to where they were in their journey instead of presenting them with a stack of notices all at once.

Takeaways

This was a particularly challenging project because a lot of it involves legacy decisions, code, and UX. Starting with a blank canvas is, a lot of times, much easier, but when you work on an old system within a behemoth of a product, you’ll have many considerations to weigh. For example, a small visual change you’re proposing could actually not be technically possible or too costly to implement. As a designer, your job is to find the right balance while still fighting for good UX.