Background
With the new interface for logged-in readers on the main article namespace to receive a confirmation about adding or removing items to a reading list, we're also in need for a proficient design for these confirmations
We would like to provide a (subtle?) nudge to people that their addition/removal was successfully absolved by the system.
User story
As a logged-in reader, I'd like to get clarity if the action was absolved.
Design
 |  |
| Save article. = Show this toast with the name of the article user saved in quotes | Unsave article = Show this toast with the name of the article user unsaved in quotes |
| Link to Figma | Link to Figma |
Requirements
- We remove the link to the article (keep the link to the saved pages) and add quotes around the title and make it bold
- When removing an article we change it to gray (not white) e.g. notice
- Update the copy. Replace "saved pages" with "your saved items" with "saved items" being a link to Saved page.
Requirement
Scope: Desktop web (Vector 2022).
- Redesign the toast notifications that confirm article save or removal actions in Reading Lists.
- Update both messages to show the article title in bold and enclosed in quotation marks.
- Remove the direct link to the article from the toast notification.
- Retain and update the link to the Reading List page:
- Replace “saved pages” with “your saved items,” where “saved items” is a clickable link to the Saved page.
- For unsave (removal) notifications:
- Use a gray background or styling consistent with “notice” type messages instead of white.
- Both notifications must display clear confirmation that the action was successful.
BDD
Feature: Redesigned Reading List save/remove notifications
Scenario: Saving an article
Given I am a logged-in user on an article page
When I click the “Save” (bookmark) icon
Then a toast notification appears with the message:
“**‘<Article Title>’** was added to your saved items”
And “saved items” links to the Saved page
And the toast background uses the standard success style
Scenario: Removing an article
Given I am a logged-in user with an article already saved
When I click the “Unsave” (bookmark) icon
Then a toast notification appears with the message:
“**‘<Article Title>’** was removed from your saved items”
And “saved items” links to the Saved page
And the toast background uses the gray “notice” styleTest Steps
Test Case 1: Verify save notification content and style
- Log in as a user with Reading Lists enabled.
- Open any article in the main namespace.
- Click the “Save” (bookmark) icon.
- AC1: A toast notification appears with the article title in bold and in quotation marks.
- AC2: The message reads “was added to your saved items.”
- AC3: “saved items” links to the Saved page.
- AC4: The toast uses the success color/style.
Test Case 2: Verify unsave notification content and style
- Click the “Unsave” (bookmark) icon for the same article.
- AC5: A toast notification appears with the article title in bold and in quotation marks.
- AC6: The message reads “was removed from your saved items.”
- AC7: “saved items” links to the Saved page.
- AC8: The toast uses a gray “notice” background style.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T407277#11325964 |
| 2 | ✅ | T407277#11325964 |
| 3 | ✅ | T407277#11325964 |
| 4 | ✅ | T407277#11325964 |
| 5 | ✅ | T407277#11325964 |
| 6 | ✅ | T407277#11325964 |
| 7 | ✅ | T407277#11325964 |
| 8 | ✅ | T407277#11325964 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T407277#11325972 |
| 2 | ✅ | T407277#11325972 |
| 3 | ✅ | T407277#11325972 |
| 4 | ✅ | T407277#11325972 |
| 5 | ✅ | T407277#11325972 |
| 6 | ✅ | T407277#11325972 |
| 7 | ✅ | T407277#11325972 |
| 8 | ✅ | T407277#11325972 |
