The Seattle Public Library mobile redesign
Unsolicited redesign of a mobile app focusing on a new feature that works within existing brand guidelines and company vision.
Meg Durcan (User Research), Yara Rojas (Interaction design)
Pen & paper, Omnigraffle, Sketch, Illustrator, Photoshop
"Our mission is to bring people, information and ideas together to enrich lives and build community" - Seattle Public Library
The Seattle Public Library is a system of 27 branches providing resources for people across the city. The library offers a multitude of media such as books, ebooks, cds, dvds, podcasts, and articles. The library offers public computers, reservable study rooms, and hosts a variety of events throughout the year.
The Seattle Public Library’s current mobile application experience is not meeting users goals of interacting with a modern interface that offers clear direction for placing a hold on resources, renewing current resources, and storing library card information.
By modernizing the mobile application’s interface, simplifying features on the landing screen, and improving the navigation system, usership will increase and allow for a more enjoyable experience.
The Seattle Public Library mobile application consists of a menu of categories, which provide library patrons with a variety of services to enhance the library experience.
The existing navigation is extensive, totalling 12 categories.
Hamburger menu unnecessary
Users reported 3D clipart styled icons as feeling outdated
Navigation bar icons are stylistically different, suggesting incohesive design
EXISTING SITE MAP
Our user researcher conducted eight user interviews, three stakeholder interviews, and two contextual inquiries. The findings were compiled to create our primary persona, Rose.
Three users participated in a card sorting activity to group all existing application features into categories.
Repetitive and ambiguous category naming conventions such as "Catalog", "Text-only Catalog", and "Old Catalog" brought confusion
Main library functions ("Search", "Renew", "Holds") were not apparent due to volume of options
Multiple account logins and lack of clarity regarding various accounts, specifically the nested "OverDrive" application
"Special Collections" out of place for mobile application
Simplified navigation by removing unnecessary categories
One account to rule them all
Core library functions accessible from first screen
I compared five logos from multiple libraries across the country. I found that libraries with a modern responsive website used bold, simple branding to convey their name. Given the iconic architecture of the Seattle Public Library’s main downtown branch , I focused on the New York Public Library and the San Francisco Public Library because their logos utilized an iconic architectural feature of their main branch locations. New York and San Francisco’s library logos would serve as inspiration for Seattle’s logo.
Airiness, complexity, warmth, and modernity are conveyed by the Seattle Public Library’s architecture. The Dutch architectural firm that designed Seattle’s library, OMA, described the building as sensitive, contextual, and iconic. The building reacts to different lighting conditions and provides different experiences depending on your physical location in the space. The Seattle Public Library’s logo needed to represent the main branch’s dynamic nature.
I retained the brand’s existing color palette, expanding upon the blue and white by creating a gradient. The gradient represents the dynamic experience of being in the library at different times of the day and the differing views the library offers.
Design decisions took into account our persona (Rose) as well as the Seattle Public Library. The color and font used in the mobile application were deliberately chosen to be consistent with Apple’s human interface guideline and provide Rose with an experience enabling her to easily navigate the application by seeing contrasted book covers, distinct visual text layers, and experiencing a feeling of airiness and simplicity.
The library’s current logo is text heavy with a small image of a globe. The small globe logo is not unique nor does it convey Seattle’s identity.
For my template, I used an existing logo proposal created by Jill Hannay in response to an open proposal solicitation by the Seattle Public Library. I received feedback from users and incorporated opinions throughout multiple iterations. The resulting logo is a combination of bold lines without being heavy, a gradient representing dynamism, and modern sans-serif font.
1. Rebrand conveys the beauty and modernity of the main branch. White space represents airiness, core to Apple’s deference principle. White and blue from previous branding.
2. Book covers were frequently requested by users during testing. White space contrasts against book covers. Overdue red drop shadow conveys urgency without being disruptive.
3. The navigation bar with updated icons conveying the modern feel of Apple iOS design standards. Users described these icons as aesthetically pleasing and clear.
4. Title font same as logo for brand consistency and to easily differentiate architecture, reflecting Apple's depth principle.
The mobile application is now reflects the library’s prestigious national image. The redesign addresses major issues that have plagued the application since inception in 2010, and will bring a more consistent experience to its patrons.
WHAT I LEARNED
Test, test, and test again. The application’s information architecture was web-centric originally, structured around a home page. I received user feedback a few days near the project deadline resulting in another iteration . The new architecture is now structured away from a central page, instead focusing around functions directly related to user activity.
I learned that visual design is an immensely complex field. It was exciting to revisit Photoshop and take on a new challenge, as well as to explore Illustrator. I look forward to learning more about visual design and using my expanded knowledge to develop my user experience design skillset.
With the existing application set to be discontinued due to a major responsive upgrade of the Seattle Public Library’s website, this project’s redesign will need to be evaluated to see where it fits in. More research is necessary to determine whether patrons prefer using an application or the new responsive website for library related functions.