5303 PROJECT C:
Calibre E-book Manager Interface Redesign
Final Project Design Document
Lindsey Wilson College Professor, Jason Occhipinti December 11, 2014 by Venus M. Popplewell
5303 PROJECT C: 5303 PROJECT C: CALIBRE E-BOOK MANAGER
Calibre E-book Manager Interface Redesign Final Project Design Document
Index Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2 Content and Navigation Exploration . . . . . . . . . . . . . . .3 - 4 Refinement and Elimination . . . . . . . . . . . . . . . . . . . . . .5 - 6 Site Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7 Interface Solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . .8 - 10 Interface Refinement . . . . . . . . . . . . . . . . . . . . . . . . . .11 - 13 High-Fidelity Wireframes . . . . . . . . . . . . . . . . . . . . . .14 - 15 Final Design Comps Presentation . . . . . . . . . . . . . . . .16 - 25 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26
Introduction
5303 PROJECT C: CALIBRE E-BOOK MANAGER
Problem Calibre is a free and open source e-book library manage-
ment application developed by users of e-books for users of e-books. It has a cornucopia of features. If you are a
lover of e-books, this is an indispensable tool. It allows you to transform PDFs into ePubs and e-books that can then be viewed on the iPad, Kindle, Nook and more.
Calibre is rich with e-book management features, but
these features are difficult to discover and use because of
a poorly designed interface. The content represented
lacks visual hierarchy and organization. The current inter-
face creates information anxiety because of the abundance of unorganized features.
Solution My solution begins with the exploratory phase of the e-book application. After learning the Calibre interface and feature options,
I proceeded to sketch and wireframe solutions to improve the usability of the manager capabilities. The final comp
presentation is a result of modifications based on peer feedback.
2
Content and Navigation Exploration 5303 PROJECT C: CALIBRE E-BOOK MANAGER
Calibre is an open source e-book management application available by free internet download. The first
phase of the redesign was an exploration phase. This
included acquiring an e-publication from the internet
and then adding it to Calibre; allowing the designers
to also become the test users. In this phase we were
to download the application and document our interactions with sketches and diagrams.
Interaction Experience Installing Calibre was intuitive and there were no
barriers to success. Once the application was downloaded I experienced information anxiety. The program lacked an obvious point of entry and the
information hierarchy was difficult to determine – my
eyes did not know where to focus or how to begin
the interaction. The aesthetic layout was dated and
was reminiscent of a database interface from the early internet days.
Calibre is a powerful management system, but as new user, I had trouble understanding all it had to offer. Many of the editing and
converting features seemed unnecessary; options such as ‘heuristic processing’ and ‘structure detection’ were too advanced for a
new user to understand. The settings within each feature offered no user tested default option which would have given a new user a
starting point. Overall, the application had too many features for a beginner with no clear path to results.
3
Content and Navigation Exploration 5303 PROJECT C: CALIBRE E-BOOK MANAGER
Thinking on Paper Sketches were to developed to document the experience and offer new site map solutions.
The abundance of information and the confu-
sion it created is evident in the end result of the
diagrams.
Sketch: Three flow charts reimagining the management features of Calibre. Sketch: Initial Phase 1 exploration sketch allowed very little on the home page – three entry points (add books, get books and read books). This was an unrealistic reaction to the information anxiety experienced when reviewing the site.
4
Refinement and Elimination 5303 PROJECT C: CALIBRE E-BOOK MANAGER
Narrowing Scope and Direction A full redesign of Calibre would have taken more time than the semester allowed. Therefore, focus was narrowed to three operations: install, find/add books and edit metadata.
Low-fidelity wireframes were sketched to reflect a new direction with the application. These sketches represent a decrease in initial
content presented and better navigation due to a more sensible informational hierarchy.
Sketch: Three step, installation screens with intuitive usability.
5
Refinement and Elimination
5303 PROJECT C: CALIBRE E-BOOK MANAGER
Sketch: Improved homescreen with fewer points of entry and quick access to recently used materials. The concern in Phase 2 was to present less without losing important options and create a system for any user. There remained much to consider and evaluate when this phase was completed.
6
Site Map
5303 PROJECT C: CALIBRE E-BOOK MANAGER
A) Exploratory Site Map
B) Final Site Map
A visual representation of the relationship between pages was
needed to gain a better understanding of the navigation. There are
two attempts at a site map. The first (A) is based on the homepage sketch from the refinement and elimination phase. It was found
some of the features could be combined. A second site map (B) has
been produced to reflect the changes.
7
Interface Solutions
5303 PROJECT C: CALIBRE E-BOOK MANAGER
Low-Fidelity Installation Screens The presentation and structure of the site starts to
form as the digitally produced low-fidelity wireframes
are developed. The designs for the installation
screens are similar to the sketched wireframes.
8
Interface Solutions
5303 PROJECT C: CALIBRE E-BOOK MANAGER
C) Homepage
Low-Fidelity Home and Search Result Screens The real estate and the navigation on the
homepage interface (C) is not a large departure
from the sketch phase. However, a conventional
auto-complete search bar has been added to
search the Calibre library rather than the ham-
burger menu which provided no intuitive affor-
dance. The search bar also allows for a refinement
of the search categories: title, author, genre, tag
(changed to keyword), news and favorites.
The search bar results screen is represented on
screen (D). It’s an important diagram because edit-
ing and reading/viewing are possible from this screen.
D) Search Results
9
Interface Solutions
5303 PROJECT C: CALIBRE E-BOOK MANAGER
Find e-books from the internet
Low-Fidelity Find/Add and Edit Screens The feature to Find and Add books is revealed by a
hover/roll-over affordance offered on the main menu
navigation. This is demonstrated in later diagrams. The
editing feature now includes the option to remove a title.
Edit Metadata Find e-books from directory
10
Interface Refinement
5303 PROJECT C: CALIBRE E-BOOK MANAGER
Medium-Fidelity Installation Screens Medium-fidelity wireframes begin the refinement phase of the Calibre interface redesign.
Breadcrumbs were added to the installation screens to provide users forgiveness and a sense of space and location.
A new logo has been redesigned to strengthen
the overall aesthetics and brand of the application.
11
Interface Refinement
5303 PROJECT C: CALIBRE E-BOOK MANAGER
Medium-Fidelity Home Interface The home page interface provides the user with
intuitive points of entry in an easy to scan interface. The
recently added titles and books rotate on a carousel left
and right, and provide immediate gratification based on
recent behavior. The successful interface concepts of simplicity, user empowerment and clarity of communication have been considered in this interface presentation.
Medium-Fidelity Search Bar Results The auto-complete search bar results screen had one alteration in the medium-fidelity iteration. A scrolling
arrow was added in the event there are more titles to be viewed.
12
Interface Refinement
5303 PROJECT C: CALIBRE E-BOOK MANAGER
Medium-Fidelity Edit Metadata and Find/Add E-books
Add e-books from the internet
Iterations remained predominantly the same.
The edit interface was improved by adding forgiveness
with a clear button. Removing a book is also possible
from this screen as part of the edit feature. Titles can be
selected as a ‘favorite’ and become of part of that
refinement category.
Edit metadata
13
Add e-books from directory
High-Fidelity Wireframes
5303 PROJECT C: CALIBRE E-BOOK MANAGER
High-Fidelity iterations were provided to the Interaction Design
graduate co-hort and professors for peer review.
Home
Installation
Search Results
14
High-Fidelity Wireframes
5303 PROJECT C: CALIBRE E-BOOK MANAGER
15
Find/Add from web
Edit Metadata
Find/Add from directory
Hover/roll over main navigation affordance
Introduction
Introduction
5303 PROJECT C: CALIBRE E-BOOK MANAGER
5303 PROJECT C: CALIBRE E-BOOK MANAGER
High-Fidelity Final Design Comps Presentation 5303 PROJECT C: CALIBRE E-BOOK MANAGER
User feedback directed the final phase of the Calibre redesign project. I considered the comments made by my peers and professors and implemented some of the suggestions in the following final high-fidelity screens.
Aesthetically, all screens have been improved with a typography update and further refinement of the logo.
16
High-Fidelity Final Design Comps 5303 PROJECT C: CALIBRE E-BOOK MANAGER
Calibre Final Comp: Installation Screens The installation screens were improved by removing the bread-
crumbs. This navigation feature was added in the medium-fidelity
phase and became irrelevant with the addition of the installation
status bar and the navigation arrows.
17
Final Install Comp: Location
High-Fidelity Final Design Comps
5303 PROJECT C: CALIBRE E-BOOK MANAGER
All installation screens have been refined with small but significant aes-
thetic modifications. Colors have been improve and icons have been
changed. File open, close and minimize buttons have been added.
Final Install Comp: Device
18
High-Fidelity Final Design Comps 5303 PROJECT C: CALIBRE E-BOOK MANAGER
All installation screens have been refined with small but signifi-
cant aesthetic modifications. Colors have been improve and icons have been changed.
19
Final Install Comp: Success
High-Fidelity Final Design Comps
5303 PROJECT C: CALIBRE E-BOOK MANAGER
Calibre Final Comp: Find/Add and Edit Metadata A new search bar UI element improved the home screen. The pull down arrow was moved to the left.
Because of the option to pull down a refinement category, it was more intuitive for those options to appear next to the arrow. For example – Genre (category): UX Design (Keyword)
Final Home Screen: Search Library
20
High-Fidelity Final Design Comps 5303 PROJECT C: CALIBRE E-BOOK MANAGER
All remaining screens have been refined with
small but significant aesthetic modifications.
Final Find: Search Library/Search Bar Results
21
High-Fidelity Final Design Comps
5303 PROJECT C: CALIBRE E-BOOK MANAGER
Find/Add books from the web: the DRM availability
icon was moved to a more visible location.
Final Find: Search Web
22
High-Fidelity Final Design Comps 5303 PROJECT C: CALIBRE E-BOOK MANAGER
Final Find: Search Directory
23
High-Fidelity Final Design Comps
5303 PROJECT C: CALIBRE E-BOOK MANAGER
Pattern affordance added and user empowerment was provided
with an underline on the "Change Cover Artwork" element.
Final Edit: Metadata
24
High-Fidelity Final Design Comps 5303 PROJECT C: CALIBRE E-BOOK MANAGER
This high-fidelity comp addresses the flow of the homepage – the screen demonstrates the roll-over reveal
of the possible actions under the main menu items (ADD, EDIT and SHARE). The pattern affordance of a roll-
over action is used frequently in interface design and users will intuitively understand how to proceed.
Final Home: Hover/Roll-over Reveal Example
25
Conclusion
5303 PROJECT C: CALIBRE E-BOOK MANAGER
The opportunity to reimagine a feature rich, customizable ap-
My solution accomplished the objectives without sacrificing
introduction to the fundamentals of user experience. The key
homepage with intuitive options based on user behavior.
plication like the Calibre e-book manager offered a hands-on
concepts of a successful interface were considered as the role
of a test user was assumed during the exploratory phase.
Our task as designers and test users was to examine the pro-
gram in-depth and document our interactions. Once the ex-
ploration was completed, we were to take what we learned
and improve the overall user experience.
Calibre violates many of the fundamentals of user experience
design. The absence of visual hierarchy and the abundance of
information and options creates anxiety as new users attempt to function inside the application. The aesthetic appearance
application features. My first challenge was to create a simple From that point, my focus turned to simplifying the important features of searching, adding and editing books. Elimination
and refinement were key to a successful Calibre interface re-
design.
Aesthetically, the design was improved with a new logo,
scannable typography and clean UI elements. User feedback was a critical component in the high-fidelity phase and re-
sulted in an improved presentation. Overall, I consider the
new Calibre interface presented to be usable, without fear of failure, resulting in repeat users.
is not a barrier to use but its outdated design results in a
dissatisfying experience.
When developing the new solution following objectives were
addressed:
1. Make Calibre easier to use 2. More intuitive
3. Simplify processes and tasks 4. Improve aesthetics
5. Incorporate a visual hierarchy
26