Livedrive - Desktop application redesign

Modernising the native desktop experience

Platforms: Native Windows & macOS desktop applications

Tools: User research, Comparative assessment, User testing, Balsamiq, Sketch, Invision, Zepplin

The challenge: Reassess and improve the overall architecture of the Livedrive native desktop application

TLDR: The Livedrive desktop application had added a number of features over the years without scaling design, which ultimately led to a poor experience and unusable application.

Creating a responsive design solution solved most of the issues identified in the research phase. This was tested and implemented with a new look and feel.

Context

The Livedrive desktop application was first designed in 2013, since then it has gone through several updates with new added features. The design and usability of the application was due for a major overhaul that would bring it up to date with modern usability standards and ensure a level of future-proofing.

You can explore the high fidelity prototype that was tested here.

In the last few years, the Livedrive desktop application has been upgraded with several features and added functionalities. However, the UI has remained the same; a restrictive rectangular window laden with features.

With each patch and update, developers struggled with the scaling of the UI, which resulted in many functionalities in one small window, without the ability to resize.

This quickly became one the core issues of the application.

To solve this challenge, I decided to first assess the application, identify the user pain points and redesign the layout based on user expectations – and to future-proof the app, ensure a resizable window would be part of the solution.

The current version offers an array of useful features in a tight package

Research

In the beginning, the team and I, made assumptions on the following pain points:

It was clear that even though this was a powerful product, the UI and usability was subpar to the point where it restricted the actual development of the application.

Through a collection of support tickets and earlier feedback. we already had a good idea of the issues that the desktop application faced. To collect more current and specific data, I conducted a user survey with both quantitative and qualitative questions to assess the state of the app.

The results suggested our assumptions were in line with the users’ pain points – UI Scalability, navigation and content hierarchy were key problems for the majority of our users. This was compiled in a lean report, which was shared with the wider team. And based on business, product and team roadmaps, we prioritise the list of pain points and fixes for the MVP.

Key pain points:

Example of what was important for the users

Prototyping

Wireframes

The wireframes created as part of this project aimed at fixing the core usability issues (e.g status, navigation) and the overall UI.

Turning the restrictive window into a resizable application window and adding modern design conventions solved most of the issues we uncovered during research.

First explorations of the new UI

Wireframing was a fairly straightforward task. It needed to include things such as: persistent navigation, different available file views and more accessible controls.

Information was now visible and timely, whilst the content was also restructured with options and features that were grouped together in a logical way.

The new UI window now had a minimum size, whilst giving the users the ability to resize the window.

Once the wireframes had gone through a few iterations with the team, it was time for the high-fidelity design.

Design

The new app design was based on the Livedrive Design system. With consistency across typography and UI elements, the application was branded to look as a part of the Livedrive product family.

To ensure the designs worked, I conducted a series of user tests that followed the journey of a user installing the application and running the first back up.

You can explore the high fidelity prototype that was tested here.

The UI follows the Livedrive Design Language with common OS conventions
Navigating through files and folders is now easier, with options more visible and a familiar tree structure.
Settings have been logically rearranged and nested under the right and expected hierarchy

Results

This was a challenging but a rewarding project. from the exploration and discovery stage to figuring out the finer details of building a desktop application.

The user testing results were all positive, with nominal pain points. The project was agreed to go into development.

It has been enjoyable as well to see a product that was really powerful yet limited by its own design, transform into a modern application worthy of today’s standards.

A future possibility? Dark mode of Mojave MacOS

I would love to see further implementations in the future, where we look into ‘detailed status’ a bit deeper and we further improve how we communicate with users. It would also be interesting to introduce a “dark version” that could really give another level of customisability to our Mac users.

Back to Case Studies