Central California Animal Disaster Team
After graduating Springboard’s UX design bootcamp, I became passionate about designing inclusive and accessible user experiences. I went on to receive my Accessibility Design certificate from EDx and joined an Accessibility internet rally with Knowbility (an award-winning nonprofit leading in accessible information technology). We were placed into teams with developers, engineers, designers, project mangers, and content creators. Blessed with a talented, creative and fun team of California women, we called ourselves CA11Y gURLS! (A11Y is a numeronym for accessibility). We were paired with Central California Animal Disaster nonprofit, helping animals during a natural disaster emergency. Always having a deep love for dogs, especially my blonde little Terrier puppy named Cosmo, I was excited to helping people with disabilities easily be able to help their animals
Project: UX/UI Accessibility Design and Development of a responsive website
Role: Accessibility Designer
Duration: Sept 2022 - Dec 2022
Problem
The current version of the Central California Animal Disaster website is crowded with information, unorganized headings and has many inconsistencies.
Challenges
-
Designing a clean user interface
-
Improving Hierarchy Navigation
-
Improving accessibility using WCAG guidelines concentrating on color contrast, headings, and content organization, Alt text for pictures, and closed captions and transcripts for media.
Goals
1
Create an accessible, clean, and organized desktop.
​
2
Help users to be able to scan quickly and find information about helping their pets during a natural disaster in their county.
3
Make volunteer information and applying easy to navigate and understand.
4
Properly Label and organize the Donate page to increase user task completion.
​
Previous Design
Prior to CCADT partnering with Knowbility, the website was created by the owner, who had limited design experience. These mockups were created without any usability testing and had little consideration for the technical and product limitations on the scope of work. The previous design was cluttered with excessive text, numerous drop-down menus leading to blank pages, and inconsistencies throughout.
We identified that the color scheme was not in compliance with accessibility ratios of 4.5:1 for regular-sized text and 3.0:1 for large text, making it difficult for users to read. The use of large photos and blocks of text made the page appear overcrowded and overwhelming for users. The volunteer information was not presented in a clear and concise manner, and users were taken to new windows without notice while scanning through it. The emergency help information was ambiguous and required further clarity.
We addressed these issues through a comprehensive redesign, ensuring that the website is accessible, user-friendly, and visually appealing.
User Research
I conducted both qualitative and quantitative research for this project. I reviewed the Web Content Accessibility Guidelines (WCAG) 2.1 design principles and guidelines, and analyzed the non-profit's current website to create a comprehensive list of accessibility concerns that were not in compliance with WCAG 2.1 guidelines. I then shared my findings with CA11Y gURLs for further review and input.
For the qualitative research portion, I researched numerous animal-focused non-profit websites and evaluated them based on the WCAG design principles. Additionally, I watched YouTube videos on how assistive technology works with various websites, to gain a better understanding of the user experience.
Regarding the quantitative research, I researched the statistics of accessible non-profit websites, such as the number of users utilizing these sites and which sites they preferred. This information helped inform our design decisions and ensure that we created an accessible website that met the needs of the non-profit's target audience.
Key Learnings from Interviews
Knowbility paired us with AccessWorks to find a user using assistive technology to test the ease of navigating our website.
-
The user, using a screenreader and keyboard only, stated if it is the first time they are visiting a website, they review the hierarchal setup of the website. This consisted of the headings, sub-sections, and subtitles. If the user is looking for something specific, he looks at the links list.
-
The screenreader being used to navigate the homepage stated “Get Help Now” twice, which was frustrating ( a technical error to correct).
-
Headings were very organized and easy to navigate.
-
Tabbing through the Get Help Now page wasn’t smooth as the keyboard would get stuck at Madera county box(a technical error to correct).
Style Guide
Prior to the redesign, our color palette did not comply with WCAG standards and was outdated. As part of the redesign process, I worked closely with our design team to introduce new colors to CCADT, while also modifying some of the existing ones. Our aim was to create a consistent product and brand experience for our users.
We created CCADT's signature logo by combining warm colors, which provided a welcoming and inviting feel to our website. We added blue to the color palette, as it instills a sense of calm and trust in users, according to the psychology of colors. By utilizing this well-balanced color palette, we were able to create a visually appealing and accessible website that met the needs of our target audience.
User Journey
Working alongside the content manager, we collaborated to create a user journey map that provided valuable insights into our users' needs and motivations.
Utilizing this user journey map, I was able to select colors that would effectively communicate emotions such as empathy, trust, ease, and hope in our designs. By strategically incorporating these colors into our website redesign, we were able to create a more engaging and user-friendly experience for our target audience.
-
Using this map, we prioritized users in current natural disasters needing quick assistance.
Wireframes
Starting the ideation phase was a lot of fun. My primary focus was on addressing the needs of users who required assistance for their animals during an emergency. To streamline the process for these users, I designed a "Get Help Now" tab, which would allow them to quickly access the necessary resources without wasting time during a stressful situation.
In order to improve the overall user experience, I took inspiration from our current design and made modifications to the navigation system. I added a highlight box to indicate the current page that the user is on, making it easier for them to navigate through the website. I reorganized the text and information from the homepage and incorporated it into the menu bar of other pages. This helped to create a more clean and organized homepage, allowing users to quickly and easily find the information they need.
Ideating
Starting the ideation phase was a lot of fun. My primary focus was on addressing the needs of users who required assistance for their animals during an emergency. To streamline the process for these users, I designed a "Get Help Now" tab, which would allow them to quickly access the necessary resources without wasting time during a stressful situation.
In order to improve the overall user experience, I took inspiration from our current design and made modifications to the navigation system. I added a highlight box to indicate the current page that the user is on, making it easier for them to navigate through the website. I reorganized the text and information from the homepage and incorporated it into the menu bar of other pages. This helped to create a more clean and organized homepage, allowing users to quickly and easily find the information they need.
Get Help
Our primary user consists of individuals seeking assistance during a natural disaster emergency. To ensure that the user can easily find the information they need, I determined that the homepage should be dedicated to our primary user. With a prominently displayed box on the homepage taking them to help information would be the optimal solution. This allows for a clean and concise user experience, ensuring that the user can access the necessary information quickly.
Accounting for Accessibility: For keyboard only users,I simplified tabbing through the various counties. I ensured the color ratios were compliant for WCAG standards. I worked with the engineer to ensure the links read to screen readers stated that the link will open in another window.
Be Prepared
To cater to our next priority user group, those who want to prepare for a natural disaster emergency in advance, To reduce scrolling time, I decided to create a separate menu on the left hand side for quick and easy access to the section of most importance. To enhance the readability and clarity of the content, I divided the text into sections and utilized bullet points to emphasize important information.
Accounting for Accessibility: For keyboard only users and people using screen readers, I designed a side menu to jump to the section of most importance. This ensures that the user doesn't have to tab through wasting time listening to information they don't need to hear.
Preparedness PDF
We collaborated to develop an accessible Preparedness PDF download. This involved revising and refining the existing website text, including shortening sentences and organizing content under clear headings. We also selected an accessible font and used brand colors to ensure consistency across all materials.
Volunteer
I designed for users who are interested in volunteering and helping during a natural disaster. I considered the user's perspective and prioritized providing quick access to information such as who can volunteer, how to become a volunteer, and the types of volunteering opportunities available. To improve navigation, I reorganized the information into sections with clear headings.
​
Accounting for Accessibility: I ensured that instructions were provided for all users to click on the position for more information under Positions. This includes users with sighted disabilities and colorblindness. I used both color and underlined the positions to make it clear that it is a link.
Final Design
Presented below is the final design, which has undergone continuous updates and iterations to ensure optimum assistance to all users in helping their animals during an emergency.
Before
After
