Redesigning a Notification Center to Improve Discoverability and Actionability

Ivykiss
Scope: Product Design, UX/UI, Information Architecture, Prototyping
Year: 2026
Redesigned notification center with search, filtering, and timeline grouping

 

Context


The existing notification page on Ivykiss, a B2B e-commerce platform for beauty supply store owners, functioned more like a log of events rather than a useful communication tool.

As the platform grew, the number of notifications increased significantly. Users found it difficult to quickly identify important updates such as shipping status or promotional offers.

Without search or filtering capabilities, and with unclear visual distinction between read and unread states, it became difficult for users to quickly understand the status of their notifications. In addition, inconsistent image sizes and layouts made the interface harder to scan, especially on mobile devices.

As a result, notifications often ended up being dismissed after a quick glance instead of leading users to meaningful actions such as visiting a product detail page (PDP).


Problem


A UI audit revealed several critical pain points in the existing system:
  • Poor discoverability: Without search or filtering, users could not easily locate relevant notifications among hundreds of entries.
  • Unclear state feedback: The visual distinction between read and unread notifications was weak and unfamiliar.
  • Limited business connection: Notifications primarily delivered information but rarely encouraged users to take action, such as navigating to a product detail page (PDP).
  • Poor mobile usability: On smaller screens, information was truncated and images appeared too small to be useful.
  • Visual noise: Inconsistent image sizes and the absence of timestamps made it difficult to understand the chronological order of notifications.
  • Content management challenges: Marketing messages lacked category-based structure, requiring manual copywriting each time. Additionally, images sometimes contained text that was too small to read clearly.

Before: Notification list with unclear hierarchy and no search or filtering
After: Structured notification list with improved hierarchy and discoverability

Approach


Rather than focusing only on visual improvements, the redesign aimed to balance operational efficiency and business value through three key strategies.

1. Visual hierarchy and layout modernization

Users can choose between grid and list view modes through the settings panel.

To improve scannability, notifications were grouped by time segments such as Today, Yesterday, and Last Week, with relative timestamps added to provide clearer temporal context.

Unread notifications were highlighted using a blue indicator, while category-based color labels allowed users to quickly recognize the type of information.

2. Enhanced user control and navigation

A search bar and category filters were introduced at the top of the page to significantly improve discoverability.

A “Mark all as read” action was fixed at the top for quick management, while each notification gained a contextual menu (…) allowing users to toggle read states individually.

3. Actionable notifications 

To increase the business value of notifications, the layout introduced areas within the list and page margins where personalized recommendations or promotional banners could appear.

Certain notifications were redesigned with clearer CTAs and naming patterns to guide users toward relevant product pages and encourage meaningful actions.
Reusable notification components enabling scalable content management
Rapid layout iteration and prototyping using Figma Make

Solution


A structured notification center that improves discoverability and turns notifications into actionable product touchpoints.
The redesign introduced clearer visual hierarchy, search and filtering for faster navigation, and stronger connections between notifications and product pages.
Search and category filters and Improved visual hierarchy for faster notification discovery
Structured notification banner system for category-specific messaging and actionable CTA
A flexible settings system allows users to control notification categories, push preferences, language, and grid or list view modes.

Outcome


The redesigned notification center was approved by the team lead and is now moving into implementation planning in collaboration with development vendors.

The design introduced:
- Search and filtering for faster notification discovery
- Clear visual hierarchy and timeline grouping
- Stronger connections between notifications and product pages

These changes aimed to transform notifications from passive updates into actionable product touchpoints.