Case study
Elastic Path Notifications
Elastic Path Notifications provides ecommerce teams with comprehensive visibility into organisation-wide updates and changes made within Commerce Manager—the web-based interface that enables business users to efficiently manage their online stores without requiring technical knowledge of the APIs.
Role:
Senior UX Designer
Employer:
Elastic Path
Platform:
Web app
Project length:
1 week
01/Background
Elastic Path notifications: a passion project for better workflow and accountability
Elastic Path Notifications is a system I developed to provide merchandisers with essential in-app alerts for events such as creating, editing, and deleting objects, handling errors, publishing catalogues, and more. This feature was born out of a significant gap in the web app, where there was limited visibility into role-based access control, historical actions, and overall team activity. By delivering timely and actionable notifications, it empowers merchandisers with greater accountability and transparency, improving workflows and enabling better decision-making across the organisation.
Merchandisers can navigate between personal notifications and organisation wide notifications.
02/Anatomy of notifications
Inside the framework: how Elastic Path notifications drive transparency and action
Elastic Path Notifications are designed with a clear structure to enhance user experience and team collaboration. They distinguish between "You vs. All," allowing merchandisers to see notifications specific to their actions or those involving the entire organisation. Each notification is actionable, featuring events with timestamps and hyperlinks, enabling users to navigate directly to relevant objects within their store and review changes in detail. Personal identifiers, such as names and profile pictures, add context by showing who initiated the action. Users can further tailor their experience through customizable notification settings, deciding which events they want to receive. Finally, a system-wide notification center ensures consistent visibility and accessibility across the entire web app.
03/Notification types
Crafting tailored notification designs for diverse event types
The development of Elastic Path Notifications involved a thorough exploration of notification types, considering the wide range of events that could be captured across the system. Many of these events required bespoke design solutions to ensure clarity and usability. For instance, marketing communications can include video and article links with URLs, while error handling relies on specific iconography to immediately capture the user's attention. Important callouts, such as messages from the CEO, are visually distinguished with a blue highlight. For processes like importing objects, dynamic progress indicators display the number of items imported—for example, '1,456 / 1,500'—providing users with precise and actionable updates.
04/Features
How users interact with the elastic path notifications log
The notifications log is conveniently located at the top-right corner of the screen, providing quick and easy access to updates. It shows the count of new notifications and can be accessed by clicking the bell icon. This dropdown displays all events the user has configured to be captured, ensuring a tailored experience.
Merchandisers can view all of their recent notifications by clicking the bell icon.
Customizable control: tailoring notifications to fit merchandisers' needs
Merchandisers have the flexibility to include or exclude specific events across their store, ensuring they receive only the most relevant updates. This customisation spans all parts of the system, covering object updates across various services and communications from Elastic Path, providing a comprehensive yet focused notification experience.
Merchandisers can include and exclude notifications types from the system.
Tracking progress: keeping merchandisers informed during lengthy processes
Certain events, such as publishing extremely large product catalogs, can take minutes or even hours to complete. The notifications tab is equipped to handle these scenarios by displaying event progress through a dynamic progress bar, which updates in real-time as the process unfolds—for example, confirming when a catalog has been successfully published. This notification behavior is designed to be extensible, accommodating other lengthy processes like importing substantial data volumes into a store, ensuring merchandisers remain informed every step of the way.
Merchandisers can view the real time status of specific events such as publishing catalogs.
05/Business impact and retrospective
Business Impact
The Elastic Path Notifications project gained significant attention within the organisation. It was picked up by the Director of User Experience and considered for inclusion in the product roadmap. Discussions with the Head of Product also highlighted its potential value, particularly in addressing gaps within the existing system, such as improving the handling of role-based access control (RBAC) and enhancing support for specific merchandiser accounts. This project not only demonstrated the need for better notification systems but also helped to steer strategic conversations around RBAC improvements.
The Notifications project drew notable attention.
Retrospective
This one-week passion project was a valuable learning experience. Notifications are a core element of most digital products, but this was my first opportunity to work specifically on a notifications feature. The research, design, and development of the UI presented some interesting challenges, and the final result is something I’m proud to showcase. This experience has given me a deeper understanding of notification systems, and I look forward to applying these considerations to future systems and products.