Knowbility, a well-respected non-profit consultancy that specializes in helping Fortune 500 companies make their websites compliant with accessibility standards, contacted me to redesign their logo and website.
The goal of the project was to help their site to project a more competent and professional public face for the organization while making sure it met the highest standards of accessibility.
What follows is a case study, written in multiple parts, of the process and outcomes of this project. I’m writing from my perspective, so it’s going to super-focused on the visual design and branding parts of the project. I will leave it the amazing technical folks on the project to provide their perspectives. This case study will be of the most use to UX/UI designers who have a lot of questions and uncertainty about designing for accessibility.
I’ll write about choosing colors, designing an accessible design system, and other parts of this project in subsequent posts. I’m going to focus this article on the research, work, and outcomes of the logo redesign.
I’m going to start here by quoting Knowbility’s original mission statement, which is helpful for us to understand the why before the what.
Our mission is to support the independence of children and adults with disabilities by promoting the use and improving the availability of accessible information technology.
Part 1: Research
Before we started working with Knowbility, they had already recently redrawn their existing logo:
Before breaking down the logo, we began by talking first about the name. Obviously, they weren’t going to rename the organization, but it was an opportunity because people often mispronounced the name as“no ability.” That didn’t align with their mission. I wanted to make sure that when we redrew this logo that it would be at the very least be more natural to read for everyone.
As an initial point, this logo was not technically great, or in my opinion, visually good. But, beyond that, Knowbility didn’t have a reference point for why it wasn’t right beyond my opinion.
It was essential to help them understand the main problem with the logo was a technical one. But it was essential to point out where the logo was working against its mission (“…to create a more inclusive digital world for all abilities.”).
The first technical problem was the text case of the logo. The logo starts with a lower case “k,” which, in terms of readability, isn’t helpful. Generally speaking, readers prefer to see a capital letter at the start of a sentence or a single word. Especially when a portion of your audience has partial vision loss or dyslexia, this point becomes more critical
This was an approachable place to start the conversation with Knowbility about making fundamental design considerations to provide accommodation to their audience. Knowbility’s area of expertise is technical and the idea of talking about design wasn’t in their comfort zone.
The point I made was you don’t need to be a designer to understand that a simple decision like altering the case of a letter could throw off a reader. You could also ask fair and reasonable questions like, “why would you do this? What does this add to your message?” But I wanted them to be comfortable with discussing their brand and this was a very practical way to introduce that in the conversation.
I told them that when you come to a decision point in designing something for Knowbility (not only the logo), your choices are guided by your mission. Not only, “why would you do this,” but “what can we do here to tell your story that you want to make the world more accessible to people who identify as disabled?” By making this text more legible, Knowbility would be making it more accessible.
Next, I pointed out the prevalence of sharp and dramatic serifs that could make reading difficult for some readers. Again this speaks to the concern for people with vision or reading challenges, but even for typically sighted people, this should be easier to read.
Lastly, we discussed the use of the accessible symbol used in place of the “o.”
If you are interested in learning more about this symbol and the story behind it, I strongly encourage you to visit The Accessible Icon Project website. It’s a wonderful graphic with a lot of positive associations.
The use of this symbol, in this context, wasn’t how it was meant to be used. It’s designed primarily for use in signs and other types of large displays.
Going back to the repeated point about readability, this degrades the quality of the text by replacing a simple letterform with a graphically disruptive icon. Secondly, we didn’t want the use of the icon to feel like a “tacked-on” addition to the logo.
So coming out of this conversation, we had a few technical goals in mind in selecting a typeface. To align with what I thought would be an improvement, I was looking for:
- A sans-serif font
- Tall x-height so the contrast between upper and lower case letterforms and their ascenders and descenders wouldn’t be too dramatically different.
- No icons disrupting the flow of the text
Also, the combination of “i-l-i” near the end of the word can lead to some difficult-to-scan forms for users with low vision, dyslexia, or other types of reading challenges.
With those technical considerations in mind, it was then necessary to better understand Knowbility’s vision for itself and how they wanted to project that to the world.
Part 2: Exploration and Selection
I presented several options for a new logo, conceptualized a number of symbols to represent Knowability’s primary mission, then offered some recommendations about integrating the new brand assets.
We looked at many options for a typeface that aligned with our technical goals. What felt right in this case was a font that wasn’t sterile or cold and that had a simplicity but didn’t lack personality. We narrowed it down to around four primary type choices (all of which are more or less humanist typefaces), from which the client selected one.
When making a final decision about the logo itself, it was decided that the text should be able to stand on its own as a bold, simple, legible text mark. But, it was also agreed that to better express Knowbility’s overall mission to educate that a metaphorical symbol was needed in connection with the logo.
We decided to explore three symbols: the tree (representing knowledge), a crown (playing off the name Knowbility/nobility), and the brain (something inclusive to everyone and representing education). Everyone agreed the brain was kinda squishy and might make some folks squeamish. The crown was a bit too ivory tower and elitist. Ultimately it was agreed that the idea of a tree, representing sharing of knowledge, spoke best to both the commercial and community educational purpose of Knowbility.
It was more challenging (as it often is) to choose a typeface we all agreed on. Knowbility felt some of the typefaces were too serious and/or sterile and wouldn’t provide the friendly face they wanted to put out into the world. So the team chose Henderson Sans, the most friendly and expressive option. Below is the final logo:
The process of redesigning a logo or a website involves a lot of different perspectives, stakeholder alignment, and communication. For this particular project, what we agreed would be the first goal of the redesign was to make sure it aligned with Knowbility’s mission.
With that as our guiding light, we explored how their logo wasn’t technically inclusive enough, especially for folks who identify as disabled, and we could work to improve the readability of the text mark. We explored a variety of styles and symbols and ultimately arrived at a solution that Knowbility felt better expressed their mission, goals, and personality.
The next part of this case study I will talk about color, color accessibility, and a little bit about buttons.