.st0{fill:#FFFFFF;}

Design

Prioritizing Inclusion 

business, client, development, improvement, process, product, relationships, strategy, ui, ux, visualization

How may we enhance the overall user experience for everyone?

Throughout my career journey, I’ve collaborated with numerous organizations, businesses, and professionals committed to social responsibility and equal opportunities for both employees and customers. I’ve consistently advocated for creating an inclusive and accessible online experience for all users, and I’ve acquired web design and development skills that support these goals.

Text Readability

Ensuring that text remains legible and can be resized without affecting content or functionality is crucial. According to the World Health Organization (WHO), around 30% of the global population, or 2.2 billion people worldwide, experience some form of vision impairment or are blind.

To maintain readability on websites and in HTML emails, I have:

  • Implemented interactive text-sizing features on websites and used relative units in styles and CSS (e.g., percentages and ems) to allow for easy text resizing.
  • Selected font-families native to browsers and email programs, eliminating potential font substitution issues.
  • Guided designers in making typography choices that enhance legibility.
Example screenshot of a website that includes an interactive element to adjust the text or font size in five steps from smallest to largest.
When tasked with redesigning the local library system’s website, I saw a great opportunity to improve accessibility. I introduced an interactive text-sizing feature prominently displayed in the top left corner of the website. This visual reminder allowed users to easily adjust text size according to their preferences.

Language Support

Only about 20-25% of the global population is estimated to speak English to some extent, and only a fraction of them may be proficient in reading and writing it. I’ve had the privilege of supporting users who may not fully understand English or are native speakers of other languages.

To address language barriers and respect cultural differences in content, I’ve taken the following steps:

  • Ensured that databases use standard character encoding (e.g., UTF-8) to support characters and symbols from various languages.
  • Implemented internationalization (i18n) and localization (L10n) practices to accommodate different languages, cultures, and regions, adapting content and design accordingly.
  • Advocated for clear and straightforward language, benefiting both non-native speakers and individuals with cognitive disabilities.
Example screenshots of various language villages websites showing how both latin and non-latin text characters were displayed in Russian, Spanish, Korean, Swedish, Chinese, and Arabic.
Ensuring the correct display of characters is vital for preserving content integrity and accessibility. My identification of an opportunity to address accessibility through proper database encoding was crucial for displaying text characters correctly. Consequently, language camp leaders were able to edit their websites and write blog posts in various languages with distinct character sets.

Visual Clarity

Accessibility improvements often enhance the overall user experience for all users, not just those with disabilities. Clear and well-structured design can make content easier to read, navigate, and understand.

To support individuals in and from different areas of the globe and those with low or impaired vision, I’ve:

  • Utilized responsive website design to ensure that sites adapt to different screen sizes and orientations, which is especially important for mobile users in diverse regions.
  • Incorporated universally recognized icons and symbols for navigation and interaction to assist users who may not fully grasp the language.
  • Striven to ensure adequate contrast and color differentiation for individuals with visual impairments and/or color vision deficiencies.
Example screenshots from a school district's website that show how the design was mobile responsive, and how weather icons paired with colored backgrounds and off-site link buttons with orange arrows made for intuitive design and enhanced usability.
I enhanced accessibility and user experience through intuitive design choices for a school district with a diverse population: weather icons and colors (upper left), clear off-site links (buttons with orange arrows at lower left), and mobile responsiveness (right).
Example screenshots of a prototype of The Grid Tool tested with an online color-blindness visualizer, and a screenshot of The Grid Tool overlaid with the Swatches palette in Affinity Designer with a Visually Impaired palette open and a light blue element selected on the design.
To streamline the process of designing for accessibility, I created color palettes for Affinity design products using color schemes suitable for all individuals (bottom left), including those with color blindness, as recommended by research by Paul Tol. I’ve used these palettes in the creation of websites and graphic designs, including on the latest versions of The Grid Tool (top and right are screenshots of color-blindness tests I conducted on prototypes).

Future-Proofing

Designing with accessibility in mind ensures the longevity of your online presence. As technology evolves, it becomes easier to adapt to new devices, screen sizes, and assistive technologies when you have a solid accessible foundation.

By following web accessibility guidelines like WCAG (Web Content Accessibility Guidelines), I have:

  • Utilized alt text for images and provided transcripts and captions for multimedia content to facilitate comprehension for screen readers and non-native speakers.
  • Ensured that keyboard navigation is intuitive and efficient for users who may not be using a mouse, particularly important for individuals with disabilities and those using non-Latin script keyboards.
  • Employed proper HTML markup for content structure, including heading tags, lists, and semantic elements, facilitating understanding for screen readers and search engines.
Example screenshots of a blog with heading two elements selected, a video with captions, and two photos of wireframe sketches - one online form, and a sidebar element with semantic html element indicators and instructions.
As search engines rely on well-structured content to index and rank web pages, my use of proper HTML markup (top left screenshot and bottom center wireframe sketch), captions (upper right), and emphasis on keyboard navigation (especially for forms – bottom left wireframe sketch) contribute to improved website SEO. Furthermore, designing with accessibility at the forefront results in more user-friendly functionality.

My commitment to accessible design has yielded tangible results in enhancing online experiences for diverse user groups. By prioritizing legibility, language inclusivity, visual clarity, and adherence to accessibility guidelines, I’ve contributed to improved user engagement, expanded audience reach, and ensured a future-proof online presence. These efforts underscore the transformative impact of accessible web design, emphasizing its significance in creating a more inclusive and user-friendly digital landscape.

Visualizing Processes

Visualizing Processes
Cas Johnson