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.
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 E-books are changing reader habits - USA Today Information and Interface Design | Lindsey Wilson College
4
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. User Testing conducted using Low-Fidelity wireframes for the software installstion process, find books and book metadata screens. Information and Interface Design | Lindsey Wilson College
8
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.
Kindle
iBooks
Information and Interface Design | Lindsey Wilson College
Nook
10
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
IDEATION
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
19
Information and Interface Design | Lindsey Wilson College
Metadata Screen
Book Reader Screen
Library Screen
Information and Interface Design | Lindsey Wilson College
20
21
Information and Interface Design | Lindsey Wilson College
22
Installation Screens
WIREFRAMES
MEDIUM-FIDELITY FINAL WIREFRAMES
Information and Interface Design | Lindsey Wilson College
22
23
Information and Interface Design | Lindsey Wilson College
Library
Store (List View)
Store
Metadata
Information and Interface Design | Lindsey Wilson College
24
25
Information and Interface Design | Lindsey Wilson College
26
BRANDING
LOGO
DEVELOPMENT
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
Information and Interface Design | Lindsey Wilson College
26
27
Information and Interface Design | Lindsey Wilson College
28
Installation Screens
COMPS
HIGH-FIDELITY SOLUTION DESIGN
Information and Interface Design | Lindsey Wilson College
28
29
Information and Interface Design | Lindsey Wilson College
Library
Metadata
Store
Book Reader
Information and Interface Design | Lindsey Wilson College
30
31
Information and Interface Design | Lindsey Wilson College
32
Concept Sketches | Low-Fi Wireframes
CONCLUSION
Medium-Fidelity Wireframes (Axure)
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.
High-Fidelity Comp
(UI modified based on user testing)
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
33
Information and Interface Design | Lindsey Wilson College