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 to be more accessible. Team Lucky 7 was paired with Emergent Literacy, a non-profit organization dedicated to help children reach their literary goals.

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 maximize and 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.
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.

Gaming: The solution?

After iterating through different approaches that ranged from matchmaking apps to apps that teach tailored skills, we ultimately chose a gaming approach to motivate students to improve their professional skills through tasks and rewards that lead to meeting a recruiter. With this design, we tried to tackle two problems at once: the need for meaningful connections and the struggle of getting your foot through the door.

Gaming: Not the solution

As we advanced through this project, we became too ambitious, losing sight of what really mattered and letting Abby and Peter slip from the forefront of our solution. We aimed to build something innovative but ended up with something common. So, we retraced our steps and realized we got off track when choosing our design solution. The crux of our problem is the lack of genuine connections—what design solutions could help us tackle that issue?
We developed a mobile app that matches students with local recruiters and industry professionals based on their professional interests. While meeting recruiters doesn’t guarantee job interviews, it offers students a chance to network and build meaningful relationships in a low-stress environment. The app presents students holistically, pairing them with others who share niche talents and facilitating informal meetups.
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 7.8 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

This project was an incredible experience. I felt very lucky to have worked with such a talented and passionate group. Working with Emergent Literacy was also a pleasant experience,  their mission is inspiring. After working together for 8 weeks, I was able to learn multiple valuable lessons.
  • Working across timezones:
    Lucky Team 7 was a very robust team. Our team spanned different time zones - spanning from CST to EET - so learning how to coordinate and handoff asynchronously was a must.
  • Balancing life responsibilities:
    ‍Although 8 weeks may sound like a lot of time, every second is precious in developing an entire site. While working on this project, I was also working a full-time job with little downtime. I learned how to balance my tasks as a designer with my life responsibilities.
  • Adhering to WCAG standards:
    I was able to design a feasible, functional, and fully accessible site. I challenged myself to go beyond AA compliance, designing toward AAA level accessibility where allowed.
That was a lot! Jump to top?
EmailLinkedIn