top of page
Hide.gif
Delete.gif
Communcation.gif
HOMESCREEN.gif
Hide.gif
navigate thro notifs.gif
Delete.gif

Allowing users to communicate, share, and save within the notification system.

- Prompt
Community.gif
commerce website.gif
explain.gif

Notification

Understanding the visual design  

Button

Active card
The active card is designed to be the focal point of the screen. It gives the user the option to reply to the notification, either a message, commerce, or entertainment. 

Why yellow ?
Yellow is an
eye-catching accent hue that makes the active card to be the focal point of the screen.

Why buttons ?
Buttons are designed to help 
navigate users to respond to a notification 

Message 

explain.gif

Name 

time & logo

unactive card.gif

Message 

Title

Time & logo

Inactive card
The inactive card is designed to focus only on the content of the message. By applying bold type to the content only to emphasize it.

Why media ?
Including photos and videos within notification is an important part of the content, Which should have a good scale that allow the user to clearly see the media attached.

Why bold ?
To draw attention to content among other aspects in the notification, such as the app name, time, and sender name. 

The notifications direct us to apps that divert our focus away, where there is no way to respond to all type of notification within the notifications.

- Problem

Understanding the problem through research

Notifications tend to be an essential part of our life. Due to their importance in engaging users with highly curated content. Based on The Business of Apps website smartphone users receive up to 46 app push notifications per day. 

1- Unable to finish a task

A- Users get distracted 

Notifications take users to apps that demand their attention where users get distracted from their original task. 

B- Users get overwhelmed 

The number of notifications on one screen can get up to 9 notifications which makes it overwhelming . 

2- Visually not appealing

A- No focal points 

All Notifications tend to look the same which makes it hard for a user to distinguish a focal point.

B- Lack of hierarchy  

Content mostly gets lost in the notification especially if it is a media.  

Most people feel they can multitask but the brain is not meant to do so," Dr. Jackson says. "When you multitask you often do not give your best to both or all tasks you are juggling. And every time you switch back and forth from tasks you also get a rise in cortisol, a stress hormone."

Interviews meat 

"

It was crucial to do user research. The intricate workflows of the various user kinds and their interactions with notifications had to be detailed. To do so, I gathered as much information as possible from end-users to learn about their issues and how they see the notification's pain points.

A- Need to be responsive  

Interviewee found difficult to respond to all notifications they want in the same time. They need a responding system within notifcations to keep them foucsed.

Frame 41.png
B- Need to be simplified

Most interviewee struglle with number of notifcation in one screen as well as not seeing media content that makes them less intersed in intreacting with notifcations.

C- Need to be effective

Notification has limited features into it which makes it harder for diffrenent users to fulfil thier needs. Users need more functions such as saving, and sharing notifications.

Frame 1.png
Frame 3.png
Frame 2.png

User profiles

IMG_4066.HEIC

Aha moment

When working on this research may main goal was to make notifications user experince better and less annoying. Mostly we recive news that connect to our feelings through notification system. For example; reciving an acceptance letter from a college, reciving the news of getting promoted in a job, and much more moments that relate to us emotionally. Here I got the idea of connecting memories to notifications. Having the ability to save the important notifications as a memory would help the user to be more connected to the notification system. 

Build an experience that allows users to effectively respond to notification, with in the notification system

- Solution

Understanding the solution through final design 

Objective

Screen Shot 2022-04-21 at 11.21.57 PM.png
Bold

A design system that emphasizes the content of notification, that helps reduce the number of received notifications on one screen and provides a focal point.  

Screen Shot 2022-04-21 at 11.39.57 PM.png
Undistracted

Users can easily deal with notifications and finish one task at a time, such as replying and not leaving the notification system. 

Screen Shot 2022-04-21 at 11.43.18 PM.png
Connected

Giving the user the chance to be attached with notification system by providing multiple features such as memorizing and sharing the notifications. 

RESPOND

Funcation

Allow the user to respond within the notification system. 

Objective 

the function gives the users the ability to watch, reply, and shop within the notification 

Reply

Send

Find 

A notification

to respond !!

Action

Reply, Shop,

and Watch 

Shop

Add to cart

Watch

Like, dislike, and comment

User Flow

1- Respond  

A notification system that gives the user the ability to respond to all types of different notifications. For example; reply to a massage, watch a video or an image, leave a comment, and add to the shopping cart.

Communication 

Allow users to reply to message.

Communcation.gif
Entertainment

Allow users to watch and engage with media such as watching YouTube video and liking, disliking, or commenting 

Commerce

Allow users to see a product and add it to a cart 

navigate thro notifs.gif

Navigate through notification 

HOMESCREEN.gif

Recent notifications 

2- Slidebar  

Slide bar contains features that will enhance the notification user experience such as sharing a notification, memorize notification that make us happy such as getting accepted to college.

 community

Allow users to share notification.

Community.gif
Memorize

Allow users to memorize notification.

Memories.gif
Hide.gif

Hide notification 

Delete.gif

Delete notification 

Behind the scene 

Finding & exploring 

I started creating multiple layouts that would fulfill the solutions. I aimed for a notification system that is based on real-time from the most recent to the latest. The goal was to design a clear layout interaction that contains an active and an unactive status to grab the viewer's attention

Frame 42.png
Frame 42.png
Frame 42.png

Iteration

The seed

Because the cards are so important in this project, I concentrated on creating a meaningful and creative card design. I looked for inspiration for the cards in various apps as well as Swiss posters to emphasize typography, contrast, and grids.

Frame 4.png
Frame 5.png
Inspiration

The look and feel 

After finding the layout, I started looking for the looks and feel of the design by exploring more cards and typography. Which lead me to create a bold and simple design that makes it less overwhelmeing. 

iPhone 13 Pro Max - 364.png
Other iteration of different page
iPhone 13 Pro Max - 370.png
iPhone 13 Pro Max - 369.png
iPhone 13 Pro Max - 367.png
iPhone 13 Pro Max - 365.png
iPhone 13 Pro Max - 368.png
iPhone 13 Pro Max - 218.png
iPhone 13 Pro Max - 208.png
Picked layout

Reduction & Contrast 

I noticed that the screen looks busy and does not have typographical contrast. Therefore, I start to elminate things that are not improtnats such as inted of writing 4 minutes ago it bcaome 4 Min.

Screen Shot 2022-04-21 at 11.21.57 PM.png
Screen Shot 2022-04-21 at 11.39.57 PM.png
Screen Shot 2022-04-21 at 11.43.18 PM.png
Screen Shot 2022-04-22 at 12.55.24 AM.png
Screen Shot 2022-04-22 at 12.54.31 AM.png
Final screens 
iPhone 13 Pro Max - 364.png
iPhone 13 Pro Max - 218.png
iPhone 13 Pro Max - 367.png
iPhone 13 Pro Max - 365.png
Old iteration
Untitled-1.png

Promotional video

Conclusion

This notification system provides an effective way for users to respond to notifications in an organized and focused way. It also allows users to share notifications with other users who are interested in the same topics. The notification system will help users to memorize a notification that is meant to make them happy. Creating an environment that makes the users less distractive and more connected. 

Thank you

See you soon in other projects

Reference

Burghardt, Fabian. “Swiss Style Color Picker.” Swiss Style Color Picker | International Style Colors Scheme Palette, 26 Oct. 2015, https://fabianburghardt.de/swisscolors/.   

Hoareau, Guillaume. Craft Beer Awards. Promotional app to announce the craft beer awards winner. dribbble.com. 2020. https://dribbble.com/shots/6272500-Craft-Beer-Awards

 

Mingo, Ben. Ari_Extras. Awwward SOTD, Developer Site. dribbble.com. 2018. https://dribbble.com/shots/5498254-Ari-Extras.

 

Pandya, Varenya. Facebook Notifications. Redesigning the current Facebook notification page. dribbble.com. 2017. https://dribbble.com/shots/3075045-Facebook-Notifications

Steber, Carolyn. “9 Shocking Things That Happen to Your Brain When You Get a Phone or Email Notification.” Bustle. Bustle, May 16, 2019. https://www.bustle.com/p/9-shocking-things-that-happen-to-your-brain-when-you-get-a-phone-email-notification-17869135. 

Tyng, Chai M, Hafeez U Amin, Mohamad N M Saad, and Aamir S Malik. “The Influences of Emotion on Learning and Memory.” Frontiers in psychology. Frontiers Media S.A., August 24, 2017. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5573739/

W, Jack. Read app. Distinguish the interface with the form of cards. dribbble.com. 2017.https://dribbble.com/shots/3494564-read.

“The Swiss Grid.” The Swiss Grid. Accessed April 10, 2022. https://swissgrid.posterhouse.org/.

“9 Shocking Things That Happen to Your Brain When You Get a Phone or Email Notification.” Bustle. Bustle, May 16, 2019. https://www.bustle.com/p/9-shocking-things-that-happen-to-your-brain-when-you-get-a-phone-email-notification-17869135. 

 

bottom of page