Open Kitchen

Introduction & Vision

This project introduces OpenKitchen, a web application meticulously developed to enable individuals with diverse abilities to seamlessly engage with and access the cooking process. Moving beyond conventional culinary tools and software, OpenKitchen strives to offer an empowering and independent gourmet experience by tackling common challenges users often face. The application achieves this by integrating several key elements designed to meet specific accessibility criteria, including hands-free timer operation, clear step-by-step cooking instructions, accurate manually created video captions, voice-activated navigation, and configurable interface settings such as adjustable font size and high-contrast modes. This commitment aligns with studies showing that universally accessible items are utilized more broadly by everyone.

In today's technologically driven world, accessibility in digital design is paramount, addressing not only basic inclusion but also fundamental usability for people with disabilities. Projects like OpenKitchen are conceived based on the Social Model of Disability, which posits that societal and environmental barriers, rather than individual impairments, "disable" people. This shifts the responsibility to designers to actively dismantle these hurdles and create globally accessible systems.

"Actually interactive and inclusive products' design is much influenced by theoretical knowledge of handicap."

Specific challenges faced by users with various impairments, along with design considerations, include: Physical, visual, cognitive and auditory impairments.

User Requirements & Personas

OpenKitchen's design is informed by four distinct personas, each representing common accessibility challenges faced by users. Clara Bennett, a 38-year-old librarian with paraplegia and reduced grip strength. Priya Sharma, a 72-year-old retired teacher experiencing Age-Related Macular Degeneration. Ethan Carter, a 19-year-old college student with ADHD, and, Sofia Rivera, a 29-year-old graphic designer with congenital deafness.

Low-fi Prototypes & WCAG Integration

Initial paper prototypes focused on key screens and basic functions, integrating accessibility by addressing specific user needs through focused WCAG criteria. This process refined features and advanced the design for diverse user needs, ensuring crucial information is not dependent on sound and adhering to clear visual cues.

Home Screen (Clara - Physical Impairment): Prioritizes WCAG 2.1.1 (Keyboard Accessibility) and 2.4.7 (Focus Visible) for easy navigation with limited grip. Includes "Voice Navigation" for alternative input. Recipes Screen (Priya - Visual Impairment): Focuses on WCAG 1.1.1 (Non-text Content) for alt text on images, 1.4.4 (Resize Text), and 1.4.3 (Contrast Minimum) for readability. Features clearly labeled recipe categories (WCAG 3.3.2, 2.4.6). Video Tutorials Screen (Ethan - Cognitive Impairment): Emphasizes WCAG 2.2.2 (Pause, Stop, Hide) to reduce distractions from dynamic material. Clear WCAG 2.4.6 (Headings and Labels) and 3.3.2 (Labels or Instructions) aid comprehension. Timer Feature (Sofia - Auditory Impairment): Relies on WCAG 1.2.2 (Captions Prerecorded) for all spoken conversation in video context, and WCAG 1.2.3 (Sensory Characteristics) for visual timer status. Multi-sensory alerts like "FLASHING ALERTS" and planned phone "VIBRATION" are key.

High-Fidelity Prototypes & Inclusive Design

OpenKitchen’s high-fidelity prototype presents an accessible, visually consistent experience across desktop, tablet and mobile. It uses a crisp, modern typeface and a contrast-rich palette to meet WCAG 1.4.3 guidelines for text readability. The design emphasizes card-based layouts and clearly labeled icons to support lower cognitive load. Accessibility is built into each screen: media controls allow pausing and hiding videos (WCAG 2.2.2), animations can be disabled for motion-sensitive users (WCAG 2.2.2), and all text remains scalable without loss of functionality (WCAG 1.4.4). Ratings include textual alternatives for screen readers (WCAG 1.1.1), links are clearly styled (WCAG 2.4.4), and modal interactions are fully keyboard navigable (WCAG 2.1.1, 2.1.2, 2.4.3). Structural semantics and touch-friendly icons in the footer align with WCAG 1.3.1, 2.5.5, and 2.5.8, ensuring usability for screen readers and motor-impaired users.

Usability Testing & Results

OpenKitchen’s Figma prototype underwent remote usability testing to evaluate simplicity and identify design improvements. Five participants aged 18–44 with varied cooking habits and comfort levels interacted with the interface over WhatsApp video. After completing tasks-finding a recipe, adjusting contrast settings, setting a timer, and using a video tutorial they rated the experience using the System Usability Scale (SUS). The result was a score of 94/100, placing the prototype in the top 10% of systems for usability. Despite high marks, users reported confusion around setting the timer, navigating recipe steps, and using video tutorial controls, highlighting areas for refinement.

Updated Designs & Refinements

Based on usability testing feedback, several refinements were made. Timer Modification: The size of timer buttons was increased as it was a major usability finding. Whole Sections Clickable: Recipe detail sections became entirely clickable to access video tutorials, as users were trying to click the whole square, not just a small icon. Navbar for Tablet Mode: A "little navbar" with home, logo, and a hamburger menu with more contrast was added to the tablet version, as users found the previous menu hard to find. Search Bar Enhancement: The search bar was enhanced for broader functionality beyond just meals, supporting searching for "everything in the website" for easier navigation.

This project was a demanding yet incredibly rewarding undertaking. Navigating the complexities of inclusive design and striving to meet diverse accessibility needs presented significant challenges. Through this rigorous process, I've gained invaluable insights into user-centered design, assistive technologies, and the critical importance of creating digital experiences that genuinely serve everyone.