Product Design

Emergent Literacy

September - November 2025

Overview:
As a part of Knowbility's eight-week long Accessibility Internet Rally (AIR), I was paired up with a team to redesign a company's website increase accessibility. Team Lucky 7 was able to elevate the AIM score to 10/10 across almost every page.

Team:
Program Lead & Client Liaison
Project Manager
Technical Lead
Product Designer
QA & Migration Lead

Role:
Product Designer

Hypothesis: The existing site did not properly present the non-profit's branding.
Experiment: An accessible website that reinforces the company's identity.

Observation

Clients enrolled in AIR are looking to optimize accessibility within their own websites. Besides adhering to WCAG  standards, sites must also have their cognitive accessibility improved to create a seamless experience for users.

Our team was paired with Emergent Literacy, a nonprofit with an existing website.

Gather Background Info

User Research

Once paired, the team met with the nonprofit's founder to understand the specific needs that the site needs to address.
Overall, the site wanted to expand on functionality, and provide a more defined identity online. They also defined for us their main audience - parents of students in K-12, teachers of students in K-12, 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

Home

In order to achieve the website goals defined, the home page was made to give visitors page previews for effective navigation.
The organization would also benefit from showcasing testimonials. This would introduce new visitors to their impact. and incentivize users to reach out.

Other Pages

Optimized content organization decreases the competition between information, leading to a more seamless navigation experience.

Information Architecture

One of the site's primary jobs was discoverability by connecting clients to the resources Emergent Literacy provides. Our stakeholder requested that a set of PDF toolkits, organized by grade level, be translated into HTML pages. Given our eight-week timeline, a full translation was not feasible without compromising the quality of everything else we were building.
Rather than simply deferring the request, we identified what the stakeholder actually needed: a way to surface interactive, engaging content that would drive client action. We designed the "Booklist": a curated, accessible page that elevated the most engaging resources. From this, we were able to  organize the remaining PDFs by grade within a dedicated "Toolkits" page.
Sitemap showing proposed site structure. There are 6 pages titled "Home", "About", "Programs", "Toolkits", "Booklist", "Contact". At the bottom there is "Footer". Each titled is color coordinated, and has bullet points about content each page will have. Some bullet points have colors from other pages to show how there is overlapping content between pages.

Style Sheet

I gleaned inspiration from the existing logo, where I was able to identify the colors and the fonts used.

Color

I found the two defining colors used within the logo: a dark navy (#001B26) and a green I labeled "Emergreen" (#1C863C) since it's the nonprofit's main color.
These colors became the defining colors of the site. Green was used mainly for actionable items (buttons, links), as well as a highlight color for important tags (H1).
Green represents growth and development, and navy blue wisdom and authority. Fitting for an academic purpose.

Font

Libre Baskerville is used for display type like titles and headers. This choice was inspired by classic print in literature. The tall x-height also helps with legibility.
‍DM Sans was inspired by lettering in the school setting, making this the choice for body copy.
The pairing brings a fresh yet recognizable look specifically chosen to reflect the non-profit's vision.
Image showing color breakdown. Emergent logo is on the left. From the logo there are two lines that come out and point to two different colors. A green labeled "Emergreen" with hex value 1C863C, and a blue labeled "Dark Navy" with hex value 001B26. From those two colors, each had two arrows each pointing to parts of a sample paragraph to the right. The H1 and buttons are labeled in green. H2 and body are in the dark navy.
Old Emergent Literacy page. This page has an AIM score of 7.8.The redesigned home page for Emergent Literacy. This page has a AIM score of 10.
Before
After

Analyze Results

Client Feedback

After completing the site design,  iterating through screens, and implementing the site,  we were able to present our staged site to our client.
Ultimately, the project culminated into a fully accessible site that meets WCAG AAA standards, elevates visual design, and meets client standards.

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

At launch, these would be the KPIs I'd monitor to consider its success at launch and shortly after:
  • WCAG Compliance Score: Measures the difference by running WAVE audit and evaluate score improvements. The redesign improved the accessibility score (AIM) from a 6.6 to 10/10 on the home page alone.
  • Engagement Quality: Measure the engagement users have with toolkits and booklists. Monitor traffic increase in Toolkits/Booklists, scroll depth, and bounce rates.
  • User Trust and Conversion: Gauge user trust by type of engagement. Monitor form submissions, email volume received, donations, social media 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. The Booklist emerged from asking what users actually needed from those resources.

The branding followed the same logic: rather than building an identity from scratch, I worked from what already existed in the logo, letting the organization's own colors and academic character define the system.
  • Reframing the Request:
    Translating stakeholder requests into design-appropriate solutions required reframing the problem entirely. When a full PDF-to-HTML conversion wasn't feasible, the real question became: what outcome does the stakeholder actually need? The Booklist emerged from that reframe as a better solution.
  • 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, which is a lesson that applies to any distributed product team.
  • Constraints as Clarity:
     A compressed timeline with competing obligations forced genuine prioritization. Not everything could be built, so everything had to be justified. That constraint produced better decisions.
That was a lot! Jump to top?
EmailLinkedInRésumé