Zifeng Tian
Lead UX designer & Design Manager

Onboarding Redesign

for CloudOn - an iPad productivity app

Onboarding Redesign


CloudOn is a web-based collaboration tool that allows users to open, review and edit Microsoft Office documents on any computing device that has a Google Chrome or Apple Safari browser.

CloudOn integrates with cloud storage providers Box, Dropbox and Google Drive so that users can store and access Office documents from those services.

It had been acquired by Dropbox in 2013.

Define Pain Points

Requirements and Limitations

We have to ask users to connect their providers before opening or editing any documents.

We can’t have a social login feature at this moment (ex. Facebook login).

We want to encourage users to create documents after they sign up.


Forcing users to give us access to their cloud provider, without telling them why is a risk.

We have a really powerful app on iPad, and there are lots of features we want to educate users, do those all at the beginning will reduce users' willingness to learn.

Onboarding Redesign

User Interview

We invited users to come to our office, and do some tasks using our app. Of course, we asked them to “think aloud”, meaning they would tell us what they were thinking while achieving their goals.

We recorded all those tests with users approve, and then analyzed the behaviors, objectives, and attitudes to find and define problems.

Pattern Analysis

To understand the best practices that other apps using, I had done research on more than 20 well-known products. Then I analyzed each of them to find out what problems it solved.

Onboarding Redesign

Pain Points

Tapping on the “Login” button while trying to sign up, or the other way around.

Getting lost after signing up, and ask us “what should I do next?”.


User Journey

I mapped out the users’ steps to see how I could simplify their journey to help them finish signing in or up, also learn the value of CloudOn.

I had focused on four flows:

  1. New user use the app for the first time, to create a simple way solving the confusion between signing in and up;
  2. Potential users open the link from other users, to show value even before they sign up;
  3. Overall flow for onboarding, to find out all the education points;
  4. Flow for onboarding without signing up, to define the technical limitation.

Onboarding Redesign

New Login/Sign up page

In this new design, I had combined log in and sign up with one entry. This should help users by asking them to do a choice manually.

Onboarding Redesign

Onboarding example file

Right after signing up, I designed an example file, which will automatically open.

This is because the main value of CloudOn is editing those files on the iPad, which by then hadn't been offered by any other apps.

Onboarding Redesign

Education tooltips

I had interviewed users to get the most valuable feature for new users and define a universal tooltip way to educate them.

This is after the user seeing the onboard example files on purpose.

Onboarding Redesign

Other cases

I also defined the flows for other cases like forgetting the password or type in the wrong information.