Role

Product Designer

Team

8 people

Timeline

3 months

Problem

Problem

Problem

  • Lack of Clarity and Organization: Updates page lacks clear layout, hindering quick identification of important updates.

  • Insufficient Context in Notification Cards: Lack of descriptive info in notification cards limits understanding without navigating to associated objects.

  • Ineffective Prioritization of Updates: Default time-based sorting may bury critical updates among less important ones, risking oversight.

  • Noise in Inbox: Notification system overwhelms with new conversations, excessive notifications, and clutter, hindering productivity.

  • Lack of Clarity and Organization: Updates page lacks clear layout, hindering quick identification of important updates.

  • Insufficient Context in Notification Cards: Lack of descriptive info in notification cards limits understanding without navigating to associated objects.

  • Ineffective Prioritization of Updates: Default time-based sorting may bury critical updates among less important ones, risking oversight.

  • Noise in Inbox: Notification system overwhelms with new conversations, excessive notifications, and clutter, hindering productivity.

  • Lack of Clarity and Organization: Updates page lacks clear layout, hindering quick identification of important updates.

  • Insufficient Context in Notification Cards: Lack of descriptive info in notification cards limits understanding without navigating to associated objects.

  • Ineffective Prioritization of Updates: Default time-based sorting may bury critical updates among less important ones, risking oversight.

  • Noise in Inbox: Notification system overwhelms with new conversations, excessive notifications, and clutter, hindering productivity.

Outcome

Outcome

Outcome

We shipped a clutter-free and grouped updates experience that provides more context. The team included a designer (myself), a product manager, as well as the iOS and Android development teams.

We shipped a clutter-free and grouped updates experience that provides more context. The team included a designer (myself), a product manager, as well as the iOS and Android development teams.

We shipped a clutter-free and grouped updates experience that provides more context. The team included a designer (myself), a product manager, as well as the iOS and Android development teams.

The 3 objectives

The 3 objectives

The 3 objectives

To begin, I outlined three commitments that would determine the success of this project.

To begin, I outlined three commitments that would determine the success of this project.

To begin, I outlined three commitments that would determine the success of this project.

Clarity and organization

Allowing users to quickly identify and prioritize important updates.

Easy to revisit an update

Enabling users to revisit and take necessary actions on specific updates at a later time.

Context-rich update card

Providing users with better insights without having to open the update.

Exisiting experience

Exisiting experience

Exisiting experience

The exisiting updates experience was just a place where all the updates in the organisation would be dumped. There was no organization based on update types, or grouping multiuple updates under the same object.

The exisiting updates experience was just a place where all the updates in the organisation would be dumped. There was no organization based on update types, or grouping multiuple updates under the same object.

The existing updates experience was just a place where all the updates in the organisation would be dumped. There was no organization based on update types, or grouping multiple updates under the same object.

  1. Difficult to manage updates if users have to switch between tabs frequently.

  2. Description doesn’t convey what exactly was updated in the object.

  3. Repeated use of object ID which provides no value.

  4. Time stamp occupies a lot of horizontal space.

  5. No grouping of multiple updates under single object.

Solving the biggest huddle — Notification clustering

Solving the biggest huddle — Notification clustering

Solving the biggest huddle — Notification clustering

We replaced each notification line items with notification clusters/threads where each cluster will have all notifications of one object or one bot. All notifications of one specific object would be part of this notification cluster. This ensures user sees only one reference and latest information of the object

  1. Show all three types of notifications in that object along with the sender, time stamp and actual message

  2. Any action is taken directly on the cluster. These include snooze, mark-as-read, manage subscription.

I explored several variations for the notification cluster design. Here are a few key ones worth highlighting.

We replaced each notification line items with notification clusters/threads where each cluster will have all notifications of one object or one bot. All notifications of one specific object would be part of this notification cluster. This ensures user sees only one reference and latest information of the object

  1. Show all three types of notifications in that object along with the sender, time stamp and actual message

  2. Any action is taken directly on the cluster. These include snooze, mark-as-read, manage subscription.

I explored several variations for the notification cluster design. Here are a few key ones worth highlighting.

We replaced each notification line items with notification clusters/threads where each cluster will have all notifications of one object or one bot. All notifications of one specific object would be part of this notification cluster. This ensures user sees only one reference and latest information of the object

  1. Show all three types of notifications in that object along with the sender, time stamp and actual message

  2. Any action is taken directly on the cluster. These include snooze, mark-as-read, manage subscription.

I explored several variations for the notification cluster design. Here are a few key ones worth highlighting.

We chose this direction because it best met all our objectives. Swipe actions work more intuitively on the entire cluster, and the visual hierarchy felt the strongest here.

We chose this direction because it best met all our objectives. Swipe actions work more intuitively on the entire cluster, and the visual hierarchy felt the strongest here.

We chose this direction because it best met all our objectives. Swipe actions work more intuitively on the entire cluster, and the visual hierarchy felt the strongest here.




I looked at older versions of Android notifications and the Google Inbox app for inspiration. I think they did a great job with gestures and organizing information.

I looked at older versions of Android notifications and the Google Inbox app for inspiration. I think they did a great job with gestures and organizing information.

I looked at older versions of Android notifications and the Google Inbox app for inspiration. I think they did a great job with gestures and organizing information.

Actions on clusters

Actions on clusters

Actions on clusters

A cluster can have options to mark as read, snooze, or manage subscription.

A cluster can have options to mark as read, snooze, or manage subscription.

A cluster can have options to mark as read, snooze, or manage subscription.

Defining a great filtering experience

Defining a great filtering experience

Defining a great filtering experience

Updates can come in different types. To organize them and give users a list of the most important updates for them, we tried putting a number of quick filters.

Updates can come in different types. To organize them and give users a list of the most important updates for them, we tried putting a number of quick filters.

Updates can come in different types. To organize them and give users a list of the most important updates for them, we tried putting a number of quick filters.

We then scoped down to having just 2 quick filters - Important and Others.

  • Important tab (which is open by default, eliminating the need for an 'All' tab) shows you updates where you were mentioned, assigned, or someone commented on an object you're subscribed to.

  • Others tab includes all notifications from one bot would be grouped by bot name under one group.(eg. Reminder Bot notifications or Github Bot notifications grouped in one row)

Here are a couple of placements I thought of.

We then scoped down to having just 2 quick filters - Important and Others.

  • Important tab (which is open by default, eliminating the need for an 'All' tab) shows you updates where you were mentioned, assigned, or someone commented on an object you're subscribed to.

  • Others tab includes all notifications from one bot would be grouped by bot name under one group.(eg. Reminder Bot notifications or Github Bot notifications grouped in one row)

Here are a couple of placements I thought of.

We then scoped down to having just 2 quick filters - Important and Others.

  • Important tab (which is open by default, eliminating the need for an 'All' tab) shows you updates where you were mentioned, assigned, or someone commented on an object you're subscribed to.

  • Others tab includes all notifications from one bot would be grouped by bot name under one group.(eg. Reminder Bot notifications or Github Bot notifications grouped in one row)

Here are a couple of placements I thought of.

Unread and All

Unread and All

Unread and All

We replaced the Unread and Read tabs with a single toggle between Unread and All.

This creates a simpler mental model as most users primarily want to see what’s new, and occasionally browse everything. “All” covers both read and unread, avoiding confusion from too many overlapping categories.

It also reduces decision fatigue. With just two clear options, users don’t have to think about where a notification might be. It’s either unread or part of the full list.

These felt a bit different from quick filters. I first saw them more like view toggles, even though they’re technically still filters. That’s why I considered placing or showing them separately from the quick filters.

We replaced the Unread and Read tabs with a single toggle between Unread and All.

This creates a simpler mental model as most users primarily want to see what’s new, and occasionally browse everything. “All” covers both read and unread, avoiding confusion from too many overlapping categories.

It also reduces decision fatigue. With just two clear options, users don’t have to think about where a notification might be. It’s either unread or part of the full list.

These felt a bit different from quick filters. I first saw them more like view toggles, even though they’re technically still filters. That’s why I considered placing or showing them separately from the quick filters.

We replaced the Unread and Read tabs with a single toggle between Unread and All.

This creates a simpler mental model as most users primarily want to see what’s new, and occasionally browse everything. “All” covers both read and unread, avoiding confusion from too many overlapping categories.

It also reduces decision fatigue. With just two clear options, users don’t have to think about where a notification might be. It’s either unread or part of the full list.

These felt a bit different from quick filters. I first saw them more like view toggles, even though they’re technically still filters. That’s why I considered placing or showing them separately from the quick filters.

But later, I went back to a much simpler approach, removed anything that wasn’t the primary action and tucked the rest into a dropdown or toggle. Final version in the next section.

But later, I went back to a much simpler approach, removed anything that wasn’t the primary action and tucked the rest into a dropdown or toggle. Final version in the next section.

But later, I went back to a much simpler approach, removed anything that wasn’t the primary action and tucked the rest into a dropdown or toggle. Final version in the next section.

Putting it all together

Putting it all together

Putting it all together

Filtering Experience

Filtering Experience

Filtering Experience

We agreed on a stripped-down filtering setup. Just two quick filter categories: Important and Others, plus a single toggle to show only unread items.

We agreed on a stripped-down filtering setup. Just two quick filter categories: Important and Others, plus a single toggle to show only unread items.

We agreed on a stripped-down filtering setup. Just two quick filter categories: Important and Others, plus a single toggle to show only unread items.

Update cluster list

Update cluster list

Update cluster list

Expanding an update cluster

Expanding an update cluster

Expanding an update cluster

Clicking the footer of any cluster card opens a bottom sheet with all updates from that object for that day.

Clicking the footer of any cluster card opens a bottom sheet with all updates from that object for that day.

Clicking the footer of any cluster card opens a bottom sheet with all updates from that object for that day.

Empty states

Empty states

Empty states

I also considered the empty states. Included CTAs to ensure the user doesn't get stuck in that state.

I also considered the empty states. Included CTAs to ensure the user doesn't get stuck in that state.

I also considered the empty states. Included CTAs to ensure the user doesn't get stuck in that state.

Android flows

Android flows

Android flows

Since the design system and styles for Android are different, I designed the necessary flows for Android.

Since the design system and styles for Android are different, I designed the necessary flows for Android.

Since the design system and styles for Android are different, I designed the necessary flows for Android.

Dark mode!

Dark mode!

Dark mode!

I also created dark mode designs for all screens on both iOS and Android.

I also created dark mode designs for all screens on both iOS and Android.

I also created dark mode designs for all screens on both iOS and Android.

Behind the scenes

Behind the scenes

Behind the scenes

Using annotations in Figma to document Engineering QA

Using annotations in Figma to document Engineering QA

Next steps

Next steps

Next steps

I’d continue building on this project by strengthening the hook for the Updates page:

  1. Lock screen notifications: Improve push alerts to surface the most relevant info right on the lock screen.

  2. Prompting users to enable notifications: Since the Updates page is the key driver for return visits and staying in sync with the team, we should occasionally nudge users to turn on notifications if they’re disabled.

I’d continue building on this project by strengthening the hook for the Updates page:

  1. Lock screen notifications: Improve push alerts to surface the most relevant info right on the lock screen.

  2. Prompting users to enable notifications: Since the Updates page is the key driver for return visits and staying in sync with the team, we should occasionally nudge users to turn on notifications if they’re disabled.

I’d continue building on this project by strengthening the hook for the Updates page:

  1. Lock screen notifications: Improve push alerts to surface the most relevant info right on the lock screen.

  2. Prompting users to enable notifications: Since the Updates page is the key driver for return visits and staying in sync with the team, we should occasionally nudge users to turn on notifications if they’re disabled.

  • Priyank's work ethic, performance and diligence exceeded my expectations, and he would always happily over deliver on every project at Mizko Media.

    Michael Wong

    Founder, Designership

  • It is amazing how quickly Priyank can take complex problems and make them effortlessly simple, a talent and finesse that not all designers possess.

    Ram Budime

    CBDO, ShiftBits

  • Priyank is a great problem solver. I’m consistently impressed by his ability to take complex outlines and turn them into visually engaging designs.

    Stephen Wise

    Founder, DemandFlow

  • Even if the project was complex and early stage, Priyank demonstrated to me that he is a good problem solver.

    Julien Fischer

    Creative Director & Brand Consultant

  • Working on projects big and small, Priyank just puts the effort needed to get it of the ground.

    Denislav Jeliazkov

    Founder, UI Learn / Figura

  • I don't say this often... Priyank is a diamond in the rough!

    Spencer Scott

    Founder, Median

  • Without him both of my projects would be stuck in newsletter-only land. Already brainstorming what he can help me build next.

    Ryan Gilbert

    Publishing Workspaces + H1 Gallery

  • Priyank's work ethic, performance and diligence exceeded my expectations, and he would always happily over deliver on every project at Mizko Media.

    Michael Wong

    Founder, Designership

  • It is amazing how quickly Priyank can take complex problems and make them effortlessly simple, a talent and finesse that not all designers possess.

    Ram Budime

    CBDO, ShiftBits

  • Priyank is a great problem solver. I’m consistently impressed by his ability to take complex outlines and turn them into visually engaging designs.

    Stephen Wise

    Founder, DemandFlow

  • Even if the project was complex and early stage, Priyank demonstrated to me that he is a good problem solver.

    Julien Fischer

    Creative Director & Brand Consultant

  • Working on projects big and small, Priyank just puts the effort needed to get it of the ground.

    Denislav Jeliazkov

    Founder, UI Learn / Figura

  • I don't say this often... Priyank is a diamond in the rough!

    Spencer Scott

    Founder, Median

  • Without him both of my projects would be stuck in newsletter-only land. Already brainstorming what he can help me build next.

    Ryan Gilbert

    Publishing Workspaces + H1 Gallery

  • Priyank's work ethic, performance and diligence exceeded my expectations, and he would always happily over deliver on every project at Mizko Media.

    Michael Wong

    Founder, Designership

  • It is amazing how quickly Priyank can take complex problems and make them effortlessly simple, a talent and finesse that not all designers possess.

    Ram Budime

    CBDO, ShiftBits

  • Priyank is a great problem solver. I’m consistently impressed by his ability to take complex outlines and turn them into visually engaging designs.

    Stephen Wise

    Founder, DemandFlow

  • Even if the project was complex and early stage, Priyank demonstrated to me that he is a good problem solver.

    Julien Fischer

    Creative Director & Brand Consultant

  • Working on projects big and small, Priyank just puts the effort needed to get it of the ground.

    Denislav Jeliazkov

    Founder, UI Learn / Figura

  • I don't say this often... Priyank is a diamond in the rough!

    Spencer Scott

    Founder, Median

  • Without him both of my projects would be stuck in newsletter-only land. Already brainstorming what he can help me build next.

    Ryan Gilbert

    Publishing Workspaces + H1 Gallery