Web App UX Design

File Browsing Interface

FileBrowsingWF.png

Issue addressed

The goal was to create a simple interface for our users to interact with their files through a complex system like SpiderOak. In addition to current features, we wanted a structured framework to allow the interface to be scaleable over time as we added more features.

My focus was to create an experience that was consistent across platforms and devices.

This meant merging the style and structure of the redesigned mobile applications to the web.

 
 
 

Approach

I approached the task by doing a competitor analysis of the top five file backup companies in our space. I wanted the user to have different ways of viewing their files, similar to that of a desktop computer.

Alternatives considered

Although we considered using ZURB's Fondation, for it's menu implementation, SpiderOak we used the Twitter Bootstrap framework for the web.

 
 

My role and work performed

As lead designer, I helped conduct brainstorming sessions which led to improvements of the interface, as well as ideas for future products and features. I designed several different layouts and UI elements, creating the storyboards and wireframes to explain the user-flow.

Tools used

  • OmniGraffle and Sketch - storyboards and mockups
  • Adobe Illustrator - vector graphics
  • Adobe Photoshop - bitmap graphics
  • Outlining apps - information architecture, structure of user-flows
  • Prototyping (web)-apps - simulate user-flows, find potential issues.

Tools used

I used a variety of tools from OmniGraffle for the storyboards and mockups, OmniOutliner for the information architecture and structure of user-flows and prototyping applications to simulate and find navigation issues. I employed Adobe Illustrator and Photoshop for the more advanced graphics editing.

Outcome

One positive business outcome was an increase in user signups for free and paid accounts. The design outcome was a domino effect. The redesign for one part of the web-app interface created the need to redesign our entire file browsing and account management.

Concurrent projects

Projects included the administrator management console for our enterprise customers, as well as SpiderOak's mobile application, which was in the development stage of production.

 
 
 
 

Lessons learned

I would have liked to have had a more elaborate beta program, bringing in individuals to interview and observe. Because of the need to protect anonymity and privacy of SpiderOak accounts, I would create a set of 20 (or so) dummy accounts, filling them with a sampling of random data. In addition, I would do more extensive A/B testing with alternative layouts and designs. Asking questions like:

What are the most used features?
How can we make them better?
Should we get rid of elements not as popular or make them serve better functions?

 
 


Example Mockups