Accessible Website For STEAM Success Foundation
Role
Team Lead,
Accessibility Manager
& UX Designer
Duration
2 months
Feb 2019 - Apr 2019
Team
3 UX Designers
& 2 Software Developers
Teammates
Shaunak, Swapnil,
Rishabh & Cindy
Overview
This project was completed as part of a competition held by Knowbility called AIR-U (Accessibility Internet Rally for Universities). We built a website for our client, Jesse’s non-profit organization called STEAM Success Foundation, that complied with Web Content Accessibility Guidelines (WCAG) 2.0 and ended up winning the competition! The website is currently being used to accept donations and provide monetary support to children who want to pursue an education in Science, Technology, Arts, Engineering, or Mathematics (STEAM).
Process and Contribution
Training to become an Accessibility Ninja
I took lessons with Knowbility’s Sr. Accessibility Strategist, Becky Gibson on how to make any website compliant with WCAG 2.0. It was thrilling to be mentored by a person who contributed to the creation of WCAG 2.0 and the Accessible Rich Internet Applications (ARIA) specification.
Stakeholder Interviews
We interviewed our client to understand the purpose of the website and gathered the following information:
Functions
-
Provide grants to students from marginalized communities
-
Receive donations
-
Invite other organizations to collaborate on projects
Users
-
Students* from low-income households
-
Donors
-
Organizations that wish to collaborate
*Students with different abilities and from different age groups who want to pursue an education in STEAM .
Challenge #1
Our client had a tough time communicating what he wanted. His organization was new at the time and he was still formulating a plan of action. But we needed to move quickly to complete the project on time.
Solution #1
Competitive Analysis + Rapid Prototyping. I showed our client multiple websites of similar organizations and he promptly told me what he liked and disliked about them design-wise. My team and I followed up his inputs with rapid prototyping to understand his organization's objectives as clearly as possible.
Reflection #1
Record all your interviews and meetings (with the consent of everyone involved) because team members sometimes perceive and remember information differently. For this project, we went back to our recordings a couple of times to make sure we were on the right track.
Project Planning
Challenge #2
We were a team of busy full-time Graduate students from different departments at UMBC and different schedules. We wanted to collaborate and learn from each other without compromising on our school work.
Solution #2
We had an honest conversation about our schedules and how much time each one of us could realistically dedicate and when. Some of us adjusted our schedules to make time for weekly group meetings.
After talking to my teammates and our client, I chalked out a Project Plan, dividing the tasks week-by-week along with other logistical details. This plan made my team super-efficient. Not only did we use it to keep ourselves on track but also to stay well-coordinated and motivated.
Reflection #2
Add details like time, location, method of communication, and members involved for every task in your project plan. Plan clarity is a major motivation factor for team members.
Rapid Prototyping
I kept a paper and pen always handy in all our meetings. Any idea that got discussed made its way onto my notepad. Paper sketches are quick, simple, and ensure that ideas are being interpreted as accurately as possible. I would give my roommates tasks to complete using my prototypes, and I asked them to Think Aloud as they navigated. My notes from these roommate usability test sessions, coupled with client feedback, helped to transform my paper sketches into digital prototypes on Sketch quickly.
Paper Prototype
High Fidelity Prototype
Final Grants Page
Think Aloud sessions
+
Client feedback
Think Aloud sessions
+
Client feedback
Weekly stakeholder meetings
Our team met our client online through Skype every Friday. A typical meeting involved presenting our prototypes, noting down feedback, and discussing our plan for the next week.
Challenge #3
There were major communication issues in the beginning. Our client had trouble understanding and responding to our weekly presentations. I quickly realized that it was because he was unfamiliar with the technical terms we were casually throwing around during our presentations.
Solution #3
I started using simple terms and analogies during presentations and brought my teammates’ attention to the same.
Screenshot of one of our weekly Skype meetings with our client after getting feedback on our high-fidelity prototypes.
Content Writing
I also took up the role of a Content Writer in the project. I interviewed the client multiple times to understand how the organization functions and ran some drafts by him to finalize the written content that you now see on the finished website. The unintentional benefit of content writing was that I learned new information (for example, the partnership with Kids Can CAD) about the organization that eventually made its way to the website.
Design System Creation and Development
For the brand guidelines, my teammates and I spent a good amount of time picking an accessible combination of colors for the website. This was particularly challenging because we were asked to use photos as backdrops by the client and choosing a color with a good contrast ratio with the multiple colors on the photo was close to impossible.
Challenge #4
Using catchy photos as a backdrop made our client happy and looked aesthetically pleasing, but it did not pass the accessibility test. We used Contrast Checker to try various combinations and failed.
Solution #4
Add a black overlay and adjust its opacity to make the text more prominent and accessible to people with vision impairments.
Our team’s Software Developers were using a front-end framework called UI Kit. We designers built a design system that the developers could quickly incorporate with the framework. We tried to find the sweet spot between aesthetics, usability, and feasibility for every button, image, font, color, and text size by collaborating with the developers.
Reflection #3
Communicate with developers right from the beginning. Account for the possibilities and constraints of the tools they use in the design process.
I clicked this picture at one of our weekly meetings at the UMBC library. We were collaborating with the two Software Developers to make feasible prototypes.
Usability Test
The website was nearing completion, and I knew that the true test of its accessibility would come only if we tested it with people who have disabilities. I contacted Knowbility to see if they could help us get in touch with people who would be interested in participating, but we hadn’t heard back, and time was running out. That’s when my blind friend at UMBC, Ali, who was also my mentor at the time, stepped in to give us a quick screen reader accessibility evaluation.
Lesson Learned
Plan the usability test and recruit participants from the beginning, especially when working under a tight deadline!
After asking our client what factors were important to him, we compared and analyzed multiple donation systems in the market. We chose Donorbox and implemented it, but the usability test revealed that it was not accessible.
Ali used the NVDA screen-reader to evaluate our website page-by-page, and section-by-section. He loved that the website had clearly defined regions, skip-links, semantically correct markup, and alt-text for every image. But the donation form was not screen-reader accessible. The labels in the form did not match the text, which made it difficult for Ali to understand what input was expected of him. Donations were an essential part of the website; therefore, it was important to address this issue immediately.
My friend, Ali, who is blind, testing the screen reader accessibility of the website.
Challenge #5
Finding a donation system that is easy to use for the client and has accessible forms.
Solution #5
Keeping our client's preferences in mind, the Software Developers in our team built a custom accessible donation form using UI Kit and PayPal. This form was accessible and easy to use for Jesse.
The website was complete. After a final screen-reader and keyboard accessibility test, we delivered it to Knowbility on time. And as you already know, we won the competition and lived accessible-ly ever after!
Some Final Website Pages
Website link: https://steamsuccessfoundation.org/
