UX FONT / CASE FILE: CPL.ORG
CPL.org
Turning a growing civic website into a more coherent and reusable system. I maintain and extend Cleveland Public Library’s website through reusable page patterns, initiative sections, content tools, and long-term stewardship.
Project snapshot
| Organization | Cleveland Public Library |
|---|---|
| Timeline | 2023 to present |
| Role | Web designer and UX/UI engineer |
| Team | Two-person web team working with communications, media, IT, leadership, departments, and external partners |
| Tools | Figma, WordPress, Gutenberg, GitHub, HTML, CSS, JavaScript, PHP, and YoDeck |
| Focus | Design-system stewardship, landing pages, initiative sections, content discovery, accessibility, and publishing workflow |
[01]
Stewarding a live civic platform
Cleveland Public Library partnered with a third-party agency to redesign and develop CPL.org. I contributed to discovery alongside internal stakeholders, but I did not lead the redesign or build the original platform.
My larger role began after launch: helping that foundation accommodate new campaigns, services, media, and public information without drifting back toward disconnected pages and one-off solutions.
New information hubs, photo collections, partner requests, and departmental needs continued to arrive. Our two-person web team had to meet them while protecting the larger site. I lead much of the visual design, Figma work, landing pages, pattern development, and front-end cleanup; my coworker focuses more heavily on backend development and platform updates. We collaborate on architecture and applications.
Every new request is also a design-system question: should it use an existing pattern, become a shared component, or change to better support the platform?
[ASSET NEEDED: A publication-safe overview of the current CPL.org platform, clearly crediting the agency-led redesign and original build.]
The overview should establish the inherited platform without implying that Tyrone led or built its original redesign.
[02]
Building continuity through reusable patterns
I introduced Figma into the team’s daily workflow and began building reusable components and page patterns based on recurring production needs. As my understanding of the Library’s brand deepened, those patterns helped translate it into a more consistent digital language.
Instead of beginning with a blank canvas, I can redirect common needs toward established structures. When a new solution proves useful more than once, it can join the shared system. This preserves design knowledge that might otherwise remain in memory or old pages.
The Figma library gives collaborators something concrete to review before implementation. It helps us decide hierarchy, spacing, responsive behavior, calls to action, and accessibility earlier. A pattern-to-page workflow then carries those decisions into Gutenberg.
This is not a finished design system in the abstract. It is a working library that grows through daily use and makes the public-facing site more cohesive over time.
The reusable system connects collaborative page planning to native, editable Gutenberg structures.
[ASSET NEEDED: A publication-safe overview of the CPL.org Figma component and page-pattern library.]
The overview should show reusable structures grounded in recurring production needs, without exposing internal content.
[ASSET NEEDED: One publication-safe Figma component-to-live-Gutenberg-page comparison.]
The comparison should document how hierarchy, spacing, responsive behavior, calls to action, and accessibility decisions carry into the live page.
[03]
Keeping initiatives inside CPL.org
One of my largest areas of focus has been branded landing pages and small initiative sites. Historically, a major program could become an entirely separate website, creating another visual language, publishing workflow, and maintenance burden.
I wanted CPL.org to support distinct identities without losing its connection to the Library’s navigation, accessibility standards, and technical foundation. To make that possible, I worked on a reusable inline-menu block for navigable child sections within the main site.
A landing page can now grow into a coordinated multi-page initiative section with its own hierarchy while remaining recognizably part of CPL.org. This reduces the need to create another independent property.
As these sections multiply, the next pattern is becoming visible: reusable hubs that gather related programs, resources, or content under a shared structure. That work began in spring 2026 and remains in progress after a major civic campaign redirected team capacity. Even unfinished, it gives us a clearer model for the platform’s next stage.
[ASSET NEEDED: Publication-safe screens of a branded CPL.org initiative section and its reusable inline-menu block.]
The screens should show a distinct initiative identity operating within CPL.org’s shared navigation, accessibility standards, technical foundation, and publishing workflow.
[04]
Improving how visitors find content
I have also been extending news and media in phases so useful improvements can reach the live site without waiting for a complete overhaul.
The first phase paired a featured story with a reusable Card Loop, giving current news a stronger hierarchy while preserving access to a broader stream of posts. The next phase addresses image galleries that previously displayed large photographs in a long vertical stack. I am developing a carousel block that gives editors a more purposeful presentation tool and visitors a more manageable browsing experience. Filtering is the following phase, helping people navigate a growing archive by interest and relevance.
A smaller intervention proved equally useful on the Voting Information Hub. The required resources had to remain on one long page, so I created an “On this page” navigation element that previews the structure and moves visitors directly to the section they need. Its high click activity showed how a modest interface pattern could improve access to important civic information.
Solve the immediate problem, then shape the solution so it can contribute to a larger content system.
The content-discovery work is deliberately phased; unfinished tools remain labeled as work in progress.
[ASSET NEEDED: A publication-safe live example of the featured-story and reusable Card Loop news pattern.]
Phase one is live: a featured story establishes hierarchy while the Card Loop preserves access to the broader post stream.
[ASSET NEEDED: Publication-safe gallery-carousel work in progress, clearly labeled as unfinished.]
The next phase is in development: a carousel block is intended to replace long vertical image stacks with a more manageable browsing and editing experience.
[ASSET NEEDED: Publication-safe filtering exploration, clearly labeled as a following phase.]
Filtering is the following phase, intended to help people navigate the growing archive by interest and relevance.
[ASSET NEEDED: A publication-safe Voting Information Hub overview beside a readable close-up of its “On this page” navigation.]
The comparison should document how the navigation previews a required long page and moves visitors directly to the information they need.
[05]
Making the work itself more durable
Stewardship also depends on the internal process behind the website. When I joined the team, there was no formal ticketing system. Requests arrived from many directions, and longer projects could disappear when urgent assignments took priority.
I created a GitHub Kanban board that our team now uses regularly. It provides a shared view of current requests, ongoing platform work, and projects that need to pause without being forgotten. It does not remove competing priorities, but it gives the work a durable place to live.
I also coordinate with communications, media teams, departments, and partners to publish across CPL.org and YoDeck digital signage. That perspective connects the public experience to the workflow needed to keep it accurate.
Patterns preserve design decisions. The project board preserves momentum. Both reduce the cost of starting over.
[ASSET NEEDED: A safely redacted, publication-approved view of the GitHub Kanban workflow with one or two publication-safe YoDeck examples.]
No private repository, request, project, or stakeholder information should appear. The evidence should show only the public-safe relationship between tracking, coordinated publishing, and long-term stewardship.
[06]
Outcomes and reflection
This work has gradually changed how CPL.org grows:
- The public-facing digital brand is substantially more cohesive.
- Common pages begin with reusable structures instead of blank canvases.
- Visual consistency and accessibility are part of everyday production.
- Initiatives can become branded child sections within the main website.
- News, gallery, and filtering work is developing into a clearer content-discovery system.
- The team has a reliable way to track immediate requests and long-term improvements.
Earlier in my career, my instinct was to fulfill each request individually. At CPL, I have learned to balance the immediate assignment with the long-term health of the platform.
Progress is sometimes slower than I would prefer because a small team must respond to urgent public initiatives. That constraint makes the system work more valuable. Reusable patterns, phased improvements, and visible tracking allow the website to keep evolving even when larger projects are interrupted.
The next phase is to refine the Figma and Gutenberg libraries, establish the reusable hub model, complete the gallery and filtering work, and improve the organization of the growing WordPress backend. The goal is not to eliminate every exception. It is to give the organization a strong shared foundation, then extend it deliberately as new needs emerge.