Interface Design Professor Jason Occhipinti Information and Interface Design LC4D @ Lindsey Wilson College
Chantal Livesay M.A. Interactive Design
Table of Contents Table of Contents. 2 Project Brief. 3 Project Info. 4 Research. 5 Persona. 6 Exporlation. 7-9 Phase 1. 10-12 Phase 2. 13-18 Phase 3. 19-22 Phase 4. 23-29 Phase 5. 30-35 Final Wireframes. 36-43 Conclusion. 44-45
Project Brief
Project Info: About Calibre 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.
Our Task: Improve the overall User-Experience You can do this by making the experience: •Easier to use •More intuitive •Simplifying processes and tasks •Improve aesthetics •Incorporate a visual hierarchy •Recall and rely on the principles that were discussed in the unit topics and apply these to your solutions.
Research
Persona
Exploration
For the Exploration phase of our redesign I drew out a site map to help show how Calibre was currently working. As you can see from the picture above, Calbire offered a lot of information. To me this was very confusing.
After looking at Calibre and making a site map to help better understand how it worked, I took some notes on the possible improvement and questions I had during exploration. •Purpose isn’t clear. Is it just for storage for eBooks or a purchasing site? •Too many choices. •Tool bar and naviagtion have duplicate functions. •Archive and Library differences? •Save to disk could be simpler. •Everything could be simpler. •User firendly? •Not very visually appealing •Could use pop up quick start tutorial.
Phase 1
For Phase 1 I redrew the site map, trying to make it more simpler for the users. Below is the new site map for Calibre
I also redesigned the HOME screen for Calibre. This is a rough sketch of my idea of how it could look.
Phase 2
For Phase 2 I redesigned the Installation screens and other screens. Below is the start screen.
This screen represents how long you have left for Calibre to download. Also included on it is a tutorial of how Calibre works you can watch while you wait.
New Home Screen
Tips screen that will pop up once Calibre is downloaded.
New Search Library Screen
Phase 3
Phase 3. Low Fedielty WireframesInstallation Screens and Site Map First Installation Screen with redesigned logo
Second Installation Screen
Site Map
Phase 4
Phase 4. Medium Feditilty Wireframes
Home and Tips Screen
In this Phase I added what would be included in the drop down menus. Below is the Home Screen with drop down menus.
Library and Catagory Screens with drop down menus.
Catagory with drop down menus
Metadata and Search Screens
Store and Store Search Screens
Phase 5
Phase 5. High Fedility Wireframes. Pictured are the Installation screens as well as the home screen. I moved the preferance, edit and help up to the tool bar rather than having an additional navigation bar.
Pictured are the Tips screen, Book Store screen, and the Library screen.
Pictured are the Catagory and Selected Book Metadata screen
Convert file to eBook Screen. News Screen. Add Catagory Screen.
Search Book Store Screen. Search Library Screen.
Final Wireframes
This is the final wireframes. I added a background a colors to make it look more like the final project I had in mind.
Installation Screens.
Home screen. The Tip screen would be an overlay on this screen.
Library Screen.
Catagory Screen.
Search Library Screen.
Book Screen. Search Bookstore Screen.
Book Stores Screen. Add Book Store Screen.
Add Catagory Screen. Upload file to Convert Screen.
News Screen.
Conclusion
In conclusion, after utilizing UX and UI Elements learned in this course, Information and Interface Design. I believe that I was able to redesign Calibre to a more user friendly application. I was able to improve things like the naviagtion, overall desgin, and simplicity. After many trail and error redesigns and making imporvements in each step, I believe that Calibre has been greatly improved for future users to utilize.
Calibre Redesign from Sketches, Medium Wireframs, High Wireframes and Comps.