Background

Accessibility isn't just an optional feature, it's a crucial necessity in today's rapidly advancing digital landscape. Making sure that everyone, especially those with disabilities, can easily access digital information is our top priority

In this project, I designed and developed a website with full accessibility for people with disabilities. The focus was on enhancing their experience when accessing digital content on desktop and mobile devices. I applied principles of universal design and accessibility to ensure usability for users with visual, auditory, cognitive, and motor disabilities.

About the project

The theme of the project

In this project, I invite people from all walks of life to take a culinary trip through the rich tapestry of Vietnamese tradition, with the central topic of the website being one that cuts across national boundaries. For individuals who have a great respect for Vietnamese culture or for anyone who just enjoys Vietnamese food, the theme is a celebration of Vietnamese culinary tradition.

Main goal

Create the Vietnamese Traditional Food website, whose primary goal is to actively engage users in discovering and savoring an array of traditional Vietnamese cuisine and dishes with the focus on creating a website that prioritizes accessibility, ensuring that individuals with disabilities can easily navigate and engage with digital content.

Design Process

I followed the design thinking process, which offers a structured and user-centric framework. This will ensure that the solutions developed are not only visually appealing but also functionally effective and emotionally resonant with users.

User Interview

I conducted research to comprehend the needs and challenges faced by individuals with disabilities when using digital devices. This involved face-to-face interviews with family members who have visual impairments. Each interview yielded unique insights into their experiences with technology, highlighting various struggles and usage patterns.

Personas

Created two personas to address the user needs

Large Project Gallery Image #1
Large Project Gallery Image #1
Large Project Gallery Image #1

Color palette

The color palette was tested in accordance with WCAG standards, ensuring optimal contrast and accessibility for users.

Color palette

The color palette was tested in accordance with WCAG standards, ensuring optimal contrast and accessibility for users.

Color palette

The color palette was tested in accordance with WCAG standards, ensuring optimal contrast and accessibility for users.

Ideate/Prototype

Design

At the beginning of the design phase, I developed a low-fidelity (lo-fi) prototype. By focusing on essential elements like structure, layout, and functionality, it enabled quick testing and iteration.

I tested the prototype to assess its user-friendliness and sought feedback from them to enhance the design, ensuring accessibility for everyone. I then was able to produce the High-fidelity prototype by following the guidelines of universal design. Creating a website structure that was simple for users to understand and navigate was the main priority!

Result: Developed the website - testing

I developed the website using HTML, SASS, and JavaScript, ensuring adherence to the Web Content Accessibility Guidelines (WCAG). I conducted thorough testing with assistive technologies such as screen readers, keyboard navigation, and voice recognition software. Based on the results, I made the necessary adjustments to ensure the website's full accessibility!

Large Project Gallery Image #4
Large Project Gallery Image #4
Large Project Gallery Image #4

Final Screens

Final Screens

Final Screens