University of Waterloo Library's Mobile Site

Introduction

One of the projects that I worked on during my time at the University of Waterloo, was a project for the University's library. It shaped up to be a mobile re-design and simplifying their search function.

Initial Research

When first presented with the client's problem, it was immediately clear to my team and I that more research and analysis was needed to really identify and understand the underlying problem. We were presented with a solution that the clients thought was the best, but we preferred to do some research of our own to clear that up. So we created a survey which we distributed to students of UWaterloo from various departments and faculties. We also gathered some of their analytics and together with the results from the online survey, we came to a very different conclusion than what the client had initially presented. Therefore, after consulting the client and getting their approval, we began to pursue the direction that we had found appropriate in order to solve that particular problem.

The Agile way

The course being about Project Management and specifically the Agile way, we decided to handle this project accordingly. So we planned the whole project, figured out what features needed to be worked on and what deadlines and milestones we should have. We divided it into sprints of one week each, in order to get everything done by the time the term would end.

Wireframes

After laying out our ideas on the whiteboard and settling on what features we needed to include in our solution, each one of us started designing their own wireframes. I used Balsamiq for the wireframes.

The one at the right is the proposed homepage of the Library's mobile site. We wanted to re-design it with the main focus being the search function so that it can be incredibly easy and simple for the students to search for and find exactly what they want with the least amount of effort. Also, the main objective of the re-design was to make it much more easier for students to find the desired book in the physical space of the library. We wanted to not only make it easy for them to search for books and journals, but also to provide them with a clear and understandable way to navigate through the actual library and get to where their book is, so that they can pick it up as quickly as possible without much confusion and hassle.

I retained the backbone and the essential features in the homepage, but made the search function more prominent and simple, so that a student can search for something right away, or explore the more advanced options as they like. I also incorporated the "Ask Us" feature under the Search bar so that it can immediately be used and not take additional space on the screen.

This is the screen that comes right after you search for something. It gives you sorting options and also lists all the findings in a card-like style, with the added feature of locating where exactly the book is in the library.

After clicking on the "Where is it?" button in the previous screen, the user is presented with some written directions on how to get to where the book is. Then, they have the option to see a map of the library or take a virtual tour.

This is what the user sees after tapping the "See Map" button. They also have the option to check out on the spot.

If they choose to check out with the book, they are taken to this screen that shows a description of the book and the option to search for new ones or find similar ones.

Final Designs and Presentation

The final designs of our solution were created in Photoshop, by one of my teammates, which we used to test out. The usability testing done was pretty successful and showed that our designs were intuitive and easy to use. So subsequently, we went on to present those to our clients.

Using Format