Case Study 04:
Acupuncture Site Web Accessibility Guidelines Redesign
Brand Acupuncture Clinic
UX/UI Designer
Mar 2022–May 2022
Problem
A small acupuncture clinic based in Los Angeles, needed to redesign their website with the web content accessibility guidelines (WCAG). Their goal was to be compliant with the American’s with Disabilities Act (ADA). As there were recent lawsuits that hit the acupuncture business sectors for not adhering to web accessibility.
Mr Owl Matheo Cadena
Web Accessibility Designer & Developer
Project Overview
I was hired on as a freelance web developer to redesign and develop to be ADA compliant. With this in mind, I developed the new website using WordPress and incorporated accessibility into the codebase, while maintaining their existing brand identity
Discovery Process
Researching the Problem
- Research & Define the MVP: I researched the WCAG and the ADA requirements to determine the minimum viable product (MVP) for the acupuncture clinic.
- Redesign & Code with Accessibility: I coded with HTML5, ARIA labels, and CSS3, which revamped the user experience with web accessibility features for assistive technologies.
- Maintain the Brand Identity: I used the existing website to maintain the clinic’s unique brand identity. Further, I made sure each UI component followed accessibility principles.
Solution
Redesigned and coded their new website with accessibility built into the source code. Made sure the website was mobile first responsive. Refactored the UI to be flexible and scalable ensuring the primary content and navigation continues to work to scale across the range of ability for different accessibility needs and preferences. Encoded tabular website navigation for a smoother screen reader and assistive technologies experience.
Design Process
Earned a Accessibility Design Workshop Certification
I attended a 32 hour intensive Web Accessibility Design certification course. The workshop was facilitated through AIGA LA, the professional association for design. I learned about accessibility technologies that empower people with different abilities to access the web. The course was lead by Dan, an accessibility design authority and thought leader. This taught me to design for the many use cases on the web that improve the user experience for everyone.
Tools & Implementation
Accessibility Research & Deployment
I coded for accessibility compliance by adding: Tab-key navigation, semantic HTML5, ARIA labels, and title tags, making the website accessible for screen reader tools. These features support visually impaired users accessing the site.
Scalable, Flexible, & Accessible
Made sure to code using scalable units for all parent elements. With this intention, I made the website more flexible and scalable using dynamic units (rem) rather than static units (px).
Coding with WCAG
As I coded, I followed the WCAG adding HTML tags throughout the website’s source code. This made it easier to navigate with accessibility software (screen readers, UI scalers, and keyboards).
Results
Thanks to my redesign, the acupuncture clinic’s newly launched website successfully met the WCAG 2.1 standards. I was able to help them by ensuring their website provided a more inclusive and accessible user experience. Most importantly, I successfully coded and launched the new clinic website so that it’s compliant with the Americans with Disabilities Act (ADA)within 3 months timeframe. Which protected the client from the a serial lawsuit spreading throughout the industry.
Better User Experience for All
WCAG Makes the Site Better for Everyone
By adhering to the WCAG the user experience is improved for everyone. The site now supports: keyboard navigation, high color contrast making it easier to read, and responsive typography that dynamically resizes with the users’ preferences.
Semantic HTML5 Structure
Coding using semantic HTML5: Structures content logically and makes it easier to navigate a website using screen reader software. Further, it makes the website more resilient if JavaScript is disabled by the user some sites fail to load.
Clinic Inquiries Increased
As a result of the HTML5 codebase changes, their search engine optimization (SEO) rating also increased. Consequently, the clinic saw an increase in new customers discovering inquiring through their website.
Reflection
I learned how to successfully integrate the WCAG into the design process, which is crucial for creating an accessible web.
The success of this project showcases the significant impact of designing with inclusivity in mind. This experience underlines the importance of designing accessible digital spaces for all user segments. Integrating web accessibility guidelines into the redesign process, ensured the acupuncture clinic remained committed to serving all visitors, regardless of their abilities.
Looking Back
What I’d Do Differently
Conduct Usability Tests with Differently Abled People
Usability testing with differently abled people is crucial for UX designers. With this intention, we uncover accessibility barriers overlooked in standard testing, while ensuring products are truly inclusive. Tailored testing uncovers new pain points, ultimately showing that most products and websites don’t work when interaction is dependent on assistive technology. An accessible design process fosters empathy for the many people beyond the standard expectations and use cases. This expands our understanding of diverse user needs, and ultimately leads to more usable and equitable designs for everyone. It’s not just about compliance: It’s about creating a positive experience for all users.
Let’s Work Together
Hiring a Designer?
If you’re looking for someone who’s passionate about design, advocates for accessibility, and is a voice for your users’ needs — then, fly me an email.
Next Case Study
USAKRA, Non-Profit:
Leveraging Lean UX Process to Save Time & Money
Product Designer
Case Study 05
Created sitemaps, wireframes, gorilla personas, user stories, mockups and a design system that cut the time and costs of web development in half for a grassroots animal rescue based in LA.