A2Makerspace
Roles - designer, researcher, web developer
Methods - visual design, wireframing, prototyping, accessibility design, user research, usability testing
Tools - Figma, HTML, CSS, JavaScript, PHP, MySQL
During the summer of 2023, I worked as a website design researcher for the Tufts Center for Engineering Education and Outreach. I worked collaboratively with PhD student Kat Allen to design and implement a WCAG 2 AAA compliant website to serve as a "digital makerspace" and collaboration center for accessibility technology. The website is a work in progress and has been taken over by a group of Tufts students as a senior capstone project.
Visit the A2Makerspace
I also kept a Notion page to document my work
Concept
We wanted to develop a hybrid maker space community that prioritizes the needs of individuals facing accessibility challenges in their daily lives. Our approach centered disabled people and others who require access—not just as clients but as the primary designers and builders of solutions. To support this, we wanted to provided accessible tools and tutorials, empowering individuals to create their own solutions or collaborate with others who have complementary skills. The heart of this community is be a website featuring interviews with disabled makers who have designed adaptive tools for their own use, alongside tutorials on the techniques they employed, enabling beginners to build their own projects. Our goal was to create a WCAG AAA-compliant website with English and ASL captioning on all videos, as well as English transcripts, ensuring accessibility for all.
Features
- Upload projects and a space to share finished and unfinished projects
- Host live hackathon sessions
- Video tutorials
- Forum for discussion
- Featured projects and interviews on front page
WCAG AAA Guidelines
In adherence to the promise of inclusivity and accessibility, the website required WCAG (Web content Accessibility Guidelines) 2 AAA compliance, which represents the highest standard of web accessibility. set by the World Wide Web Consortium. Achieving WCAG AAA conformance indicates an exceptional commitment to inclusivity, addressing intricate accessibility considerations beyond the basic and intermediate levels. This includes sign language interpretation, image readability, and assistive technology support among many other requirements.
User Research
To gather insights, interviews and surveys were conducted with a diverse group, specifically including individuals with disabilities to ensure a nuanced understanding of accessibility requirements. Participants were able to share their experiences, challenges, and expectations related to digital platforms, particularly in the context of accessibility. The feedback gathered from users with varying abilities played a pivotal role in shaping the design and functionality of the virtual makerspace.
- Respondents highlighted the significance of simplicity in the website's structure and user interface
- Prioritize a clean, intuitive layout
- Easy navigation for users with different levels of digital literacy and various assistive technologies
- Particularly for users with cognitive disabilities
- Preference for well-organized and easily digestible information
- Incorporate information hierarchy
- Deliver information in a straightforward and comprehensible manner
- Particularly for users that are visually and hearing impaired
- Images need to have descriptions that are able to be accessed with screen readers
- Videos need to have captions and ASL interpretations that are easily accessible.
- The site needs to be intuitively navigable
- Fully functional with keyboard-only navigation
- Clear and consistent navigation pathways
- Minimize the number of keystrokes required to move between sections or access specific features
- Integration with a variety of assistive tools, such as screen readers, voice recognition software, and alternative input devices
Wireframes
Based on the proposed features and user research, I created some initial wireframes of the site
I also created initial mockups and prototypes of the site using Figma, but I unfortunately do not have access to the Figma page anymore.
Website Features
-
I kept the overall design of the website fairly simple, which facilitates accessibility and easier compliance with WCAG guidelines
-
Easily navigable and supports keyboard-only interaction
-
The headings on each page make it simple to identify the current page
-
Each image on the site is able to be read by a screenreader via an alt tag description
-
Each video on the site has corresponding links for the video's transcript as well as the video with ASL captioning
-
I chose to use a relatively monochromatic color scheme both for improved accessibility and to achieve better contrast