Why redesign
As an useful app that I valued, I hated its design excesses. And so as a part of maiden UI project I decided to redesign the app (Mac version) to the point of a decent MVP.
Objectives
- Simplify the app experience of the primary use-cases to make them simpler to identify and execute
- Learn to apply a design system/template (Apple’s macOS Design Guidelines in this case)
- Learn how to do the above using the Sketch app
macOS Design Template
As creating a design system was not one of the goals for the redesign, I decided to use Apple’s macOS Design Template for this redesign.
A Few Thoughts
“The purpose of calibre is to simplify management of your e-book library.”- calibre Quick Start Guide.
This not only justifies the first objective but generally provides the direction for the UX. I’ve made effort to reduce clutter as well as minimise decisions to be taken before getting something done. This is made possible concealing advanced attributes of a process behind a checkbox.
Scope
The scope of this redesign is only the part of main GUI when the ‘Enable Advanced Options’ checkbox is unchecked.
This means that if this redesign were to be implemented, the UI/UX would revert to the existing one once the advanced features checkbox(es) were checked.
- According to its creators, calibre consists of 3 functional groups: the GUI, some command line tools and additional GUI for eBook reading and eBook editing.
For the purpose of this redesign, I decided to take up the first, the main GUI of the application.
- Design of icons hasn’t been taken up in this exercise.
This is certainly needed but out of scope as the focus of this exercise is to redesign the workflows to make the app more ‘usable’.
Basic Workflows: Deciding the MVP
Installation
It is simple and straightforward, stays as it is.
Welcome Wizard
Simple, takes care of the basics; stays as it is (with the exception of the Advanced Features switch)
Monitor ongoing jobs
As per calibre’s Quick Start Guide, “the jobs indicator is one of the most important pieces of the GUI…” Needless to say macOS has a much elegant solution to this.
Organising the Library(s)
Adding books
Drag-and-drop as well as the Cmd+O shortcut work and this is consistent across apps in the ecosystem so decided not to touch that.
Editing book metadata
While there are several interesting features throughout the app (one of the reasons I love the app), they are implemented in a way that increases clutter and hampers discovery (the icons don’t help).
Finding books
This is such a great feature (set) that I was surprised when I discovered it, it is almost invisible in the clutter. This absolutely deserves to be a more centre stage feature.
Additionally, the implementation is great (one can search across formats, marketplaces and DRM status) while the design again leaves a lot to be desired.
Library management
Users can create and maintain multiple libraries through calibre. Seems like a great feature for multiple users to manage their own libraries. This has been retained but moved to the (reconfigured) Title Bar under the Library tab.
Converting book formats
This seems to me to be probably the most used feature, and well, it just works. It just works even with the seemingly complex UI, providing a ton of tools within it.
However since the most common use case would be to simply select a book and convert it from format A to format B, I decided to enable that without even opening a dialog. So there’s a quick convert ‘mode’ accessible on a right-click that does not even open any other windows.
Editing Books
This is probably the most power-user feature that also
Dealing with Devices
Accessing and changing books on a reader.
- Put an ebook in the device
- Remove an ebook from the device
- Ejecting the device
Viewing Books
Out of scope for this project.
Good-to-have feature on this would be: Book Preview
The Redesign — Et Voila!
Landing Screen
Menu Bar Items
Before & After
Here’s how the individual tabs look, the focus has been on making the title bar simpler and familiar.
Edit Metadata
Convert
Converting between formats would be a very obvious and often-used feature used by most users. Here’s the quick convert feature accessible on a right click.
Dealing with a device
A device (calibre lingo for any ebook reader) is just another library (albeit with possible ebook format constraints) at an external location.
Using macOS guidelines and taking a cue from iTunes, one can access a device from the “Device” button at the top left of the window. In case there are more devices/libraries connected that icon would become a dropdown menu listing the items.
Discovering Books
The Get Books feature is renamed Discover Books and occupies a more visible place in the app.
The UI of the feature set itself has been simplified to minimise decisions to be made and highlight the important ones that need to be made. Turning on the Advanced Search checkbox reverts the window to the existing interface.
Monitoring Ongoing Jobs
Fixed this by simplying using macOS design library components.
Last Word
- This projects marks my first attempt at creating/improving the user experience through UI.
- I also wanted to take a stab at using a Design Template (visual components of a Design System) in Sketch.
- It would be fun to redesign the whole thing so the output can be more coherant and consistent, leading to an overall great user experience.
- I look forward to any/all feedback on my first steps in this area.
