Calibre UI Redesign by Russell Dow

INTERFACE REDESIGN

Professor Jason Occhipinti Information and Interface Design LC4D @ Lindsey Wilson College

Russell Dow M.A. Interactive Design

TABLE OF CONTENTS TABLE OF CONTENTS

2

FINAL WIREFRAMES 17

PROJECT BRIEF 3

PHASE 5 : HI-FI MOCK-UPS

18

PROJECT INFO

4

PHASE 5 : HI-FI MOCK-UPS

19

RESEARCH 5

PHASE 5 : HI-FI MOCK-UPS

20

PERSONA 6

PHASE 5 : HI-FI MOCK-UPS

21

RESEARCH 7

PHASE 5 : HI-FI MOCK-UPS

22

EXPLORATION 8

PHASE 5 : HI-FI MOCK-UPS

23

PHASE 1 : CONCEPTING

9

CONCLUSION 24

SKETCHES 10

CONCLUSION 25

PHASE 1 : LOW-FI WIREFRAMES

11

PHASE 2 : LOW-FI WIREFRAMES

12

PHASE 3-4 : SITEMAP

13

PHASE 3-4 : MED-FI WIREFRAMES

14

PHASE 3-4 : MED-FI WIREFRAMES

15

PHASE 3-4 : MED-FI WIREFRAMES

16

TABLE OF CONTENTS / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

PROJECT BRIEF

PROJECT BRIEF

Project objective:

Improve on the overall User-Experience Improvements to the UX (user-experience can and should include changes to the UI (user interface). These improvements should make it easier to use, more intuitive to the user, user focused content and should be easy to navigate. The UI should be simplified, clean and focused with improved aesthetics using platform savvy to help guide the process.

Calibre is a free and open source e-book library management application developed by users of e-books for users of e-books. It has a cornucopia of features. If you are a lover of eBooks, this is an indispensable tool. It allows you to transform PDFs into ePubs and eBooks that can then be viewed on the iPad, Kindle, Nook and more - and vice versa.

The design should take the strengths in Calibre and emphasize them while simplifying the delivery method.

Improve the overall User-Experience Easier to use More intuitive Simplifying processes and tasks Improve aesthetics Incorporate a visual hierarchy

PROJECT INFO / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

RESEARCH

RESEARCH

Persona

Primary Goals: eBook management: download | storage | purchase organize | cloud base backup e-Reader: preparation | transfer to device read ready | easy navigation e-Publisher: produce | update meta-data on existing conversion | self-publish

PERSONA / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

Calibre user research Calibre is a free and open source e-book library management application developed by users of e-books for users of e-books. The program is a cumbersome counterintuitive program that makes reading and storing eBooks more complex than needed. In my opinion the software is easily accessible, easy to download and to install but once open the interface is hard to maneuver through, it’s complex with little hierarchy making it hard to understand what the main focus is; is it an ePublishing software, a eBook reader, a content library, server – not sure?

Calibre update findings

ebook & e-reader statistics - 2015 E-Reader Market Share

Market Share

Amazon Kindle

41%

Barnes & Noble NOOK

17%

Apple iPad Tablet

10%

Android Tablet

14%

Other

18%

Calibre’s website states that it has a “cornucopia of features” divided into the following main categories:

eBook Market Share

Market Share

Amazon

60%

Barnes & Noble

25%

Library Management E-book conversion Syncing to e-book reader devices Downloading news and converting it into e-book form Comprehensive e-book viewer Content server for Online access to your book collection E-book editor for the major e-book formats

Apple

10%

Other

5%

Market Share by E-Reader Screen Size

Market Share

5” Screen

14%

10” Screen

66%

8.1” Screen

2.8%

9.7” Screen

16.6%

10.7” Screen

0.2%

Jay rated it:

“liked it bit too clunky, while great to manage a library, doesn’t conform to my taste of space saving and personal organization. Could be both more user focused and user friendly” statistic data source: www.statisticbrain.com

After reviewing the content and studying the sitemap it looked to me that the software can be simplified in what it is trying to accomplish. By combining and consolidating tasks, functions and options the software can have much better focused direction and can be competitively intuitive to other eBook readers and other management programs.

Main elements that need to change includes:

Creating visual hierarchy Consolidating functions Eliminating and simplifying functions Restructuring / reorganizing the site map

Visual Aesthetics & User interface Visual aesthetics and design need to be influenced by the user experience map and lend to the function of enhancing their experience with the software rather than design for design sake. I chose to give Calibre an updated look for which creates a hierarchy immediately and helps to inform the user about the next step in the process. The visuals are darker around the parameter with a lighter core allowing for the visual covers to pop. The use of assumptions help to clean up the page and lends to expediting the user to their goal.

RESEARCH / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

EXPLORATION

EXPLORATION

concepting Investigative phase

Investigative phase • Researching existing software • Explore “as a user” existing software • Re-design site-map • Diagrammed out new flow / UX • Simplify UX / UI

existing site plan

updated (simplified) site plan

PHASE 1 : CONCEPTING / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

SKETCHES

CONCEPT DEVELOPMENT

low-fi wireframes concept planning - Phase 1

In the initial planning and concepting stage I was able to explore, by elimination, how this software works and what is needed for this program to be clean and simple.

• Cleaned up the header and title “simplified” • Made the library more visual and common to what users know and expect from other ebook sites and stores • Took chunks of the information from the current page and integrated it into drop down menus (still too complex)

PHASE 1 : LOW-FI WIREFRAMES / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

low-fi wireframes concept planning - Phase 2

Phase 2 was another step in organization from a UX point of view. How does this application install? How can we better that experience? How can we eliminate steps to get to the eBook or publication?

• Organized/consolidated installation sequence • Updated branding • Further developed the steps to “getting” books

PHASE 2 : LOW-FI WIREFRAMES / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

med-fi wireframes development - UPDATED SITEMAP

PHASE 3-4 : SITEMAP / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

med-fi wireframes development - Installation screens

Install - 01: Welcome

Install - 02: selections

Phase 3 & 4 included development and multiple stages of mid-fi wireframes. This was the first opportunity to test, make improvements and to identify problems in the solutions.

Install - 03: installation

Installation Screen Improvements: • Ability to take the existing install screens from 4 screens to 3 screens by consolidation and elimination of information • Starting a visual language that will continue in the application further • Expedite the process by making everything clear

PHASE 3-4 : MED-FI WIREFRAMES / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

med-fi wireframes development

library (find books)

quick start (home page) Phase 3 & 4 also include further investigation on how to simplify the following screens: • Installation • Quick Start (Home Page) • Library (Find Books) • Store (Get Books) • Meta-data editing page

library (find books) - with meta-data pop up screen PHASE 3-4 : MED-FI WIREFRAMES / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

get books (macro-store load all locations)

store (get books] - thumbnail view

meta-data screen store (get books] - list view PHASE 3-4 : MED-FI WIREFRAMES / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

HI-FI MOCKUPS

FINAL WIREFRAMES

9

10

4 5

6

1

2

3

7

8

CALIBRE HOME PAGE (quick start) 1 Updated new brand logo

5

Drop menu for language selection

8 Next button (progress to next screen)

2 Installation button

6

Drop menu for your chosen device type such as iPad, Kindle etc.

9 Calibre - header

3 Cancel button 4 Drop menu for location selection for where to install Calibre on your computer

7

Back button (go back and if needed)

10 Installation progress - loader

PHASE 5 : HI-FI MOCK-UPS / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

1

5

CALIBRE HOME PAGE (quick start) 1 Book icon which drops down with

2 6

7

8

restore, size, move, minimum, maximum and close

2 Updated new brand logo 3 Hidden affordance in the side task-

bar - when expanded gives options to go to your library or to a store of your choice to get books

4 Quick buttons for Library and Store 5 Use of pattern affordance for standard

placement of task and drop downs

3

6 Quick search 7 Toggle going back and forth from

list to thumbnail using metaphoric affordances

4

8 Sort by categories such as author,

publisher, genre

9 Thumbnails of books in my library 9

PHASE 5 : HI-FI MOCK-UPS / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

CALIBRE library (find books) 1 Title and author information

4

5

6

2 Ratings of how you rated it 3 Cloud icon indicates that the book

is not in your local library but can be downloaded from your cloud

4 Use of the gear to open up more

detailed meta-data window that can be edited

1 2

5 Library / Store headline 6 Slide bar to continue to browse

3

Meta-data window

PHASE 5 : HI-FI MOCK-UPS / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

CALIBRE Get Books page 1 Full Title fades out to indicate a longer

title beyond the text box

4

5

6

2 Ratings pulled by multiple stores 3 Compare Price brings you to a window

to pick multiple stores to compare pricing on that book

4 Click on any thumbnail to expand it to

a larger window

1

5 Get Books headline title

2

3

PHASE 5 : HI-FI MOCK-UPS / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

CALIBRE Store list page (get books) 1 Library Icon and menu (closed when

grey)

1 2 3

6

7

8

9

2 Stores Icon and menu (open when

white)

3 All my chosen stores, magenta outline

when chosen, can pick one or multiple

4 Add Stores button 5 Close expanded task bar 6 List view option for books per store 4

7 Indicates the chosen store (source) of

where to buy the books from

8 Sample button to view a select

sampling

9 Get Book button which brings you to

the shopping cart window to purchase and download the book

5

PHASE 5 : HI-FI MOCK-UPS / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

CALIBRE Store thumbnails (get books) 1 Library Icon and menu (closed when

grey)

9

1 2

2 Stores Icon and menu (open when

white)

3 All my chosen stores, magenta outline

when chosen, can pick one or multiple

3

4 Add Stores button 5 Close expanded task bar 6

6 Full Title fades out to indicate a longer

title beyond the text box

4 7

8

7 Price indicates the price from the store

or in the case of multiple store views will be the lowest price available

8 Get Book button which brings you to

the shopping cart window to purchase and download the book

9 Store logo as the Headline

5

PHASE 5 : HI-FI MOCK-UPS / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE

CONCLUSION

CONCLUSION

Process Conclusion After a full exploration and process I believe that I reached an effective and simple solution for the user experience for this project. I reached this through UX Interactive Design Process which included initial research, ideation, exploration in the achievable, function, wireframe and hi-fi mock ups.

concepting | low-fi wireframes

low-fi wireframes

cleaned up mid-fi wireframes

hi-fi wireframe

Next phase would be to prototype and to do a full round of user testing.

CONCLUSION / INFORMATION AND INTERFACE DESIGN / LC4D @ LINDSEY WILSON COLLEGE