Terabox (2010)

Terabox is Movistar cloud storage service, free for ADSL subscribers. Its first version was underperforming due in part to an over-complicated user interface. Telefónica I+D redesigned its web and created its mobile application interface.

What

We are always short on storage. No matter how large your hard drive is, or how many GB of music your mobile phone can hold, it is never enough. Furthermore, you want to access that content everywhere. We do not want to wait until we get home to watch our holiday’s photos again, or browse that document we’re working on. Cloud storage solves this, and Terabox is Movistar’s cloud storage service, free for its ADSL subscribers.

Terabox web application current interface
Terabox owes much of its current web interface simplicity to our redesign

Terabox was a nice (and free!) little service, but users were having problems interacting with it. Movistar asked Telefónica I+D (R&D) to redesign its web interface, while keeping the functionalities of the service. This also led us to create its mobile application.

My work

Terabox was being designed by Telefónica I+D Madrid UX team, but Movistar wanted to test several different approaches and our Barcelona UX team was invited to participate.

We started researching the current Terabox solution, while conducting competitive research on other similar products in the market.

At first Movistar just wanted to test our skills helping them shape the “album” functionality. I prepared a simple set of annotated wireframes (created with Balsamiq) that simplified the current interface and offered better feedback to the customer with contextual information and menus.

Balsamiq wireframe showing album managing page at Terabox
Our first wireframes were focused on interactions with the “album” functionality. We simplified the interface and added grouping, extra-feedback and contextual information to improve the interaction

These worked very well, and soon Movistar wanted to get our input on some other processes that were regarded as sub-optimal, like uploading files and playing multimedia content. We created a mid-fi prototype with Balsamiq (including some limited interaction), while sticking to the current interface with some minor changes.

Balsamiq wireframe showing uploading file indicator at Terabox
Next batch of wireframes started to look at the whole interface, introducing subtle changes
Balsamiq wireframe showing uploading file feedback at Terabox
Sometimes we used several similar wireframes to show minor details like how to offer feedback information on actions. They can be created quickly, once you have the previous wireframe, and help illustrating the importance of details in the final design
Balsamiq wireframe showing multimedia player at Terabox, allotting a big part of the screen to content
Regarding the multimedia player, our proposal focused on conceding most real state to content, while showing contextual information (depending on type of file) for items in the playlist

Movistar loved these and asked for more, looking for our ideas on the general web interface, and also looking for our input for a future mobile application. Now that we had their trust, we were able to suggest bigger changes to the interface, while owning the new mobile application design from the start.

Balsamiq wireframe showing our redesign proposal for Terabox interface with contextual actions
Once we had convinced Movistar about our skills we could suggest bigger changes, like layout changes and a contextual generic interface

We created an interactive prototype with Balsamiq that simulated different layouts depending on device’s orientation.

Balsamiq wireframe showing Terabox's mobile application in portrait view, showing item's details
We won the chance to influence Terabox mobile application from the start, and came up with these wireframes
Balsamiq wireframe showing Terabox's mobile application in portrait view, showing item's preview
Linking a couple of wireframes allowed us to show landscape mode, where previews are shown instead of details

What I got

  • Earned client’s trust by gradually suggesting improvements to current design, which allowed me to propose modifications to the whole service afterwards.
  • Experience on creating a mobile application based on a previous web design.