Stack

Project

Chicago Public Library

Duration

4 weeks

Skills

UI design

Wireframing

Research

Branding

IxD design

Prototyping

Deliverables

Style tiles

Wireframes

Mockups

Prototypes

Style guide

Tools

Sketch

Photoshop

Illustrator

Principle

InVision

Overview

Stack is a native mobile application that reimagines the library experience. The Chicago Public Library application was the pilot for the redesign— I looked to create a seamless and personalized experience on the go that also showcased library resources.

My Role

I was tasked to create an iOS mobile application that allows users to browse library catalogs, reserve and check out books, serve as a social outlet for library goers, and showcase library resources. Additionally, I created a brand identity, which included a logo, responsive marketing website, and a style guide.

 

I worked on a team with two other UI designers to research the current market and present three divergent concepts created by each designer.

The Problem

The current state of library applications is limited and inefficient. Users need a mobile tool that enables them to access materials digitally and independently while staying informed about resources offered by their local library.

Personas

The Library Goers

Miguel, 32

The Time-Strapped Professional

“I want to volunteer, but it takes 20

minutes to just get the book I want.”

Frustrations:

  • Misinformed

  • Inconvenient processes

  • Confusing experiences

Design Inspiration & Exploration

Brainstorming Session

To my surprise, the current market of library applications was limited. Current apps only displayed announcements, leaving users left with an app they couldn’t use. Since a library contains dense content and large catalogs we looked into out of category products that managed large amounts of content. Apps like Amazon and Sephora gave us insight into how dense amounts of information could be laid out and nested.

 

With our findings in mind, I explored various ways that would appeal to our users. I knew the content needed to be clear and organized. I also wanted to keep the feelings evoked by a library there, this needed to feel like an extension of the library in the users’ pockets. I first started with a minimal approach with clean lines and greens, this felt too bare and would not appeal to our users. As one user stated they don’t trust libraries with technology, so I needed to keep pushing my approach to give the app a trusted feel and that they were technologically competent. My next exploration was a take from the corporate handbook and I decided to try blues to instill that sense of trust. To play the interface up I used yellows to add warmth and some energy. Thinking of our users, I wanted a more classic and timeless feel which led to my final exploration.

1/6

Branding

The Cover Art

Keeping the spirit of the library was essential. I wanted to bring in the old and merge it with the new. I used a hexagon as the main shape because of its representation of a community, which is encompassed by a library. When a library comes to mind I think of books stacked on top of one another, which is how the name of the application came to light and embedded into the hexagon of the logo.

Wireframes

Creating the Digital Manuscript

I created wireframes to layout the flow and structure of each main action a user would take. With the two user types in mind I wanted to create an experience where Miguel could efficiently find what he needs, and Robyn could browse at her leisure and find help right at her fingertips.

Home

The home page focuses on our on the go power user. It gives users access to information about what they have already done or may need immediately.

Search Bar

This is available for users that already know what book or event they need so they can find it right away. 

Personalization

To make the experience personal users can quickly access their card digitally and not worry about carrying it around. For users that actively use the app they can track what they have read, would like to read, and books they are currently reading. 

Book Status

The key here is having the necessary information at the forefront for our users to quickly access. 

Library Events

Resources offered by the library are underutilized, adding this section for events a user is interested in keeps them active within the library community. 

 

Final Delieverables

The Final Product

The final pieces all came together to produce the prototype. I included small animations and microinteractions to create an engaging experience. I also created a responsive marketing site selling the platform as a way for other libraries to use the app. In addition, I created a UI kit and style guide.

Final concept prototype

Responsive Marketing Website

UI Kit

UI Kit

Conclusion

Final Thoughts & Takeaways

Stack was the first project I worked on with a team of designers. It taught me the value of collaboration in the design process. I was able to use my teammates’ strengths to improve on my weaknesses. This helped me grow as a designer and strengthen my design skills. 

  • LinkedIn
  • Twitteer
  • Instagram
  • Dribbble
I'D LOVE TO HEAR FROM YOU

Interested in working together or grabbing coffee

Hit me up at

© 2019 by Sarah Sharara