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