Brewing Happiness Responsive Website

Gong Cha is an international beverage franchise brand. This project focuses on designing a mobile-first, accessible official website specifically for Gong Cha California. The goal was not only to serve the general customer base but also to ensure that individuals with visual impairments, such as color blindness or other eye conditions, could access company and product information with ease.

The design facilitates intuitive navigation, allowing users to effortlessly select stores, customize products, and complete orders for delivery. In 2024, the website successfully reached 150,000 users across 60 countries, highlighting its broad accessibility and global impact.

The main focus of this design was creating a highly accessible website for all users, including those with visual impairments like color blindness or other eye conditions. To achieve this, I implemented several key features:

Keyboard Accessibility: Ensured users could navigate the entire site efficiently using only a keyboard.

Screen Reader Compatibility: Integrated proper ARIA labels and semantic HTML to make the site fully compatible with screen readers.

Text Alternatives for Visual Content: Provided descriptive alt text for all images and visual elements, so users relying on assistive technologies could understand the content.

Color Contrast and Text Readability: Carefully selected color schemes and text styles to meet WCAG standards for contrast, ensuring readability for users with low vision or color blindness.

Clear, Consistent Layout and Design: Developed a simple, intuitive layout to minimize confusion and make navigation seamless.

Accessible Forms: Designed forms with clear labels, error messages, and validation to assist all users in completing tasks.

Time-Based Media Alternatives: Offered captions and transcripts for any multimedia content to support users with hearing or visual impairments.

Ultimately, the goal was to build an inclusive, user-friendly experience that empowers everyone to explore the site, access information, and complete tasks without barriers.

The website will continue to serve all Gong Cha customers by providing essential information about franchise opportunities and updates on new products and brand events. It will also offer customers the convenience of placing online orders for in-store pickup or home delivery.

Our goal is to maintain a seamless and accessible platform that keeps evolving to meet the needs of both franchisees and consumers, ensuring an exceptional user experience for everyone.

The journey to prioritizing inclusive design for users with visual impairments began with a commitment to creating a website that truly served all users, regardless of their abilities. Accessibility is not just a feature—it’s a fundamental part of what makes a design impactful and user-centered.During the initial stages, we conducted extensive user research, including interviews with visually impaired individuals, to understand their unique challenges and needs when interacting with digital platforms. These insights revealed common barriers, such as insufficient contrast, unclear navigation, and incompatibility with assistive technologies like screen readers.This research inspired a data-driven approach to accessibility, where every design decision was informed by usability testing and user feedback. Key features included:Enhanced Keyboard Navigation: Allowing users to navigate the site effortlessly without relying on a mouse.Screen Reader Compatibility: Incorporating semantic HTML and ARIA labels to make content easily interpretable by assistive technologies.High-Contrast Design: Ensuring text and visual elements were easily distinguishable, even for users with low vision or color blindness.Accessible Forms: Simplifying form design with clear labels and error messages to guide users effectively.The ultimate goal was to design a platform that went beyond functionality to deliver a seamless, empowering experience for all users. Winning the Silver A’ Design Award validated this vision and underscored the importance of making accessibility a priority in every project.This journey was not just about solving problems—it was about fostering empathy, inclusivity, and innovation in design, ensuring that every user feels valued and connected through the digital experience.

The inspiration to exceed standard accessibility requirements came from our belief that inclusivity should not be an afterthought but a core principle of design. Our goal was to create a digital experience that empowered all users, including those with disabilities, to engage with the platform seamlessly and confidently.During the initial research phase, we discovered that many websites merely meet the bare minimum for accessibility, often leaving users with visual impairments or motor disabilities frustrated and underserved. This realization drove us to reimagine accessibility not as a checkbox but as an opportunity to innovate and make a difference.We prioritized:Keyboard Navigation: Understanding that many users rely solely on keyboards for navigation, we ensured every element, from menus to forms, was fully operable and intuitive without a mouse.Screen Reader Compatibility: Collaborating with visually impaired testers, we fine-tuned ARIA labels, semantic HTML, and dynamic content to ensure screen readers could interpret every element accurately and efficiently.Beyond technical implementation, our focus was on creating a comprehensive user experience that feels natural, inclusive, and respectful. We conducted iterative usability testing, gathering real-world feedback to refine the design and eliminate barriers that might hinder task completion.This project wasn’t just about following guidelines; it was about fostering a sense of belonging for every user. By going beyond standard requirements, we aimed to set a new benchmark for accessibility in digital design, making the experience truly inclusive and impactful for all.

Our research with visually impaired users played a crucial role in shaping the development of the Brewing Happiness Responsive Website. From the start, we engaged directly with users to understand their unique challenges and preferences, ensuring their voices guided the design process.During user interviews and testing sessions, we observed how visually impaired individuals interacted with digital interfaces, uncovering key insights that significantly influenced our approach:Navigation Simplicity: Many users preferred straightforward navigation with clear, consistent pathways, as overly complex layouts often led to frustration. This insight inspired us to streamline the website’s structure, ensuring all key functions could be accessed with minimal effort.Precise Screen Reader Labels: Testing revealed that generic or overly verbose screen reader labels were confusing and slowed down interactions. We fine-tuned our ARIA labels to be concise and descriptive, providing users with the exact information they needed without unnecessary clutter.Contrast Beyond Compliance: While WCAG guidelines suggest minimum contrast ratios, testing showed that higher contrast levels made a significant difference in readability for users with low vision. This insight led us to prioritize stronger visual distinctions.One unexpected insight emerged from observing task completion: contextual feedback was essential. For example, users appreciated real-time guidance during form inputs, such as confirmation of successful entries or error prompts. This led us to enhance form accessibility with immediate, user-friendly feedback mechanisms.These insights helped us move beyond a one-size-fits-all approach, enabling us to create a design that is not only functional but also genuinely intuitive and empowering for visually impaired users. The process reinforced the importance of empathy and direct engagement in delivering truly inclusive digital experiences.