accessibility(a11y) project
UX · Web Design · Figma · Adobe XD · Webflow · Prototyping · Wireframes · Web Accessibility · Animation
Project overview
The goal of this project was to create a library of animations that passed the WCAG 2.1 rules and a checklist that explained the each of the relevant guidelines. The checklist and the library were made for the creatives team at Newell Brands to help them understand their limitations when designing.
My role
This was my hero project when I worked at Newell Brands as an intern. However, this project was pretty large in terms of deliverables so my job was to start the project with the checklist and a web example. I only had about 4 weeks to work on it so I researched the guidelines, existing animations, and designed the "accessibly animated" site on Webflow.
company
Newell Brands
date/time range
Summer 2021 / 4 Weeks
team
Marcus (Manager)
researching the web content accessibility guidelines 2.1 (wcag 2.1)
The first step was to create the checklist. I wanted to not only look through the website, but I also wanted the training materials from the accessibility specialist and the senior UX architect already at Newell Brands. I was able to go through several meetings with them to have them clarify any of the guidelines but also to help me understand the existing accessibility rules that Newell Brands and their Odyssey site follow. I also watched all of their past training videos.
A11y checklist
After going through all of the material, I decided to make an excel sheet. I wanted an excel because I would be able to sort everything by color and by disability. It was much easier for me to go through all the guidelines on the excel sheet and then put them into a Figma or XD file. I chose Figma because I was able to work on it online without having to download a program. My manager, Marcus, never used Figma before so it was fun teaching him how to use it.
On the figma boards, they are separated into three different lists: Operable, Perceivable, and Misc. I figured this was the easiest way for the creatives team to find what they were looking for. All of the lists have the guideline, an example, who it impacts, and a small graphic to help them understand. I wanted the list to be as thorough as possible so there weren't any questions.
On the figma boards, they are separated into three different lists: Operable, Perceivable, and Misc. I figured this was the easiest way for the creatives team to find what they were looking for. All of the lists have the guideline, an example, who it impacts, and a small graphic to help them understand. I wanted the list to be as thorough as possible so there weren't any questions.
website research
I already knew I was going to use Webflow, so I started looking at their showcase page with site that used animation. This way, I would be able to replicate and improve it on my sample site to fit the accessibility guidelines.
I compiled my favorite sites onto a Miro board. Then, I broke down each website with pros and cons about their accessibility or if they could be altered to be accessible. After looking at everything, I chose the parallax effect to be my main focus on my sample site.
I compiled my favorite sites onto a Miro board. Then, I broke down each website with pros and cons about their accessibility or if they could be altered to be accessible. After looking at everything, I chose the parallax effect to be my main focus on my sample site.
Wireframing and prototyping
After making the list, I started working on the sample site. I chose to use the Foodsaver website because it isn't a retail site; it's more of an informational site. This way I didn't have to worry about a cart or prices. This also meant that there were lots of opportunities to be creative with animation and styling.
I looked a the original site and started picking it apart on Figma. I liked how each other sections were broken down but I thought the food icons could have a little more movement to it. I also liked the the buttons but they didn't have any animation to it so that could be a potential change. I was also debating on a slider with some autoplay video on the inside.
I looked a the original site and started picking it apart on Figma. I liked how each other sections were broken down but I thought the food icons could have a little more movement to it. I also liked the the buttons but they didn't have any animation to it so that could be a potential change. I was also debating on a slider with some autoplay video on the inside.
Original vs New
The sample site that I created features the parallax effect in the hero banner and also the small banner above the footer. Each of the hover animations are made on using triggers on Webflow. I wanted the "Foodsaver Promise" section to have a small hover effect on the icons. The large food images have a hover for more information. A green background rolls down with text about each food. The small buttons also have an animation.
In order to make the site accessible, I incorporated a "Toggle Off" on the top right so stop the animations. All of the information is presented in an animation free way. The user can toggle on and off to make it accessible.
In order to make the site accessible, I incorporated a "Toggle Off" on the top right so stop the animations. All of the information is presented in an animation free way. The user can toggle on and off to make it accessible.
