Zifeng Tian
Lead UX designer & Design Manager
Made with

Overlay System

for CloudOn - an iPad productivity app

Our app had been trying to communicate to our users with only one channel, called in-app growl. But as a productivity app, it has quite some information to share with, confirm or notify the user.

Understand the problem
Overlay System

Collect Triggers

In our app, there was already a lot of communication happening, so I collected them all and list them in one place. And I went through them one by one to find what was the differences, as well as what they had in common.

Overlay System

Pattern Analysis

I did research in all the well-know social and productivity products to understand the best practices, finding out what problems they were facing and how they solved them.

Define Pain Points

As a really feature-rich app, we had more than 100 triggers for all kinds of communication. However, all of them were using one type of UI and UX, which could confuse users easily.

We didn’t have any push notification to communicate with users when they were not using our app.

Due to some technical limitations, we couldn't build a notification center.

Some information calls unnecessary attention. For example, using a dialog to confirm use had saved one file as a favorite.

Sketch out ideas
Overlay System

A light way for communication

For more than half of the triggers, I found the information is just an FYI. They are still necessary, but should not slow down user behavior in any way.

Overlay System

Multiple notifications

Those are the most challenge part since we couldn't build a notification center.

All those triggers are the important ones, that shouldn't be missed by users.

I built this prototype for testing in a nearby coffee shop and got positive results.

Iteration for combined notification

During the user testing, I got questioned a lot for, what if I got too many notifications, is there any way to organize them in a way to help the users solve them faster.

Overlay System

Combine same type notifications

When the user got the same type of notification, for example, shared files. Those notifications will combine as one.

Overlay System

The behavior for combined notification

When the user typed on a combined notification, I need to define associated behaviors.

Overlay System

Detail animation and mockup

After the logic and UX had been agreed, I also delivered the spec for animation and mockup.