Hi-fi Prototype Link: http://share.axure.com/3WOXGE/Home.html
After we conducted several interviews with current users, we got some important findings, which help us find ways to improve the mobile site. But some design ideas are not suitable to the system according to feedbacks from mentor and other staff of libraries. It will be mentioned later in each part of the hi-fi prototype.
Because a mobile app has more possible functions and features than a mobile site, we decided to design a mobile app instead of mobile site. We redesigned most of the user interfaces to make it follow mobile app style. For the interface of the app, there are three parts: top navigation bar, which helps users navigate among pages; main content part, which shows related information; labels at the bottom, which provide users quick accesses to search, account and ask a librarian pages.
In the homepage, a search bar is placed in the top-center of the screen, which can draw users’ immediate attention on the page and reduce the efforts of searching. In the original mobile site, users need to click the Mirlyn Mobile button to go to the search page and search. The new design greatly improves the efficiency of searching. In addition, icons are used in the homepage to make it intuitive and of the style of mobile app.
Search Result Page
In the search result page, a cover image is added for each result to help users recognize the books they are looking for. There is a colored text at the bottom of each result to show the status of the book: green “in library” or red “unavailable”. Also, the page provides two kinds of views for different needs: list view and grid view. Besides, users can use sorting options to reorganize the result to what they want. The new design utilizes images and colors to better visualize the information.
In the detail page, we made two major changes. One is that an option of map view is available，with which users can find the nearest library to get the book they are looking for. The other change is on different versions of the same book. Actually, we had the idea to merge the different versions of one same book into one item in the search result page. However, from the feedbacks from staff of libraries, this design lacks feasibility with some technical and more importantly some logic problem – different versions may differ a lot in cover or even main content. So we decided to provide links to other versions in the detail page instead.
Since there is not mobile version of account page in the original site, we decided to design a new page for account. It contains all the components of the desktop site, and provides a user-friendly drop-down table. There is also a link to Ctools page in our redesign, which will be explained more in next part.
From our interview analysis, we found out some of the users are using MLibrary to borrow textbooks or other course-related books. And we got positive feedbacks from technical staff of libraries about the technical possibility of connecting Ctools to Mlibrary site. So we designed the course page to allow the system to retrieve the course information from Ctools and provide users with recommendations of related books.
We also designed other pages for the mobile app to better support our design as a whole. Check the link for those pages.