Research

I utilized Appbot and Competitor Analysis' to get an idea of patterns that are typically used in notification pages. The challenge with Neato was designing for future iterations in which a user might be able to receive messages from multiple sources. Should all notifications be shown in the same area? In the end, I decided to keep the notifications section as simple as possible, showing all messages on the same page with simple delete options.
This image compares different messaging systems (e.g., Facebook Messenger, iMessage) with a table that organizes notifications and how they appear across platforms. It provides insights into the structure and timing of various notification types in these messaging apps.

North Star Design & Flow Creation

I explored a few formatting options in my north star designs, but most followed the typical list format that users see in Facebook apps. Unfortunately these designs did not solve the problem of multiple devices (and overall clashed with the existing design of the app). The final designs became more of a reflection of messages from the device itself, utilizing chat bubbles. This way, a user is easily able to tell device messages apart via the profile icons on the left. Once the designs were finalized, I specified flows for our development team.
 This image illustrates multiple variations of notifications, including a visual comparison of alerts for maintenance, errors, and promotions across several mobile screens.

The bottom section displays flowcharts and layouts mapping out how auto-maintenance reminders, general alerts, and bonuses are handled in the app's notification system.
This image presents a flow for a maintenance notification triggered by the robot cleaning app:

On the left, the user is notified of a brush replacement on their lock screen.
The user then opens the app to see a "Battery low" message and goes to the notifications screen, which shows maintenance alerts.
The final screen is a "Parts & Maintenance" section showing details about various parts like brushes and air filters, including usage hours and replacement options.

Deletion & Scrolling Behaviors

In addition to user flows, I had to deliver mockups of deletion behaviors and scrolling to development. These behaviors were included in notifications, and referenced for other pages of the app. cused on map editing and tooling expectations.
A GIF showing slide left to delete notificationsA GIF showing the "select all" function, which brings up checkboxes for each notification to select and delete.

Final Handoff

After creating final specs for development, I delivered via Zeplin. The design is still subject to QA, testing, and future updates.
This image shows the breakdown of a notification page for a robot cleaning app:

The left side lists different notification elements, such as error alerts (e.g., brush stuck) and promotional messages from Neato. There are explanations of notification bell states (e.g., all notifications read, error present).
The right side shows a mobile notification screen with details like section breaks, padding between notifications, and time stamps. Notifications include maintenance alerts and promotions, all categorized by date.
Back To Top
arrow_upward