Accessibility · 2025

Emergent Literacy

Redesigned Emergent Literacy's website in an 8-week long accessibility-focused hackathon. Achieved 10/10 AIM scores across almost every page.

Role, Product Designer
Duration, September – November 2025
Team, Program Lead & Client Liaison, Project Manager, Technical Lead, Product Designer, QA & Migration Lead

Emergent Literacy design experiment

By the numbers

AIM score achieved, 10/10
Home page improvement, 6.6 to 10
Knowbility AIR timeline, 8 weeks

Jump in

Observation

AIR clients need more than WCAG compliance, cognitive accessibility matters too. Our team was paired with Emergent Literacy, a nonprofit with an existing website.

Gather Background Info

User Research

We met with the founder to understand what the site needed to do: expand functionality, sharpen identity online, and serve parents, K-12 teachers, and donors.

Website Goals

  • Help users understand Emergent Literacy as an organization.
  • Surface resources so users can engage with resources provided.
  • Create more actionable opportunities for users to interact with the nonprofit.

Create a Hypothesis

If Emergent Literacy's website presents a cohesive visual identity, highlights its core resources, and provides client testimonials, then the organization will establish greater legitimacy and clarity, leading to increased user confidence and engagement.

Test Hypothesis

Navigation Design

The home page uses page previews for navigation, plus testimonials to show impact and encourage outreach.

Information Architecture

Discoverability was key, by connecting clients to Emergent Literacy's resources. The stakeholder wanted PDF toolkits converted to HTML, but an eight-week timeline made a full translation impossible without sacrificing everything else.

Instead of deferring, we asked what they actually needed: a way to surface engaging content that drives action. The "Booklist" curated the best resources; remaining PDFs organized by grade on a dedicated "Toolkits" page.

Navigation with page previews on the home page

Style Sheet

Colors came from the existing logo: dark navy (#001B26) and "Emergreen" (#1C863C). Green for actionable elements and H1 highlights, navy for authority.

Libre Baskerville for display type (classic print in literature), DM Sans for body (school-setting lettering). A pairing that feels fresh yet familiar to the nonprofit's vision.

Color system derived from the existing logo

Final Experiment

Before and after comparison of the Emergent Literacy home page accessibility scores.

View live site

Analyze Results

Client Feedback

We presented the staged site to the client: a fully accessible build meeting WCAG AAA standards, with elevated visual design.

Changes Made

  • Keeping green as actionable elements only (links, buttons)
  • Nested the Booklist page into the Toolkits page for improved information flow
  • Further polished information structure and visual elements

Considerations and Conclusions

KPIs and Future Features

  • Engagement Quality: Toolkits/Booklist traffic, scroll depth, bounce rates.
  • User Trust and Conversion: Form submissions, email volume, donations, social engagement.

Conclusion

The most important decision in this project was knowing what to prioritize. Fully translating the toolkit PDFs into HTML was an ambitious goal, and one that couldn't be done well within an eight-week timeline without compromising the rest of the site. Good design doesn't just execute requests; it finds the solution behind them.

  • Reframing the Request: The Booklist emerged from asking what outcome the stakeholder actually needed when full PDF-to-HTML conversion wasn't feasible.

  • Documentation as Design: Designing across five timezones required building handoff systems, not just schedules. Clear documentation and explicit decision logs became as important as the design work itself.

  • Constraints as Clarity: A compressed timeline with competing obligations forced genuine prioritization. Not everything could be built, so everything had to be justified.