High-fi Prototype

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.

Detail Page

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.

Account Page

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.

Ctools Page

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.

Other Pages

We also designed other pages for the mobile app to better support our design as a whole. Check the link for those pages.


Low-fi Prototype

Low-fi Prototype Link:


The design problem is how to improve the user experience of using the Mlibrary mobile site/application. The most important criterion should be how efficiently and fast users could find the book they want. The criterion includes two parts:

  1. How can users do searching easier and find the book related to their search queries more correctly and quickly?
  2. How can users get the book from library more quickly and easily?

To solve these problems, we came up with many ideas, including:

  1. Place a search bar on the homepage of mobile site, so that users can easily recognize and use this major function.
  2. Add a cover picture to each result, so as to help users recognize and find the results they want from the list.
  3. Provide location-based search result (Map view as well as List view), so that users can choose to get the copy most close to them.
  4. Merge different versions of a same book together, so that users can quickly access equivalent choices without more effort (a new search or going further in result list).
  5. Keep track of the popularity of each book, and provide sorting by popularity in search results.
  6. Add sort feature in search page, providing sorting by popularity, date of publish and relevance (default).
  7. Develop a mobile version of My Account, since the current version is commonly used on mobile devices to check statuses but hard to use.

With these ideas, we developed our paper prototype by sketching and POP (Prototype on Paper, an iPhone App). We made three major changes, compared with the original mobile website:

First, a big search bar is added to the homepage. It provides users with one-step search, which is one step less than before. It is also much more intuitive and obvious than “Mirlyn Mobile” button (some uses do not realize its function before trying, according to our tests and interviews). It can greatly increase the efficiency of searching.

Second, cover pictures are added to each search result. Because there are always different books with the same/similar names, users may feel very confused and need to look up ISBNs or author names to determine whether those books are what they are looking for. According to cognitive science, visual memory is generally much better than verbal memory, which often makes cover pictures more memorable and recognizable than author names or ISBNs. So cover pictures for each book is a great help for users to recognize expected results. Moreover, the search result page provides users with a different view – grid view, which gives some users a better way to fit their visual searching habits.

Last but not least, the detail page, which shows the details of a specific book, adds a new feature: map view. Users can click the map view button to view the map, so as to find the nearest library for the books wanted.

Interview Findings and Recommendations

Primary Findings

1. There is no quick access to both the web-based and mobile-based Mirlyn site.

In most cases users have to search for Mirlyn’s site on Google before they get the access to it. It’s a common phenomenon that users cannot recall the full name of Mirlyn correctly, which increases the possibility of additional fuzzy query. The access issue results in more disappointment and frustration in the case of mobile site search.

2. The search result page is not well organized and the displayed information is not helpful enough.

The cover images of books and resources are not always available on the search result page, which makes it hard for users to discover their desired items and filter the search results according to their interests.
The search results suffer from serious classification and categorization issues. One or the main issues is, the poor integration of multiple versions of books. Based on the search results, different version of a particular book will be displayed separately in different rows, which leads to the confusion and disappointment of users because it’s hard for them to tell the differences among those books and usually those results are seemed out of order.

3. The login information is not outstanding enough to attract the attentions.

During the user interviews the users reflected that there is no log in bar in the homepage and the log in information on each page is not outstanding enough to attract users’ attentions. Nevertheless, login is necessary for many library service requests. Therefore, users always suffer from receiving the notification of login needed disappointedly.

4.     There is no available sorting options on mobile site

The users cannot sort the search results by published date, author and date added, which leads to the frustration to the web savvy users because they always sort the results according to their demand on the web-based site. The removal of this sorting function causes them to rethink about whether they should utilize the mobile site frequently.

1. Inputting more image data and adjusting the size the images in the search result page

The challenge of the information visualization can be overcome by inputting more images to the back-end database, and by making the images larger on each row of search results.
The issue with classification and categorization could be solved by the integration of multiple-version books and resources. If those books could be combined and integrated in an identical row of result, the users would find it convenient to browse all the search results and select a particular version that they prefer in a short time.

2. Integrating Michigan Mobile App with Mirlyn on multiple devices

The solution of quick access could be the integration of Michigan Mobile App with Mirlyn. Currently only Android users can get the access to Mirlyn from their Michigan Apps. If the development team could make some effort to revise the application on IOS system, a large number of students will benefit from it.

3. Applying a suitable color to the login button

A better way of displaying login button could be applied whether on the homepage or on each sub page. Otherwise, the system’s politeness and user friendliness will be jeopardized by the notification of login needed. Since login is necessary for most of library services, it would more appropriate if the system could make the login button more outstanding in order to gather users’ attentions once they need those services. If possible, apply a suitable color to encode the important information.

4.  Adding the sorting function to the search result page

To satisfy the need of sorting results, the sorting selection button should be added on the result page. The design approach is that, users don’t necessarily need to use the sort function when they conduct the search. Instead, they just have one more option to make best use of the mobile site.

Additional Findings:

1. After logging in, a full-size website instead of a mobile site page is shown, which forces users to zoom in repeatedly.

2. The important information about the expiration date of the borrowed book and charging policy is not easy to discover.

3. The “Get this” button is not obvious and the location information listed in the dropdown menu is not clear enough.

4. The definition of “Save to favorite” is vague and different users have different interpretations towards that functions, based on their experiences on social networks.

5. Users expect that the library system can make the connections with Ctools, thus make the course related book recommendation possible.

6. It’s hard for the mobile site users to enter the book information when conducting a search.

Project Plan

no. # Task Start Date~End Date
1 Initial Project Proposal Mid Dec 2012 ~Mid Dec 2012
2 Project Proposal Refinement 1/1/2013 ~ 1/10/2013
3 Interview and interpretation 1/10/2013 ~1/25/2013
4 Sketch 1/26/2013 ~2/1/2013
5 Lo-Fi Prototype 2/2/2013~ 2/8/2013
6 Hi-Fi version  1 2/14/2013~2/20/2013
7 Hi-Fi version  2 2/26/2013~ 3/1/2013
8 Final Report 3/2/2013~ 3/13/2013

Interview Design

Research Questions:
1. How current students utilize the online resources provided by MLibrary, on both desktop site and mobile site?
2. What are the motivations of using the MLibrary mobile site?
3. What are the positive and negative aspects of the current mobile site?

Targeted User: Mlibrary site current users (Desktop or Mobile site)

Three types of users:
1. only desktop
2. desktop & mobile
3. neither

Interview Questions:

  1. Do you prefer using MLibrary mobile site to web-based site?
  2. How often do you use mobile site?
  3. What motivates you to use the mobile site?
  4. What are the barriers of not using mobile site?
  5. Which aspects do you expect to improve?
  6. What are the features that you use most frequently? least frequently?
  7. What is your last experience using the mobile site? Are you satisfied? Why?
  8. Which parts do you find satisfying? Which parts do you find confusing/disappointing?
  9. Are you using any other similar library website?
  10. What are the features you want to include in mobile site? Which are not available right now.
  11. Do you often use desktop site? What do you use it for?
  12. What features provided by desktop site are not available on mobile site?