NYPL.org's first design system
- Role: Senior UX Designer
- Company: New York Public Library
- Sector: Museums & Libraies, Non-profit
During the 8 years that I was Senior UX Designer for the New York Public Library, I helped guide the organization through a pivotal shift toward handheld and personalized digital experiences. By grounding our work in user research and reusable patterns, I helped shape the Library's digital strategy with systems that set a baseline for future iterations and new projects. I built the Library's first design pattern library, I fully redesigned the Support section, and I led the UX side of upgrading the Drupal installation for NYPL.org.
Challenge
The Library's digital ecosystem lacked consistent design documentation, resulting in duplicated work, unclear patterns, and fragmented processes across teams. 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.
Solution
I designed and built NYPLBase, the Library's first internal design system and rapid-prototyping code framework. I developed the visual styles and object patterns, tested early paper prototypes with internal teams, and built the code base (using InuitCSS as a base) to ensure responsive behavior and ease of reuse. The style guide and code base are both available on GitHub.
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.
NYPLBase on Github: nypl.github.io/NYPLBase/styleguide
NYPLBase GitHub repo: github.com/NYPL/NYPLBase
Code4Lib Journal: Adaptation: the Continuing Evolution of the New York Public Library's Digital Design System