Designing a coherent cross-platform experience becomes increasingly challenging the more platforms it's available on. Mendeley’s reference management app is available across Windows, Mac, Linux, iOS, Android, and the web.
Mendeley's users are researchers and students who collect and curate collections of academic literature in personal cloud-based libraries. Mendeley lets them easily find, read, annotate, and cite the work of others while writing their own dissertations or journal articles.
In this piece, I’ll try to give you some insight into a recent conceptual redesign of Mendeley's desktop and web apps. We wanted to create a consistent experience across the these apps, while also aligning them with the iOS and Android apps.
Mendeley's existing Desktop (left) and Web (right) apps pictured below have some similarities, but you could be excused for thinking they were different products by different companies. They both share a similar 3 column design, and have a few naming similarities, but that’s about it.
We wanted a new design that could be implemented on both desktop and the web with only minor differences in the UI where necessary.
Mendeley is a professional productivity app for research. This means we are aiming to fit visually alongside products such as Web Browsers, Email apps, Photoshop, Office, etc.
The core interactions should be intuitive, and the UI shouldn’t call attention to itself. It should let the content of the library or the articles you’re reading take focus. We avoid using our Mendeley Red as a core colour of our UI in favour of greys and blues. The red looks striking in branding (our shirts are visible a mile away), but can look aggressive and overpowering when placed in a UI context.
We want the Mendeley web app to enable users to quickly and easily learn Mendeley’s basic features before committing to downloading and installing a heavyweight desktop app. With the new design, we’ve tried to make the interfaces of these two apps as consistent with each other as possible so that users have a minimal learning curve when they do use the desktop app.
Since each platform has its own unique capabilities and constraints, we did need to take into account some differences in the UI between platforms. I’ve outlined the thinking behind some of these differences below.
Browsers have their own tab systems built in, so it doesn’t make any sense to replicate this inside the web app itself. Mendeley Desktop however needed a space for tabs that didn’t disrupt the rest of the interface.
It can be useful to quickly navigate to previously viewed folders whether on the web or Desktop, so we had to create space in the Desktop UI for these elements. Browsers are the most used apps featuring back/forward buttons, and all browsers place them near the top left, so it felt natural to follow this pattern.
Visible brand placement on the web is important, as new users can land on our website without necessarily knowing the product. The Desktop software on the other hand has already been deliberately installed by the user. For apps like Mendeley, the app icon in the dock or task bar is sufficient branding for the core experience.
Mendeley Desktop can work while offline, and needs the ability to sync any changes that have happened while offline with the server periodically. The web app is online-only and all changes sync instantly, so we drop the sync button entirely.
In the last few years, flat design has stormed the design world, with iOS 7 and Google’s Material Design leading the charge. For all the good these style guides have brought in terms of forcing designers to simplify, and reduce visual noise, one side effect has been a lack of affordance on buttons.
With our audience and general desktop usability in mind, we chose to keep very subtle gradients and highlights to give our buttons a sense of depth, and translucent borders to give them more contrast against the background.
Mendeley Desktop’s old icons were a mess of various non-retina 16px icons, patched together from free icon sets. When we redesigned the mobile apps, we quickly found these icons didn’t scale, and had to rethink our icons from scratch to suit retina displays and the much larger icons used in mobile design.
When it came to the desktop and web versions, we wanted a more uniform look for the icons, and reduced the key elements of each of the mobile icons down to simple monochrome versions for use in the sidebar and toolbars.
Mendeley is all about citations. We support BibTeX citation, Microsoft Word integration, and copying formatted citations in a variety of citation styles.
Previously citations have been hidden away in right-click menus, but with this design we brought them to the forefront with a prominent Cite button.
The previous Mendeley Desktop interface was a Frankenstein’s monster when it came to search and filtering. To search the document list in the centre column, you needed to use the search box top right, while filtering the same list by author or tag is in the bottom left.
This made little sense, so for the new interface we combined keyword searching and filtering into one smart search bar, placed directly above the list it filters.
Typing something into the search box will always give the option to search for that string, however if the term matches an author name or a tag, they will be suggested in a dropdown below the search box.
These are just a few of the hundreds of elements, features, and use cases that need to be taken into account for a redesign of this scale, and this is far from the end of the process.
Going forward there is bound to be prototyping, testing, development, and a lot more iteration.
Having aspirational designs like this can be a key part of getting stakeholders on board for such a large scale redesign, and also serves as something for the development team to aim for.
If you'd like to collaborate on a project, whether it be from concept to completion or to help round out an existing team, please reach out and say hello.
I'm currently available for design projects.