User Experience, Case Study, Open Source

Nextcloud - Designing in the Open

The Problem

Nextcloud is one of the most popular PHP projects on GitHub for developers to contribute and the most used open source, self hosted alternative to Dropbox or Google Drive. With that being said, the design at such massive scale is very engineering driven and hence, not a lot of importance is given to user experience. We aim at bringing design philosophy to Nextcloud, and other free software.

The Fix

We started off with paying more attention to components which could be a part of Nextcloud core (or server, as we call it) and could be used throughout the project applications to ensure consistency both towards visual as well as interaction design.

The All New Left Sidebar

Since most of the applications written on top of Nextcloud (Contacts, Calendar, User Management) had a left sidebar an integral part of their experience, we pulled out the sidebar entirely and redid its appearance to support most use cases. We also ended incorporating them in Files, App Management, Notes and many many more core applications. The purpose of the left sidebar, primarily, was to toggle views on the screen.

For example, in calendar the sidebar allows the users to switch between daily, weekly and monthly calendars and has actions specific to a particular calendar like sharing, editing or adding more calendars.

The News app uses the left sidebar to subscribe to different RSS feeds and introduces a folder structure to help you organise your news.

As the simplest use case, the left sidebar in the Notes app allows the user to add notes, favorite them and switch between them.

The files app uses the left sidebar to navigate between files shared, recent files, all files and favorite files. 

Note: We did this long before Dropbox. 🙂

The More Complex Right Sidebar

Some Nextcloud applications are fairly complex and needed much more than just a left sidebar to toggle views. For such applications, we introduced a right sidebar which is heavily customizable due to its support for tabs. The right sidebar is heavily used by the Calendar application to manage event data and the files to take care of sharing and much more detailed file information.

Event handling in Nextcloud Calendar from the right sidebar. The users can share events, add attendees to their events and make their events more descriptive.

 

The files app uses the right sidebar to check the activity on the folder / file, add comments and even share those files to other people.

Learnings

Design works in iterations and that being said, one needs to be pragmatic while contributing to a project that is developed in the open and is used by millions of people to keep their data private.

Also, designing out there on Github taught me a ton of patience because the designs I come up with are subjected to a lot of opinion on every level and dealing with that although is exhausting at times but extremely rewarding on the other side.

Team

When I started contributing to Nextcloud back in 2012 (it was ownCloud, back then) we were only a handful of designers and developers. Today, we are around 300+ developers and 50+ active design contributors. Each one of us has a very important role to play in the evolution of the project. I especially would love to thank Frank Karlitschek and Jan Christoph Borchardt for being those most awesome mentors and people I have had the honour to work with.