boxnet

Sharing and uploading files on Box, a redesign

Sharing is core to the business of Box.net. The current application allows customers multiple ways to share files and folders of information in very powerful ways.

Updating registration
To get started with sharing, you’ll have to register. The current registration can be found here. I think with some small design updates, the process can be easier to complete and more intuitive.

  • Signup form is moved to the left, as this is the primary action on this page. I would argue you do not upsell customers at registration. This can happen contextually later in the experience.
  • Form is redesigned to have label on top of form field. This cuts down the visual noise of filling out the form.
  • Password requirements more explicit with a label and added the password strength control on the right.
  • Account details are cleaned up with a simple control to change storage. The sales phone number and request for more information is moved up the page and illustrated near the storage decision point.

signup_formAfter you register you land on the upload page are ready to share. Today, there are four ways to share -

  • Collaborators can be added and have content shared with them
  • Customers can select files/folders and add collaborators
  • Collaborators have access levels
  • Files and folders have access levels

Three different interfaces for inviting customers.

examples
When an error condition arises, the customer is taken off the screen and presented the error.

Screen Shot 2013-11-02 at 4.06.08 PM

A different error condition keeps user on the page, which is good, but is illustrated differently.

Screen Shot 2013-11-02 at 4.13.25 PM

Designing a simplified solution
I wanted to see if I could simplify the current sharing process by unifying the interfaces.

Organizing the information
First, I organized the functionality into objects, actions and properties. This way I could understand the commonalities and began to organize the data.

Some of the key user questions were - When collaborating, do people think of people first, then the things they want to share and then how they want to be seen? Or do they think of what they are sharing and then, whom do they wish to share it with?

photo-2

Sketching out the interface
Two alternative interfaces. Pen and paper was the quickest way to illustrate them. Feels that maybe people think of an email type metaphor – people first, then what you are sharing and how. I think there is also an opportunity to manage the collaborators on the same interface, simplifying the experience. Note the view/edit control and remove buttons below. Normally, I would be validating the design assumptions with users during the process.

photo-3 copy

Building wireframes
These will be modal windows driven from the share or collaborate buttons on the site.

  • The screens are split into four groups – collaborators, collaborator access, files (this is implied when selected from a file) and file/folder access type.
  • One use case I added is the ability to add people directly from either Outlook or another account type (found under the add + button). I can image in a business setting, I would spend quite some time cutting and pasting email addresses to share files.

share_folder

Share window when file is selected from an existing folder or file.

share_folder_defined

Error conditions would keep customers on the same window, so they can fix them and continue with sharing.

error_share

Integrating the models in the main file screen
Besides simplifying the process of sharing files, I think there is an opportunity to simplify the file page a bit.

  • Selection for files is on the left – the standard selection placement
  • Upload and Share actions are front and center
  • The upgrade button is highlighted slightly and links directly to the payment page. Today, there is a submenu that is an extra step.
  • The account information is consolidated under the user’s name
  • The right hand column is saved for promotional space or additional properties when a file is selected.
  • Under the view menu lives – gallery vs. list view, tags, as well as sub information displays which controls the information below the file or folder title.
  • More button is a submenu of every other action similar to what is displayed today.
  • Note: button labels in the wireframes are indicators of functionality. They may be buttons, icons or text when visual design is applied.

folder

When the folder control is selected, more actions appear and apply to the folder of items.

checked

When files are uploaded, a progress indicator is displayed next to the file being uploaded.

download

It appears that the system today checks the file type, file size and whether the connection is timed out. Since uploading files seamlessly is critical to the business, if there are ways a customer can speed up the upload, I would propose show them a message. (Shown is one example and not sure if it would actually speed up the upload.) This same message placement would be used for errors and confirmation of uploads.

msg

In the case where the system has timed out, similar to what happens today, I would present a popup message. This would automatically check the connection and give the user the ability to stop it while keeping them on the upload screen. When confirmed, the user would be taken back to the previous window.

popup

One visual direction with the cleaned up design and one with icon and text buttons. Text makes the design clean, but lacks some personality and emphasis on the important actions.

box_screen_screen.fw

box_screen_screen_icon_header.fw

Applying these changes to Box would be a super fun project. The application is very powerful and feature rich and with a bit of simplification, the process of uploading and sharing files can be even more compelling.

Read next: eBay shopping experiences