Library Catalogue

GoalSection titled Goal

Application Design I serves as an introduction to larger application design projects. Topic of this course was to pick an existing application and redesign it. To create the redesign, we extensively analyzed the existing application and its users, goals, strengths and shortcomings.

IntroductionSection titled Introduction

Stuttgart’s library has moved to a new building. Its online catalogue runs on numerous terminals inside and online and is a big part in each visitors borrowing experience. However it has remained the same for more than ten years as of Summer 2017 and could help users much more in finding the books they need.

AnalysisSection titled Analysis

The official catalogue features a functional main page. Users can search by typing into multiple text fields, depending on how they want to search. They can for example decide to search for a title or an author. After searching the results are presented on the left side of the screen. Results are ordered by relevance and are marked with an icon representing their form of media. They are labeled with title, author and date of release in on average three lines. The user can select an element and a detailed view opens to the right of the results. Here, users can view additional details of an element and see a list of all branches and the element’s availability. They can make a reservation or click on the authors name for example and get a new list with all things published by that author.

ConclusionSection titled Conclusion

Searching is currently not very flexible. Separate fields for each category are prone to errors. Results are hard to distinguish from another due to narrow spaces between elements and line spaces. Finally, the detail pages’ layout for media data is rather confusing.

The current catalogue functions only if the user already knows what they want to borrow and just need to reserve it or want to know its position. We saw the opportunity to add a new way of using the catalogue if users don’t already know what to search for. We wanted to give those users tools to find their desired media.

Additionally, we wanted to add to the overall experience by introducing many small quality of life changes. A more readable layout, easier login and reserving, a more useful search and better results among others.

RedesignSection titled Redesign

Our Redesign offers users better ways to discover new media. To achieve this, we use recommendations on the detail pages for related media and links to series and other types of media for the viewed piece. On the new main page, we use lists to display a wide range of recent and classic media.

With filters, users can browse results and get to the relevant content faster than before.

When they have found the result they were looking for, they can bookmark them and find them easier at another time or reserve all at once.

Process and TechnologySection titled Process and Technology

After our topic was set we began with analyzing the current catalogue and their current and potential user groups. We drew ‘reverse wireframes’ on top of screenshots to determine the various sections making up the catalogue. We did this for competing catalogues as well, ranging from other libraries to Amazon. As the next step we created an information architecture of several catalogues and distilled a new architecture that should make up our redesign. Lastly we defined sample use cases according to our persona.

Once that part was done we started with the screen design process and the visual design. We iterated from quick wireframes to the final screens.

My focus on this project was on designing the bookmark popups, detail page and search with Illustrator. We decided the best presentation method for our redesign was as an animation. This way we would be able to focus on small details like the hover effects and filter behavior. The animation was created with After Effects.

AboutSection titled About

This is a student project created during summer semester 2017 together with David Glock and Kai Wanschura. The Application Design II course was given by Jürgen Graef.

Documentation