U
X work.

NYPL.org

During the 8 years that I was Senior UX Designer for the New York Public Library, I helped the Library transform its digital offerings for an audience which increasingly expects handheld, personalized, and immersive experiences.

Throughout my time at the Library I established practices which are now standard: wireframing, prototyping, and user testing are the most important of these. We built prototypes which were extensively tested with Library users; this helped us to learn a lot about our users' behavior and expectations, which set a baseline for future iterations and new project plans. My projects included building the Library's first design pattern library, a redesign of the Support section, and upgrading the Drupal version of NYPL.org.

Project: NYPLBase design system

NYPL's first rapid prototyping code framework

Challenge

After facing chronic challenges resulting from the New York Public Library's lack of design documentation, I decided to build my own. At the time, design pattern libraries like Bootstrap were just becoming popular, and I wanted the Library's flagship site to have its own package of code that provides NYPL branding, as well as a reference of design patterns.

wireframe of NYPLBase patterns

Solution

I designed the element styles and object patterns, tested paper prototypes, and built the first version of the full code base over a period of about six months. The code of NYPLBase is built on the InuitCSS Sass framework, and provides an easy way to quickly build styled, responsive prototypes. The style guide and code base are both available on GitHub.

image of snippet of NYPL Base code

Result

Its first project-based use was in the redesign of the Locations section of NYPL.org. We saved time, tested working code with real patrons, and reused code in much of the design phase. Being able to test real code was essential to our ability to gauge the success of the UX with its target audience during development sprints.

Project: NYPL "Three Faiths" exhibition

Wireframes facilitate collaboration

Challenge

Early in my role as UX Designer for the New York Public Library, I observed that the design process was to present stakeholders with finished, high-fidelity designs. While the designs looked impressive, any corrections that needed to be made took a lot of time between iterations.

Solution

When I started work on the "Three Faiths" online exhibition, I took the opportunity to introduce wireframing to our process. The weekly stakeholder check-ins became efficient working meetings, where I led the group through each iteration of the wireframes. This process facilitated conversation between the high-level stakeholders on the project, which had previously been a challenge.

Wireframes for planning the exhibition site
NYPL Three Faiths exhibition

Result

Rather than simply approving finished designs, the stakeholders were part of the design process, and therefore felt a sense of investment and ownership. We were able to quickly achieve a universally approved and functional design.

Project: NYPL.org Support section

A strategic redesign on a short timeframe

NYPL Support section

Challenge

NYPL's Development department needed to create a design that showed the variety of ways a patron can contribute to the library; unfortunately as the single UX designer at the time, I was only able to devote partial time to this project. Therefore, my time with the Development staff needed to be as productive as possible.

Solution

As a "team of one" during this project, I determined project requirements. Along with the Development team, we next established the content priorities using strategic techniques like page tables. I then used wireframes to have an iterative conversation with the project stakeholders and quickly test design hypotheses before going to visual design code.

Result

The redesigned pages were much cleaner, and resulted in a 33% increase in membership over six months. This work led to a second project, designing internal donation "ads" for various contexts throughout the site, so that users see the connection between their support and the services the Library provides. That work measurably increased Library donations.