A redesign concept of the 
iOS Notification Center

Client: School Project
Role: UI Designer

For the project Mobile Design at Hyper Island we were given the task to redesign a feature or interaction pattern in a product of our choosing. The point of the project was to define a problem, come up with something better and to make our solution go viral. All in 4 weeks. My project team, consisting of myself, Jonas Jerlström and Friðgeir Torfi Ásgeirsson, chose to take on the iOS Notifcation Center. Take a look at the process below.

Initial Stage

After a bit of user research it became clear to us that not only do we ourselves rarely use the notification center, apparently not many others are either. We discovered that a lot of users feel like the notification center is often overloaded with information, the visual appeal is lacking and it is not making use of effective UX patterns. We decided to go with a solution based on the concept of cards, simply because it is a good way to compress and display information.

ios-notc-greybox2ios-notc-greybox2

Prototyping

After researching and sketching we jumped right into prototyping our concept. Using Framer Studio we created an interactive prototype that we tested on users.
The response to our prototype was very succesfull, the subjects could very easily understand the purpose of our solution and the navigation of it.

Final Design

After a succesfull round of prototyping we applied the final design to our concept. Certain similraties can be drawn to Apple's Passbook, from which we took inspiration from. With the massive amount of information the Notfication Center can get, we decided to use a matte color scheme and making use of opacity for a lighter feel.

Final Prototype

We made some tweeks to our prototype in Framer Studio and applied it with the final design. The result was a fully interactive prototype of our concept. It turned out better than any of us could initally imagine, very much due to an iterative and research based process throughout the project and the use of a powerfull prototyping tool.

Response

With a simple tweet and a blogpost introducing the concept, we ended up with over 20 000 impressions on Twitter, 140 000 views on Vimeo and 450 points on reddit. We also had our story covered by several tech blogs and news sites, including: TechnoBuffalo, CultOfMac, 9to5Mac, Gizmodo Japan, Yahoo Tech, Curved.de, MacLife.de, NPR, Popular Mechanics and The Tech Block.




Tools and Assets

 

Sketch
Professional digital design for Mac.

Framer Studio
Prototyping tool for designing UI, interaction and animation.

CoffeeScript
CoffeeScript is a little language that compiles into JavaScript.

 

iOS Human Interface Guidelines
The official Apple guidelines when designing for iOS.

"The End of Apps As We Know Them"
Excellent blog post about notifcations and cards from Paul Adams, VP of Product at Intercom.