Delete flow in a complex multiuser application

In September of 2023, our team participated in a programme-wide hackathon to solve a promotion delete flow. It was exciting to collaborate in real-time with colleagues at home and in the office and to contribute innovative concepts, flow diagrams, and a high-fidelity prototype.

Background #

Promotions at Coles supermarkets throughout Australia are planned and managed behind the scenes by dozens of Business Category Coordinators using a spreadsheet-like desktop-designed web application. Unlike single-category promotions, cross-category promotions include items from multiple categories – multiple coordinators plan and manage them together.

Problem #

To delete a promotion, a user must wait 3 seconds and then click OK.

A context menu item triggers the delete flow leading to a confirmation dialog

After confirming, the user sees a “Delete successful” status message.

A “delete success” status message for the current user only.

For cross-category promotions, the delete flow was the same as for single-category promotions. This poses problems.

I workshopped with subject matter experts in our team to build a shared understanding of two users and their pain points.

Pain points summary #

  1. The generic delete confirmation causes uncertainty and does not support the user with timely relevant information.
  2. Collaborators are unaware of deleted cross-category promotions and do not know why their efforts have vanished.

Their pain points helped define our problems to solve.

Problem statements #

The delete flow process for cross-category promotions involves at least two users: the user who is deleting; and collaborators who contributed to the promotion. Hence two problem statements.

We believe that providing an informative confirmation dialog

For coordinators deleting a cross-category promotion

Will inform them of additional categories in the promotion, and give them control to edit the promotion

We will know this to be true when we see clickstream data for opening the informative dialog, button to edit or delete the promotion.

We believe that providing in-app notifications

For collaborating coordinators with promotions deleted

Will achieve awareness of the deletion

We will know this to be true when we see clickstream data for marking the notifications as read.

Research #

To align our team’s understanding of the problem, I mapped out the current delete flow shown below. Once visualised, our team agreed this process works but only for single-category promotions.

Current state delete flow diagram aligned understanding of the problem.
The current state promotion delete flow requires the user to wait 3 seconds before confirming with an OK button. A delete success status message appears for them only.

This flow diagram also made it clear where in the process to generate ideas for charting a new course. Our scope for the hackathon was to create a separate experience when deleting a cross-category promotion such that users are informed and aware.

Benchmarking UI patterns #

We wanted to improve on the annoying interface pattern of disabling the OK button for 3 seconds.

Disabled OK button for 3 seconds has passive friction – its effectiveness is doubtful.

I felt it important to switch to an active friction mechanism… A mechanism that requires more interaction than clicking “OK”. This delete action will destroy the work of multiple people. In addition to labelling the button what it does 1, the dialog content could benefit from clarity. I led a team wireframing session to generate ideas.

Low-fidelity wireframing gave us the freedom to explore concepts for an active friction mechanism. After wireframing and critique, our team was satisfied with the content and interaction design for an effective confirmation dialog.

Solutions #

Our new experience solutions are illustrated in the future state ideal delete flow.

The future state delete flow diagram articulates our team's vision for design.
The future state delete flow diagram articulates our team’s vision for design. Note that this key includes notifications for other users.

First, I upgraded the confirmation dialog to an informative decision point, offering helpful paths.

Evolving from exploring ideas in low fidelity to a mock-up with sample content

I rewrote the heading as a simple statement and filled the body with a list of promotion item categories.

Then I swapped the redundant Cancel button to one that opens the promo for editing. In this context, it gives the user a helpful alternative flow.

Next, I replaced the delayed OK button with my checkbox-button combo to confirm the deletion.

Last, I wrote a success message suited to the action. To inclusively indicate success, I added a tick icon to complement the green colour.

Implementing the notification, I recommend following guidance from Heydon Pickering’s Inclusive Notifications 2.

  • Icon includes a text alternative, “success”.
  • Message automatically disappears after an appropriate amount of time.
My 3 frames storyboard of the user's promotion delete workflow.
Future state delete flow storyboard for a cross-category promotion

Second, we hypothesised that providing in-app notifications could alert collaborators that a promotion has been deleted.

For this scenario, I used an existing design system pattern:

  • A number badge indicator on a bell icon menu button.
  • A menu item with the count of promotions deleted.
Notification badge indicator and menu item show relevant info to affected users.
Future state delete notification storyboard

Results #

My accurate flow diagrams ensured that each interface element and state was captured, and all roles in our team were aligned. The delete flow’s future state has additional elements that represent notifications for collaborators. It’s possible that this holistic multi-user perspective gave our team an edge in winning the hackathon.

Our team developers reviewed the current and future state flow diagrams and understood that logic would be required in the Delete context menu item. Based on the condition of the selected promotion on the grid, the appropriate dialog would be triggered.

New paths proposed in the future state will put users in control and empower them with relevant, timely information. The explicit button text makes it clear that this action will delete an entire promotion, including items from multiple categories.

The success notification provides visibility of status, Jakob Nielsen’s #1 usability heuristic 3. Adding an icon gives extra visual affordance and a text alternative, aligning the notification with design standards and further building trust. Our solution also extended a notification to collaborators affected by the delete action.

I connected high-fidelity mock-ups into an interactive prototype for hackathon judges to realise the intent of the proposed delete flow. To explore the prototype, try the promotion in week 50 row 3.

Footnotes #

  1. OK-Cancel or Cancel-OK? The Trouble With Buttons ↩︎
  2. Notifications – Inclusive Components ↩︎
  3. Visibility of System Status (Usability Heuristic #1) ↩︎