David Maish

Professor Jason Occhipinti | Information and Interface Design

David Maish | M.A. Interaction Design

CALIBRE E-BOOK MANAGER INTERFACE REDESIGN

TABLE OF CONTENTS

4 6 8 10 12 18 22 26 28 32

Project Brief Research User Testing Competitive Analysis Exploration Sketches Wireframes Branding High-Fidility Comps Conclusion

Information and Interface Design | Lindsey Wilson College

2

3

Information and Interface Design | Lindsey Wilson College

4

PROJECT BRIEF

CALIBRE

E-BOOK MANAGER

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.

E-books are changing reader habits - USA Today Information and Interface Design | Lindsey Wilson College

4

These above 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. The extent of the modification is limited to only 3 areas to keep the project manageable.

• Install (screens A, B, C ) • Find Books (screen D and E) • Book Meta Data (screen F)

GOALS

IMPROVE THE OVERALL USER-EXPERIENCE • Easier to use • More intuitive • Simplifying processes and tasks • Improve aesthetics • Incorporate a visual hierarchy

5

Information and Interface Design | Lindsey Wilson College

6

RESEARCH

PERSONA

PRIMARY GOALS

Shop for e-Books: The user can shop for e-books and import them into their library Organize Library: The user must be able to organize their library. Sorting by Author, Catorgory and Collections Edit e-Book Metadata: All e-book metadata information will be made editable Selected Search Online: The user can search selected online outlets for e-books Read e-Books: The user can read a selected e-book

Information and Interface Design | Lindsey Wilson College

6

7

Information and Interface Design | Lindsey Wilson College

USER TESTING PAPER PROTOTYPES

Paper prototype testing consisted of 6 separate interviews with 6 individuals. Two working mom’s, one single working female, two female high school students and one working male.

Names: User 01 Sarah User 02 Lisa User 03 Grace User 04 Sherri User 05 Mac User 06 Kaylin User Interview Process: I wrote down 3 tasks for the users to complete.

I created a set of Low-Fidelity wireframes for each user interface.

Each user was made comfortable in a distraction free setting.

I showed them the Calibre application.

I explained the scope of the project to each user making sure they knew this was a software redesign.

I ask each user to perform the tasks.

As the user touched the screen, I put the appropriate next screen in front of them.

I took notes on each user as they completed the tasks.

At the end of the interview, I asked for their feedback. I asked about their likes or dislikes and anything they might want to add.

Success/Failure rate for each task: User 01 Sarah 100% User 02 Lisa 100% User 03 Grace 100% User 04 Sherri 100% User 05 Mac 100% User 06 Kaylin 100% Notes: All of my users completed the tasks easily.

All users were computer savvy.

Only 2 users had ever used an ebook application.

Information and Interface Design | Lindsey Wilson College

8

User Testing conducted using Low-Fidelity wireframes for the software installstion process, find books and book metadata screens.

9

Information and Interface Design | Lindsey Wilson College

COMPETITIVE ANALYSIS Multiple ebook readers were researched to determine which one had the best overall user experience.

The goal was to see what each ebook reader offered and how I might better my UI redesign of Caliber. iBooks, Nook, and Kindle were among the top researched.

iBooks

Information and Interface Design | Lindsey Wilson College

10

Kindle

Nook

11

Information and Interface Design | Lindsey Wilson College

12

EXPLORATION

EVALUATION ROUGH SITE MAP

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 divided into the following main categories: • • • • • • •

Library Management E-book conversion Syncing to e-book reader devices Downloading news from the web 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 format

Information and Interface Design | Lindsey Wilson College

12

13

Information and Interface Design | Lindsey Wilson College

Information and Interface Design | Lindsey Wilson College

14

15

Information and Interface Design | Lindsey Wilson College

EXPLORATION COMMENTS

I think Calibre is a petty sweet concept. A free e-book management tool with tons of features. A problem with it though is that a lot of those features hit you right in the face when you open the app. Information Overload.

This makes Calibre confusing right from the start. Do I “ADD” a book or “GET” a book? The features are great, but I don’t think most people know what metadata and some of the other features are and may never use them.

I believe that these problems can be solved by cleaning up the user interface and simplifying the user experience.

SITE MAP I simplified the user interface by eliminating elements and focusing on basic tasks. Getting books, editing metadata and reading books.

Information and Interface Design | Lindsey Wilson College

16

17

Information and Interface Design | Lindsey Wilson College

18

SKETCHES

ROUGH SKETCHES

THOUGHTS, SCOPE AND FLOW

Installation Screens I wanted to show the users progress of the install visually, so I added a step-by-step progress bar.

For this iteration I have shown three screens for the installation process, but I believe it can be achieved with only two screens.

The first screen would be a combination of A & B and the second screen would be the final “Congratulations/Launch” screen.

Information and Interface Design | Lindsey Wilson College

18

IDEATION

19

Information and Interface Design | Lindsey Wilson College

Metadata Screen

Library Screen

Information and Interface Design | Lindsey Wilson College

20

Book Reader Screen

21

Information and Interface Design | Lindsey Wilson College

22

WIREFRAMES

MEDIUM-FIDELITY FINAL WIREFRAMES

Information and Interface Design | Lindsey Wilson College

22

Installation Screens

23

Information and Interface Design | Lindsey Wilson College

Library

Store

Information and Interface Design | Lindsey Wilson College

24

Store (List View)

Metadata

25

Information and Interface Design | Lindsey Wilson College

26

BRANDING

LOGO

DEVELOPMENT

Information and Interface Design | Lindsey Wilson College

26

While exploring branding for Calibre I tried to combine books, computer/technical, internet, global, etc. After multiple iterations, I developed a clean, abstract logo for Caliber.

Calibre logo

27

Information and Interface Design | Lindsey Wilson College

28

COMPS

HIGH-FIDELITY SOLUTION DESIGN

Information and Interface Design | Lindsey Wilson College

28

Installation Screens

29

Information and Interface Design | Lindsey Wilson College

Library

Store

Information and Interface Design | Lindsey Wilson College

30

Metadata

Book Reader

31

Information and Interface Design | Lindsey Wilson College

32

CONCLUSION

PROCESS

I have redesigned the Calibre E-book Library Management Application.

This was achieved through a complete UX Interaction Design process that included research, ideation, exploration, paper prototyping and usability testing.

Through this interactive process I refined my product from initial concept sketches to a final prototype launch deliverable.

I believe my design has improved the user interface for the product and will provide ease of use thus making for an overall satisfying user experience.

Information and Interface Design | Lindsey Wilson College

32

Concept Sketches | Low-Fi Wireframes

Medium-Fidelity Wireframes (Axure)

High-Fidelity Comp

(UI modified based on user testing)

33

Information and Interface Design | Lindsey Wilson College