A fully accessible micro-site for the 2018 Khan Academy Annual Report
Khan Academy is a non-profit organization whose mission is to provide a free, world-class education to anyone, anywhere. They are backed by a world-wide community of thousands of volunteers and donors, helping provide a free, global classroom for people of all ages and backgrounds.
When Dan Mall approached me about this project, I didn't hesitate to say Yes to working on it. I'd worked with Dan before in 2016 — he designed Smashing Magazine that I built the front-end of. But Dan was working as a solo designer on the Smashing redesign, and it was Vitaly that “assembled” the team to work on the redesign back then. This project, however, would be different. It was me who was joining a team of SuperFriends assembled by Dan to work on Khan Academy’s 2018 Annual Report.
I love Dan’s work, and I love how Dan works with developers, myself included. Just like on the Smashing redesign, Dan brought me into the project very early in the design stage. I got to not only provide feedback, but also contribute to suggesting and making UX and UI decisions in the browser as I was building it. (I always tell Dan that he brings out a designer in me I didn’t know existed. And apparently he already thinks of me as a designer. 💜)
And just like I, a developer, was involved in the design process, everyone else on the team was. Everyone on the team got to wear more than one hat at a time. United by a common belief in Khan’s mission, this brought out the best of us all, and was the main driver for the success of the project. It was an incredible team effort.
This amazing team helped me to push my boundaries for a product we all believe in.
- Scott Cook, art-director and designer
- Jessi Hall, producer
- Dan Mall, director
- Joe Rinaldi, client services
- Greg Sarault, front-end developer
- and myself, a front-end developer.
SuperFriendly led this effort through close collaboration & constant communication with our peers at Khan Academy. Jessi kept everyone on both teams informed about progress, wrangled the distributed team's independent and often-asynchronous schedules to make sure work happened in the right order, prioritized tasks, and so much more. This ensured the project progressed fairly smoothly over the course of two months.
Our project with Khan Academy is a testament for incredible results produced within constraints. I like to think that most creative work is best in this way-- either constrained by time, money, or access to materials. Our focus for this project was to deliver an accurate, accessible site that is simultaneously beautiful and animated with purpose.
We worked closely with the Khan Academy team (who are lovely human beings who care deeply about accuracy and honesty) to get data visualizations just right. Our team strived toward meeting every one of our goals with positive attitudes and lots of high-fiving to get us through long days and nights. I'll always hold this project up as an example of a great collaboration.
Having utilized Khan Academy videos as a tutoring tool with my kids over the years, I’ve gotten to see, first-hand, what an incredibly beneficial learning resource it is. So when SuperFriendly asked me to help with design on the new Khan Annual Report, I didn’t hesitate in saying yes. I’m incredibly grateful to have gotten to be a part of such an amazing team doing work for such an extraordinary client.
Goals & Contraints
Khan's mission is to provide free education for everyone everywhere. In other words, they are working to make world-class education accessible by everyone. The least we can do is to reflect that in the product we built for them by making sure the product is accessible by everyone, including users with disabilities using assistive technologies. So, right from the start of the project there was a strong emphasis on building a Web site that reflected Khan’s new art direction and looked great but that was also fully accessible and usable. I am proud to say that we met that goal successfully and the site is fully accessible and usable for users with assistive tech as well as keyboard users.
Greg built a purposeful layer of animation on top of the static site I built. To ensure the accessibility of that layer as well, the UI includes a switch that enables visitors to disable the animations and enable them on request. Greg leveraged the CSS
prefers-reduced-motion user query to implement that. It’s a small step that has a big impact on the overall usability of the site.
Other best practices like adding a skip link to facilitate navigation for keyboard and screen reader users, adding a focus style that stands out from the hover style, ensuring all images have meaningful alternative text, etc. are all built in to the site. A lot of SVG work and techniques went into implementing the animated scrapbook-style images as well as all the data charts and visualizations. I'll save the technical details of those for blog posts that I will publish on my blog following this case study next week.
Great projects come from the humble people with cooperative attitudes. There was no “Khan Academy team” and “SuperFriendly team.” We worked together as one team toward a common goal: clearly articulating the impact that Khan Academy is having on the state of education in the world. Because the team collaborated smartly in the same direction, the process and the work are amazing.
Like what you read and think your next project could benefit from my skill set? Get in touch. Let’s build something great together! Hire me