Back

Rethinking the updates experience on DevRev mobile app

Rethinking the updates experience on DevRev mobile app

I chose to emphasize this project because it's the most in-depth one I worked on while at DevRev. I want it to show how I kept refining and improving a fundamental experience through many iterations.

I chose to emphasize this project because it's the most in-depth one I worked on while at DevRev. I want it to show how I kept refining and improving a fundamental experience through many iterations.

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 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.

Solving the biggest huddle — Notification clustering

Solving the biggest huddle — Notification clustering

Solving the biggest huddle — Notification clustering

The concept was to swap individual update entries with update groups, where each group would contain all updates related to one object or one bot.

The concept was to swap individual update entries with update groups, where each group would contain all updates related to one object or one bot.

The concept was to swap individual update entries with update groups, where each group would contain all updates related to one object or one bot.

Caption

Caption

Caption

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.

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 made two categories: Important and Others.

Updates can come in different types. To organize them and give users a list of the most important updates for them, we made two categories: Important and Others.

Updates can come in different types. To organize them and give users a list of the most important updates for them, we made two categories: Important and Others.

We noticed that with improved organization, it's important to offer better filters and views to quickly access the right type of updates whenever necessary.

We noticed that with improved organization, it's important to offer better filters and views to quickly access the right type of updates whenever necessary.

We noticed that with improved organization, it's important to offer better filters and views to quickly access the right type of updates whenever necessary.

Putting it all together

Putting it all together

Putting it all together

Filtering Experience

Filtering Experience

Filtering Experience

Marking an update as read

Marking an update as read

Marking an update as read

Expanding an update cluster

Expanding an update cluster

Expanding an update cluster

Small yet significant experiences

Small yet significant experiences

Small yet significant experiences

Lock screen notifications

Lock screen notifications

Lock screen notifications

I also considered the appearance of notifications on the lock screen. Here's how it appeared previously -

I also considered the appearance of notifications on the lock screen. Here's how it appeared previously -

I also considered the appearance of notifications on the lock screen. Here's how it appeared previously -

And here's how I redesigned it -

And here's how I redesigned it -

And here's how I redesigned it -

Empty states

Empty states

Empty states

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

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

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

Urging users to turn on update notifications

Urging users to turn on update notifications

Urging users to turn on update notifications

Once the user completes onboarding in the app, we prompt them with a notification permission screen. If the user dismisses the modal, we display a section in the updates page after a certain number of app sessions.

Once the user completes onboarding in the app, we prompt them with a notification permission screen. If the user dismisses the modal, we display a section in the updates page after a certain number of app sessions.

Once the user completes onboarding in the app, we prompt them with a notification permission screen. If the user dismisses the modal, we display a section in the updates page after a certain number of app sessions.

Android flows and dark mode

Android flows and dark mode

Android flows and dark mode

Since the design system and styles for Android are different, I also designed the necessary flows for Android, including support for dark mode in both the platforms.

Since the design system and styles for Android are different, I also designed the necessary flows for Android, including support for dark mode in both the platforms.

Since the design system and styles for Android are different, I also designed the necessary flows for Android, including support for dark mode in both the platforms.

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

Reflection

Reflection

Reflection

  • 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

Reads

COMING SOON

BENGALURU, INDIA

  • 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

Reads

COMING SOON

BENGALURU, INDIA

  • 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

Reads

COMING SOON

BENGALURU, INDIA