We Love AFB
Blind child reading with educator
We Love AFB

Launching a vision-loss revolution

Kalamuna partnered with the American Foundation for the Blind (AFB) to build a more accessible world. We delivered thoughtful content strategy and a modern redesign to launch AFB’s strategic reframe to reach a wider audience.

"We went through a yearlong strategic planning process driven by stakeholder interviews and a comparative analysis of how AFB could create a more equitable world for people who are blind or visually impaired. We came away with a clear answer, that AFB should shift from helping blind people and their families understand and navigate a complicated system of services to a bolder effort to change the system itself."

Elizabeth Neal

Elizabeth Neal

Director of Communications, American Foundation for the Blind

The Challenge

Since 1921, the American Foundation for the Blind (AFB) has been a force for people with vision loss. Whether you know them by name or not, you've encountered their impact in braille, audiobooks, and the ADA. This is where Hellen Keller dedicated her career.

After nearly 100 years of helping people with vision loss within the system, AFB broadened their mandate to change the system itself. They needed a partner to redesign their web presence to both launch a revolution and continue serving their established audience. Of course, accessibility was essential, both in delivering a usable design for all vision levels and that developers with vision loss could build.

Liz Neal dedicated nearly two decades of her career to AFB, rising to become their Director of Communications. Both sweet and direct, she knew when to leverage strategic partnerships and brought both a clear vision and a collaborative openness to her role. When AFB’s new strategic plan expanded their audience to include policy makers and the wider community, Liz sought a partner to redesign their web presence to reach both a sighted and non-sighted audience. The design itself also needed to be accessible, as Liz’s team who would be migrating afb.org onto Drupal included developers with vision loss.

While AFB initially positioned this as a design challenge, our discovery immediately uncovered a significant parallel need for content strategy. Not only did AFB aim to appeal to new audiences without any existing research to guide the tone and voice, they also possessed a wealth of current content that would need to fit in their new site. Even though they aimed to broaden their reach, they knew educators still needed access to their Helen Keller archives and people still needed access to resources about living with vision loss.

"Our challenge was how to convey concepts like systems change in a way that made sense to regular people and inspired them to take action, and of course, we wanted to continue to showcase best practices for fully accessible inclusive website design."

Elizabeth Neal

Director of Communications, American Foundation for the Blind

An agile pivot toward content strategy

With AFB’s permission, we immediately expanded our efforts to answer two key questions:

1. How will AFB effectively communicate with policymakers and the wider community?

We led two strategic workshops around positioning and messaging to answer this question.

In our positioning workshop, we guided Liz and key members of her team through exercises to define their new positioning statement, seen below. It would be used internally to guide their messaging, claiming their desired place in the ecosystem of organizations serving the blind community.

AFB's new positioning statement

From left to right, see how the standard positioning statement template was customized to capture AFB’s strategic ambitions.

First part of statement Second part of statement Last part of statement
For end beneficiary Americans who are blind or losing their sight
Who problem statement lack equal access to education, employment, and other social institutions
AFB program statement conducts and promotes research into policies and practices
That key program benefits influence institutional decision-makers to increase opportunities for their success
Unlike competitive alternatives other nonprofits
AFB primary differentiation has a long record of creating trusted, objective knowledge that leads to positive policy change

In our messaging workshop, we defined AFB's new approach to communicating with key audiences like individual donors, corporate partners, legislators, and policy makers. In particular, we worked with the AFB team to define the top things they wanted each audience to know, do, and believe about the organization. These insights were synthesized into a message map to guide new content development for the site redesign.

2. How will AFB restructure their current content to balance their new mandate with their existing audience?

To answer our second key content question, we balanced enthusiasm and momentum for where they’re going with respect and appreciation for where they’ve been. In particular, we wanted to ensure AFB’s vast Helen Keller resources continued to receive the prominence they deserve.

A content mapping exercise allowed us to visualize how their vast content could be restructured for their new audience while still remaining findable by their current audience. We worked with Liz as a natural extension of our team, setting up a tree test she conducted to gain valuable insights into where their audience expected to find key content on the site.

Accessible collaborative sketching

Although we always focus on an accessible outcome, working with a team that included people with vision loss challenged us to do so in an accessible way. So, we adapted to build in accessibility all the way across our tools and process.

Happily, leading collaborative sketching sessions with the AFB team posed fewer challenges than we anticipated. The goal remained the same, to structure the content on a webpage, which becomes an ordered collection of words for people using screen readers. We leveraged our experience sketching with non-artistic clients, who we regularly guide to not worry about pretty, and to focus instead on putting words on a page.

Homepage sketches created both by the AFB and Kalamuna teams after being provided the following instructions, "Please create one or two simple sketches. You can depict desktop screens, mobile screens, or both. Alternatively, provide text-only sketches, such as one might encounter using a screen-reader."

Sketch
Sketch

Design for everyone

Once we aligned on the content strategy and page structure, we were ready to begin visual design. The mandate for the new website to look great came right from AFB’s president, Kirk Adams. He knew what we all know, that the site’s appearance would be critical in attracting a broader audience. After many accessibility audits of sites, we also knew that much of the internet leaves people with vision loss out of the conversation. That wasn’t an option here.

We began by working with the AFB team to refresh their brand guidelines, completing color studies to select a new yellow, selecting new typography, and completing small tweaks to their logo. When all the elements were in place, we then created a style tile to efficiently collaborate on the visual design direction before moving into prototyping.

Style tile

This is the style tile we put together showcasing the color palette, typographic styles and other key elements used on the site.

Style tile

Kalastatic prototypes empower AFB

We knew from the start that AFB wanted to build the site fully in-house. So, our final deliverable would be a style guide, serving as the glue to empower their development team to connect the back-end of the CMS to the front-end designs. Thankfully, we already built the perfect tool for the job, Kalastatic.

Kalastatic

A split view of what you see in the browser and the code generated by Kalastatic.

Screenshot of AFB Take Action section of site

Kalastatic allows us to quickly build CMS-less websites, both for rapidly prototyping pages with HTML, CSS, and Javascript, and for creating fully-responsive HTML style guides. It empowered the AFB team to conduct rigorous accessibility testing and then to build out the site in Drupal.

We didn’t stop there. Along with the prototype itself, our developers wrote thoughtful documentation for the source code and template files, so developers with vision loss could effectively leverage everything we delivered. We also conducted developer training sessions customized to their needs.

Outcomes

Section
Image
Header
VoiceOver Audio & Transcript

We are so proud to share that the AFB development team completed the build without any additional assistance from us, making our initial collaboration a tremendous success.

This partnership took our consideration of accessibility to the next level, meaningfully deepening our awareness of how people with vision loss use technology differently, including how they interact with the things we design and build.

Kalamuna and AFB continue to collaborate on projects to build not only an internet, but a world that works for everyone.

"Kalamuna was the perfect partner for our website overhaul, because they also brought a curious, analytical and user-driven approach to their projects. Of course, we also loved that they had a very strong background in accessible web design and Drupal, which we had chosen as our new platform, but what was really most important was that they were committed to the same research-driven and user-focused design approach that AFB has always advocated and followed ourselves."

Elizabeth Neal

Director of Communications, American Foundation for the Blind

Hear from Liz

This quick video summarizes Liz’s experience working with us on this project.

Elizabeth Neal testimonial still
kalamuna-logo-gem