duration
5 weeks, January–March 2019
team members
Sarah Chu, Noya Dolev
My role
UX Design, UI Icon Design, UI Animation, Wireframing, User Research
Seattle Public Library Mobile App Redesign
For this class project, my team and I were tasked with improving the overall usability and visual design of the Seattle Public Library mobile app. The library is a complex system which provides the community with many resources and benefits. Current apps lack the organization needed to accommodate the needs of its visitors. Within five weeks, we researched, ideated, prototyped, and tested our way to a design proposal, targeting the resource-searching experience of library visitors.
Finding resources is a pain!
When searching for issues with the existing SPL mobile website, a feature that caught our attention was the ‘shelf map’ button, which leads to a physical map of the Seattle Public Library central branch, if that book or resource is available in that location. The button is fairly hidden, and we had not noticed it until a library assistant pointed it out to us in person.
Research
Primary research
Through observation and interviews, my team and I engaged with the physical library space as a method of generating ideas for improving the mobile app, and became interested in trends surrounding the activity of browsing the physical library.
Secondary research
In addition to familiarizing ourselves with the process of navigating a physical library, we dived into the existing SPL library app, as well as look at other city library apps to find what works well and what could be potential pain points to avoid in our future redesign.
Sitemapping
Through creating a sitemap of the current SPL website, my team and I were able to externalize and analyze the path by which visitors have to travel to access the various resources. It became more clear that our solution would need to reduce this complexity to ensure there is a faster way for users to engage with resources.
Research takeaways
Immersing ourselves in the library space, digitally and physically, helped us build deeper empathy for librarians and visitors. In the synthesis process, we anchored down research takeaways to better frame the problem:
Current library app interfaces are outdated and lack a clear informational hierarchy, resulting in friction navigating to different features and resources.
Visitor intent varies for person to person: some come with a specific book in mind, while others are more interested in browsing. In fact, some visitors are more interested in other library offerings such as events.
How might we design a library platform that empowers visitors to quickly and easily find desired resources?
Design principles
Accessible
Many different people rely on Seattle Public Library system for information and resources, so our design should ensure features are easy to find and navigate through regardless of ability.
Simple
Navigating the SPL website is overwhelming because the library offers so many resources, so our design should thoughtfully present our users with what is most useful, rather than a dense list of info.
Frictionless
People go to the library often for many different reasons, so our design should enable seamless transition as users interact with various features.
Ideation and flow mapping
With a framework in mind, we began sketching ideas for how to meet the identified needs of the Seattle Public Library patrons. And by annotating user flows over low fidelity designs, we could also anticipate various pain points to avoid.
Prototyping
Through several iterations, we created higher fidelity representations of our design explorations using Sketch.
User testing
We conducted usability testing to not only gain a better understanding of the needs of library patrons, but to validate the usability of our low fidelity prototype. We had our participants walk through the app, asking for their opinion on their experience along the way. Through this, we uncovered more design opportunities to assist their search experience, such as increasing the scale of certain book recommendations to promote a visual hierarchy.
Visual language
When considering how to best create an enjoyable library experience, we made sure to explore various different colors and typefaces in our redesign. The color choices ultimately nodded to the classic SPL blue, with a twist on typography by embracing a rounded sans-serif typeface.
Logical search
Remembering the previous searches and recommending new searches to ease cognitive load and promote a diversity of resources otherwise unnoticed.
Recommended books
Providing recommendations based on reading history enables fast and efficient browsing.
Details and shelf map
Providing helpful information and metadata to empower browsers to decide if they would like to check out. To further aid in finding the physical material, specific branches and shelf map expand to show detailed availability.
Evaluation and reflection
With so many different features available on the current SPL product, it was a challenge to triage which aspects of the redesign to target our energy towards. By framing our problem space to the navigation of resources, both on the app and in the physical library space, we were able to scope our project into a realistic and actionable prototype.
To help evaluate the success of this design, I engaged with some SPL librarians to gage the effectiveness and feasibility of implementing a multi-branch navigation system into the SPL product. While there was positive reception, I was still encouraged to improve the design further.
Moving forward, I would like to push the prototypes further by exploring:
Advanced orientation guidance through contextual UI, such as nearby street names, color coding, and landmarks.
Showcasing other desired physical resources to increase impact, such as printers, child play spaces, and study rooms.
Further integrate the map to existing features, bringing our existing recommendations into the map to bridge the two experiences into a seamless whole.
Account for movement resources, as librarians often shift their collections around, consider how librarians can edit the maps as shifts occur.
