Calibre eBook Manager Redesign

CALIBRE EBOOK MANAGER INTERFACE REDESIGN

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

Atif Nagi

M.A. Interactive Design

TABLE OF CONTENTS PROJECT BRIEF 3 RESEARCH 6 PERSONA 7 COMPETITOR ANALYSIS

8

EXPLORATION 9 EVALUATION 10 SITEMAP 13

SKETCHES 14 INSTALL SCREENS 15 FIND BOOKS BOOK META DATA

16 18

SOLUTION DESIGN 19 DESIGN PRINCIPLES 20 WIREFRAMES 21 INSTALL SCREENS 22 INSTALL SCREENS FIND BOOKS BOOK METADATA

23 24 27

HIGH FIDELITY 28 BRANDING 29 INSTALL SCREENS FIND BOOKS BOOK METADATA

30 31 34

CONCLUSION 35 22

PROJECT BRIEF

3

PROJECT BRIEF

44

Calibre is a free and open source e-book library management application

PROJECT BRIEF

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.

These represent screens captured from Calibre. Calibre is a fantastic open source program with lots of power, but its branding, interface and overall aesthetic needs improvement. I am going to redesign the interface (selected screens) and user experience. My goals are to:

IMPROVE THE OVERALL USER-EXPERIENCE • • • • •

EASIER TO USE MORE INTUITIVE SIMPLIFYING PROCESSES AND TASKS IMPROVE AESTHETICS INCORPORATE A VISUAL HIERARCHY

55

RESEARCH

6

PERSONA PRIMARY TASKS 1. Import eBooks 2. Organize eBooks 3. Edit eBooks metadata

GREG SMITH AGE OCCUPATION STATUS LOCATION

MOTIVATIONS

32

Chef

Incentive Fear Achievement Growth Power Social

Single Calgary, AB

TIER Professional ARCHETYPE Explorer Ambitious

Admired

Focused

GOALS

Keep his customer happy by serving them healthy and innovative recipes.

4. Search online for eBooks

FRUSTRATIONS

5. Export eBooks for multiple devices.

Greg tried multiple applications in the past but could not find the one which actually works.

He likes Calibre’s powerful functions but it’s not easy to use, intuitive, simple and visually attractive.

A Project by Atif Nagi

PERSONALITY Extrovert

Introvert

Sensing

Intuition

Thinking

Feeling

Judging

Perceiving

TECHNOLOGY IT and Internet Software Mobile Apps Social Networks

BIO Greg is a professional chef in a restaurant. He enjoys watching cooking shows and participating in the shows.

He collects recipes from all over the world. He reads about his industry and enjoys nightlife with friends and family.

“If I had a better way to organize my cooking books, pull it quickly and convert them for all of my devices more efficiently, that would make my workload so much easier to manage.”

Motivation: Happy customer and creating new recipes.

He is also planning to write his own book in near future.

He buys cooking books from all over the world and he wants to access them through multiple ways. He reads them on his computer, Tablet, and Smart phone.

77

COMPETITOR ANALYSIS

EXPLORATION

I researched multiple competitor eBook readers including Kindle, iBook, Kobo and Google docs. Analysis navigation, labels, features and options. Then I borrowed common knowledge, concepts, features and UI patterns from most industry leading applications. Simplify, customized and tweak them to utilize in Calibre redesign as per persona needs.

8

EXPLORATION

9

EVALUATION

EXPLORATION

Calibre have some cool features but its layout, organization, navigation, look and feel gives a feeling of information overload. As a first time user it is hard to understand the features due to poor organization, language and graphics.

If we combine and split few screen and use smart feature then we can almost make features available and invisible simultaneously. Also need user centered design and language approach. Need to convert tech terms to day-to-day simple language.

It lacks basic design principles i.e. Simple, Clear, Focus, Proximity, Forgiveness, and Wayfinding. My goal would be to resolve these issues in Calibre redesign.

10

EXPLORATION

Calibre have some cool features but its layout,

From organization, layout perspective I might use aa navigation, look and feel gives combination of horizontal and vertical feeling of information overload. As a first time user menu. I could only fully understand the it is hard toof understand the features due intro to poor functionality software through video.organization, There is alanguage need to andintroduce graphics. stepby-step instruction for first time user.

Help should be more accessible for user.

If we combine and split few screen and use smart

To explore it further I would use feature then we can almost havelike maketo features a library and/or a physical bookstore available and invisible simultaneously. Also need experience metaphor to connect it to the centric design and language Need user. Iuser would also explore otherapproach. forms of librarytobased iTunes,language. iPhoto, convertsoftware tech terms like to day-to-day iVideo and iBook etc. Adobe bridge is also a good resource to study metadata It lacks basic design principles i.e. Simple, Clear, and output process.

Focus, Proximity, forgiveness, and Wayfinding. My goal would be to resolve these issues in Calibre

11

EVALUATION

EXPLORATION

12

SITEMAP

EXPLORATION

I simplified the hierarchy information of the application by focusing on basic tasks i.e. Import, Organize, Edit, Download and Export books.

13

EXPLORATION

SKETCHES

14

INSTALL SCREENS

EXPLORATION | SKETCHES

SCREEN A, B & C

I wanted to make install process simpler from current Calibre screens so I combined A and B screen together. Used search drop down with commonly used default setting for intuitive experience. I kept screen C for feedback and learn more by watching demo or launch Calibre.

15

FIND BOOKS

EXPLORATION | SKETCHES

SCREEN D 1 4 1 2

2 3 4

3

4

I applied basic principle of “simplicity” 20-80 rule to simplify navigation, features and options. I “focused” on primary tasks of my persona i.e. add Books, get Books, contextual menu to edit book metadata, organize through filters and rating. Applied pattern affordance through search box pattern.

16

FIND BOOKS

EXPLORATION | SKETCHES

SCREEN E

1 3

2

1 4 2 3

4 5 5

I cleaned up the “Get a Book” screen by applying consistent visual hierarchy approach from My library Screen D. I used Linked-in style hamburger search with drop down search option for a clean look. Introduce compact store filter and bold CTA to download along with details of the book.

17

BOOK META DATA

EXPLORATION | SKETCHES

SCREEN F 1

2

2

3

3

Applied 20-80 rule to cut down the unnecessary options and focused on persona needs. User can edit basic book metadata, add comments, download and restore metadata. The edit icon will let user edit specific text area.

18

SOLUTION DESIGN

19

DESIGN PRINCIPLES

SOLUTION DESIGN

CLEAR

AFFORDANCE

CONSISTENT

The information of the application is straightforward & understandable with clear navigation, simple language (labels), and icons.

I used Explicit Affordance signalled action buttons by language, Negative Affordance in side menu and contextual menu, Metaphor Affordance by using a real-world book & menu icons as a metaphor.

The consistent use of navigation, labels, language, colors, icons and user interface patterns

FOCUS

PREDICTABILITY

WAYFINDING

The UI is singular and focused. It is intuitive because it focuses on basic tasks of persona e.g. Import, Organize, Edit, Download and Export books.

Users can determine the effect of future actions based on past interaction history i.e. Familiarity of UI pattern from other applications and consistent use of them throughout the application screens.

Users can find their way by landmark icons, well-structured paths, and less choices. They know where they are, what they can do, where they are going and where they’ve been through navigation.

20 20

SOLUTION DESIGN

WIREFRAMES

21

INSTALL SCREENS

SOLUTION DESIGN | WIREFRAMES

SCREEN A, B & C (ITERATION 1)

1

2 5

3

4

LAUNCH PROTOTYPE 22

INSTALL SCREENS

SOLUTION DESIGN | WIREFRAMES

SCREEN A, B & C (ITERATION 2)

1

2 4 3

I converted sketches into digital wireframe by using Axure. I simplified the screen A+B by removing “Library Location” & moved it to the preferences. Now its just easy 3 step install process. I also removed the progress bar from iteration 1.

23

FIND BOOKS

SOLUTION DESIGN | WIREFRAMES

SCREEN D - MY LIBRARY 1

2

4

3 1

Expandable menu.

2

Hamburger search menu (Linked-in Style).

Search by Author, Title, and Keyword.

3

Filter; sort by Recent, Title, Author and Format.

4

Contextual menu, shows options to Import Metadata, Edit Metadata, Convert book format, Delete a book or format.

LAUNCH PROTOTYPE I converted sketch into digital wireframe and start adding more details e.g. filters and contextual menu options. I also played with rating and book format, reversed their order from initial sketch.

24

FIND BOOKS

SOLUTION DESIGN | WIREFRAMES

SCREEN E - GET BOOK 8 5

5

Expanded menu.

6

Suggested books; the application suggests books based on collection, previous behavior patterns, and new arrivals.

7

Store selection filter.

8

Filter; sort by Price, New Arrivals, Best Seller, Title, Author, Format, Store, and Country.

9

Auto generate content on scroll down.

6 7

9

LAUNCH PROTOTYPE

I added few more details in book area i.e. title, author name, source, review, rating and format as compare to concept sketch. I also added a sample button, removed pagination and replaced it with auto generate feature.

25

FIND BOOKS

SOLUTION DESIGN | WIREFRAMES

12 10 11

SCREEN E - LIST VIEW 13 10

Expanded menu.

11

Store selection filter.

12

Filter; sort by Price, New Arrivals, Best Seller, Title, Author, Format, Store, and Country.

13

List preview button.

14

Search result list preview.

15

Auto generate content on scroll down.

14

15

LAUNCH PROTOTYPE

I created an extra wireframe of list view to show how book feature will appear in list view. I summarized book details in a row by removing thumbnail but kept most of the features.

26

BOOK METADATA

SOLUTION DESIGN | WIREFRAMES

SCREEN F - METADATA 14

14

Edit text field; once user click edit icon. It will change it to edit able text field.

15

Add comments.

16

Download metadata.

17

Restore metadata to previous versions.

15 16 17

LAUNCH PROTOTYPE

Metadata wireframe is same as concept sketch.

27

SOLUTION DESIGN

HIGH FIDELITY COMPS

28

BRANDING

SOLUTION DESIGN | HIGH FIDELITY COMPS

LOGO DEVELOPMENT

ALIBRE Calibre logo Logo ideation

I started my research by exploring books and library symbols. After multiple iterations I used “C” as a book cover and text “alibre” as book pages to create a new Calibre logo.

29

INSTALL SCREENS

SOLUTION DESIGN | HIGH FIDELITY COMPS

SCREEN A+B & C

I used neutral grey color tones so that user can focus on primary tasks. I also Introduced brand personality through wood texture inspired by traditional wood library bookcase. I used pattern affordance for search box, drop down filters, and view buttons. Also used metaphor icons with explicit text for side menu options and applied consistent branding to “My Library”, “Get a Book”, and “Book Metadata”.

30

FIND BOOKS

SOLUTION DESIGN | HIGH FIDELITY COMPS

SCREEN D - MY LIBRARY

1 2

5

4

6

3

1

Designed new “Calibre� logo.

2

Introduced wood texture in expandable menu for wood library texture metaphor.

3

Introduced icons for intuitive user experience.

4

Hamburger search menu (Linked-in Style).

Search by Author, Title, Keyword

5

Filter; sort by Recent, Title, Author and Format.

6

Toggle button to switch view i.e. thumbnail and list view.

7

Book detail; Book name, author, rating and formats.

8

Generic book cover (Incase book metadata does not have cover image)

9

Contextual menu; Download Metadata, Edit Metadata, Convert book format, Delete a book or format. Introduced icons for intuitive user experience.

7 8

9

31

FIND BOOKS

SOLUTION DESIGN | HIGH FIDELITY COMPS

SCREEN F - GET A BOOK 1

2

3 4

5

1

Thumbnail view button.

2

List view button.

3

Search result area. By default it will show recommended books based on user’s previous searches.

4

Book detail; Book name, author, origin, reviews, rating and formats.

5

Sample preview button.

6

Download the book.

6

32

FIND BOOKS

SOLUTION DESIGN | HIGH FIDELITY COMPS

SCREEN E - LIST VIEW 1 3

4

5

2 6

1

Thumbnail view button.

2

List view button.

3

Search result area. By default it will show recommended books based on user’s previous searches.

4

Book detail; Book name, author, origin, reviews, rating and formats.

5

Sample preview button.

6

Download the book.

33

BOOK METADATA

SOLUTION DESIGN | HIGH FIDELITY COMPS

SCREEN F - BOOK METADATA

1 2

6

7

1

Selected book title.

2

Preview of selected book.

3

Edit rating & formats of the selected book.

4

Download latest online metadata.

5

Restore to original and/or last saved version by showing user version option.

6

Edit text fields icon.

7

Add comments text field.

3 4 5

34

CONCLUSION

35

USER CENTRIC DESIGN PROCESS

1. Initial Research

4. Competitor Analysis

2. Ideation

Concept sketches

5. Sitemap

Understating the depth of system

CONCLUSION

3. Persona & Task Analysis

6. Concept Evolution Multiple iterations

36

CONCLUSION

7. Design Evolution Multiple iterations

8. Interactive Prototype Usability testing

9. Visual Evolution Multiple iterations

A full UX interaction design process was explored in the Calibre Ebook Manager project from research, ideation, exploration, define, design, and prototype.

Result: Easier to use, more intuitive, simplified processes and tasks, improved aesthetics and incorporated a visual hierarchy. I improved the overall user-experience, effectiveness, efficiency and satisfaction through user flow interactions, intuitive UI, labels, and icons of the application, based on user-centric design principles, standards, and heuristics.

37