- PROTOTYPE -

During this process, there are many challenges encountered and lots of iterations involved. Here below we show three of them.

The landing page

I. DARK HERO IMAGE WITH BLACK WORDING

We tried a few hero img here but the problem was the wording was too hard to read on a dark background. So, I added a transparent white box between the layers of background and wording to make it more visible.

II. INCONSISTENT STYLE OF ICONS

Also, the icons I used in the middle of the page do not look unified. Therefore, I spent some time to look for some icons with a similar feeling, change their colors to my primary color and unify the thickness of the icon to solve it.

III. CONFUSING DESIGN OF BUTTON

For the sign in page, the sign-up button should have a border surrounding it, referring to the digital wireframe. However, participants of the prototype test reflected that they got confused about the current page they were in. It did not look like an option which they can switch to the sign-up page, or vice versa. Therefore, we changed the sign-up button to a subtle look with an underline to hint the user. Also, using upper case for the current page on the header makes the user understand where they are at.

SELECT A FILE

Action buttons pop up when the user clicks the file on the dashboard page. They can choose to share, download, move or delete. They can select more than one file at a time, or click the file again to cancel it.

Action bar pops up when the file is selected

SHARING A FILE

On the sharing screen, by default, it jumps to the frequently-used sharing method-generating the sharing link because we wanted to reduce the steps of clicking as possible. If the user wanted to share it to email, Facebook, Instagram or Twitter, they could refer to the buttons at the top.

The sharing screen

UPLOAD A FILE

The file uploading process is simple. All buttons are disabled until the user drag and drop a file.

COLOR IN DIFFERENT STATUSES

Not only color changes with the button status, but also applies to the field status. All the fields are locked, indicated with a gray background, until the user clicks “Edit” to update their account information.

Considered by the user behavior on mobile, color plays an important role here. From the survey, we learned that users upload files frequently, therefore we put the upload button at the bottom of the screen on the mobile version.

When the user select a file, there would appear a border around the file, then they can hit the “share” button at the bottom right.

If the user clicks “share”, the button turns into light yellow to respond to the user’s action and let them know they are on the sharing screen.

Select and share a file on mobile

- USABILITY AND PREFERENCE TESTS -

In the final round of usability test, we tested sign-in, sign-up, sign-out, upload, download, share, move, upgrade an account, update the profile.

The feedbacks are “CREATE A NEW FOLDER button is missing on the dashboard”, “MY PROFILE button is a bit outdated and not necessary” and “hope to create a sub-folder quickly while moving a file”.

Then, we added a “create a new folder” icon on the dashboard, so that this feature is not only limited while moving a file. Additionally, we created an optional form for the user to create a sub-folder at the same time while moving a file. On the other hand, we simplified the way of updating “my profile” by adding a pen icon next to the profile picture to allow the user to update it.

An optional form creating a sub-folder is created

PREFERENCE TEST I: TYPOGRAPHY

The difference of typography here is switching the font faces for the heading and body. Which one would you prefer?

100% of the participants went for the first one because the concern for the readability on a tablet, computer and mobile-the softer look would make it clearer to read. Also, they thought Montserrat looked modern and professional in a heading.

PREFERENCE TEST II: COLOR

Although 88% of participants go for the one with a blue pop-up box due to consistency with the theme color, we took the comments from both sides and decided to use the green one.

We skipped placing all the buttons on the top right corner as before since test participants reflected that it was annoying to go back and forth to find those buttons especially when they already scrolled down to select the files. Therefore, the color contrast or difference plays an important role to hint the user that they have selected the file and show them that they can do some actions with it.

Original wireframe of the dashboard

Another point is that the first button of “select” is redundant. Users should be able to select the files by just clicking them. These are the takeaways from the first round of usability test. For these reasons, the action buttons will only pop up when the user selects the file(s).

PREFERENCE TEST III: LOGO

We modified the logo with 2 more options for the usability test. We thought providing the name would make it easier for the audience to understand what the app is by just looking at it.

Three logo options

However, the assumption was wrong. The result of the usability test is, people would prefer the first one. Respondents said that it was to the point, unique and adorable.

We decided to use the icon only without wording because the branding tends to be friendly and casual. The other one would look more serious comparing to the cloud icon itself.