The Seattle Public Library mobile redesign

 
iphone mockup with white.png
 
 
 

Introduction

Unsolicited redesign of a mobile app focusing on a new feature that works within existing brand guidelines and company vision.

 

DURATION
2 weeks

ROLE
Visual Design/
Information Architecture

TEAM
Meg Durcan (User Research), Yara Rojas (Interaction design)

TOOLS
Pen & paper, Omnigraffle, Sketch, Illustrator, Photoshop

 
 

 
 

DEFINE

BACKGROUND

"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.

PROBLEM

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.

SOLUTION

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.

 
 

 
 

DISCOVER

INITIAL STATE

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.

Jun-06-2018 12-52-20.gif
spl analyze callout.png
  1. Hamburger menu unnecessary

  2. Users reported 3D clipart styled icons as feeling outdated

  3. Navigation bar icons are stylistically different, suggesting incohesive design

 
 
 

EXISTING SITE MAP

 
Too many categories dilute core user functions and bloat overall experience.

Too many categories dilute core user functions and bloat overall experience.

 
 

PERSONA

Our user researcher conducted eight user interviews, three stakeholder interviews, and two contextual inquiries. The findings were compiled to create our primary persona, Rose.

 
Persona SPL.png
 
 

CARD SORTING

Paige Card Sort.JPG

Three users participated in a card sorting activity to group all existing application features into categories.

Results:

  • 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

 
 
 

REVISED SITEMAP

spl v2 w: callouts.png
  1. Simplified navigation by removing unnecessary categories

  2. One account to rule them all

  3. Core library functions accessible from first screen

 

LOGO INSPIRATION

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.

Screen Shot 2018-03-29 at 2.57.34 PM.png
Screen Shot 2018-03-29 at 2.57.09 PM.png
 

MOODBOARD

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.

splcomparison.png
oma.png
 

DESIGN

COLOR PALETTE

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.

 
pallette.png
 

LOGO EVOLUTION

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.

 
image9.png
 
 
 
 

HIGH-FIDELITY MOCKUPS

 
Before

Before

 
 
Screen Shot 2018-03-29 at 3.33.52 PM.png
 
 

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.

 

 
 

REFLECTIONS

RESULTS

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.

NEXT STEPS

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.