Silver Website and Web Design · 2024
Brewing Happiness Responsive Website
- A' Design Award 2024 Silver Winner in Website and Web Design
- Awarded April 15, 2024
- CLIENT: Gong cha CA Franchise
- Estimated Number of Design Views: 199,331
- Verification code F0D0C71541 · Verify this award
About Brewing Happiness Responsive Website
The Gong Cha responsive website is a modern and innovative digital platform designed to effectively communicate the brand story, values, and services of Gong Cha, a renowned beverage company. This project places a strong emphasis on inclusivity and accessibility, ensuring that the website is easily accessible to all users, including those with disabilities or visual impairments. Gong Cha aims to foster a sense of inclusiveness and provide equal opportunities for all visitors.
Press Kit
- Unique Properties
- The Gong Cha responsive website is a modern and innovative digital platform designed to effectively communicate the brand story, values, and services of Gong Cha, a renowned beverage company. This project places a strong emphasis on inclusivity and accessibility, ensuring that the website is easily accessible to all users, including those with disabilities or visual impairments. Gong Cha aims to foster a sense of inclusiveness and provide equal opportunities for all visitors.
- Dimensions & Packaging
- Website Technical Specifications
Supported Browsers: Latest versions of Chrome, Firefox, Safari, and Edge.
Mobile Device Compatibility: Adaptive design supports all major browsers on iOS and Android systems.
Layout: Utilize Responsive Web Design to ensure the website provides a good user experience across different screen sizes and resolutions, including mobile, tablet, and desktop.
Breakpoints: Design for common breakpoints to accommodate different devices (e.g., 320px, 480px, 768px, 1024px, 1280px)
Website Technical Specifications
WCAG Compliance: Follow the Web Content Accessibility Guidelines 2.1 at least to the AA level.
Keyboard Navigation: Support complete keyboard navigation for users with visual impairments.
Screen Reader: Website elements (like buttons, links, form fields) should have clear labels and semantic markup to support screen readers.
Search Engine Optimization
Meta Tags: Each page should have unique and relevant titles, descriptions, and keywords.
Structured Data: Use schema.org markup to improve search engine recognition.
Friendly URL Structure: Clear and understandable URL structures, are beneficial for both search engines and users. - Tags
- Web Content Accessibility Guideline, ADA Compliance, Screen Reader, Accessibility, Keyboard Navigation, Color Blindness Optimization, Assistive Technology Compatibility, Universal Design,
- Production Technology
- This case study aims to explore and implement accessible web design to improve the user experience for visually impaired individuals, especially those with color blindness and blindness, on the Gong Cha website. By inviting members of the visually impaired community to interact with the existing Gong Cha website—from browsing products to ordering drinks for delivery to a specified location—we observed and recorded their challenges and difficulties throughout the process. These observations served as the foundation for our efforts to improve the website's accessibility.
- Design Challenge
- Designing an accessible, responsive Gong Cha website involves balancing brand visuals with accessibility for users with disabilities. Challenges include creating intuitive, accessible menus, ensuring content adapts across devices, and maintaining accessibility during updates. Additionally, accommodating global audiences adds complexity, requiring cultural sensitivity and multilingual support. This process demands a commitment to inclusive design and continuous adaptation.
- Project Duration
- The project started in May 2021 and finished in Oct 2023 in California.
- Operation Flow
- Gong cha website serves as a welcoming tea shop where every visitor gets a personal assistant the moment they step in. By making the process intuitive - like a conversation in a friendly café - we ensure everyone can enjoy what we offer regardless of tech-savviness. This approach means fewer frustrations, quicker orders, and a better overall experience, making our website not just a place to shop but a pleasant part of your day.
- Research
- This case study aims to outline the process and considerations involved in designing an accessibility-responsive mobile web design for Gong Cha, an international franchise brand specializing in offering the highest quality tea to the public. The primary goal is to ensure the website is accessible to the general public, regardless of their physical or cognitive abilities. An accessible website offers numerous business advantages that can significantly benefit an organization. By ensuring accessibility, businesses can expand their audience reach, boost profitability, improve brand image, foster customer loyalty, and mitigate legal risks. Consequently, investing in web accessibility is a wise choice for savvy business owners, delivering a substantial return on investment. To investigate the user experience of visually impaired individuals using screen readers to navigate the website, we conducted thorough user research and followed the user-centered design process.
- Inspiration
- Gong Cha recognizes the importance of making their digital presence accessible to individuals with disabilities or visual impairments. To achieve this, the website incorporates various accessibility features. By prioritizing accessibility in the design and development of the Gong Cha responsive website, the brand aims to create an inclusive digital space for all users. This commitment demonstrates Gong Cha's dedication to diversity, equal access, and social responsibility.
Colors of Brewing Happiness Responsive Website
Get Brewing Happiness Responsive Website
Premium Handcrafted Bubble Tea Experience
We bring authentic Taiwanese tea culture to life with our extensive menu of handcrafted beverages. From classic milk teas to innovative fruit blends, each cup represents our commitment to quality and tradition. Experience why we're recognized internationally for excellence in both taste and service.
G0E25 ShopDesign Interview about 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 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.
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.
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 entire process, from conceptualization and user research to redesign, updates, and ongoing maintenance, took approximately one year.
It was an honor to contribute to Gong Cha's digital transformation during my time working with the brand. In the past, customers had to visit physical stores to make purchases. Today, this design has introduced a diverse, technology-driven shopping experience. Customers can now access product information and shop online without needing to visit a store, saving them valuable time.
For the brand and company, the website extends their reach to a broader audience, enhancing brand awareness and expediting the process from order placement to delivery. Most importantly, this design significantly improves the overall shopping experience for customers.
For the brand and company, the website extends their reach to a broader audience, enhancing brand awareness and expediting the process from order placement to delivery. Most importantly, this design significantly improves the overall shopping experience for customers.
This website was specifically designed for Gong Cha and will continue to serve the brand in the future.
An official website is a crucial asset for any consumer-focused company. It not only enhances the brand's image but also offers practicality and convenience for customers. I was inspired to design this particular website to bridge the gap between traditional in-store experiences and modern digital solutions.
This type of work allows the brand to create a strong online presence, making it easier for customers to explore products, stay updated on new offerings, and complete purchases effortlessly. Additionally, the website empowers the company to reach a wider audience, improve customer engagement, and adapt to the fast-paced digital landscape.
By focusing on accessibility and user experience, this design serves as both a functional tool and a representation of the brand's values, making it an essential part of their digital transformation journey.
This type of work allows the brand to create a strong online presence, making it easier for customers to explore products, stay updated on new offerings, and complete purchases effortlessly. Additionally, the website empowers the company to reach a wider audience, improve customer engagement, and adapt to the fast-paced digital landscape.
By focusing on accessibility and user experience, this design serves as both a functional tool and a representation of the brand's values, making it an essential part of their digital transformation journey.
Gong Cha operates in over 30 countries, and the brand's identity is the result of collaborative efforts from design teams around the world. This global approach has allowed the brand to resonate with diverse audiences, creating a universally loved and recognized image.
For this specific project, inspiration was drawn from the collective design ethos established by Gong Cha's international teams. By studying their work and understanding how they adapted the brand for different regions, I ensured that the website would align with the brand’s global identity while addressing local customer needs in California.
Collaboration with other teams provided invaluable insights into maintaining consistency across multiple markets while incorporating fresh ideas to enhance user experience and accessibility. This project is a true reflection of Gong Cha's international spirit and the power of teamwork in creating something truly impactful.
For this specific project, inspiration was drawn from the collective design ethos established by Gong Cha's international teams. By studying their work and understanding how they adapted the brand for different regions, I ensured that the website would align with the brand’s global identity while addressing local customer needs in California.
Collaboration with other teams provided invaluable insights into maintaining consistency across multiple markets while incorporating fresh ideas to enhance user experience and accessibility. This project is a true reflection of Gong Cha's international spirit and the power of teamwork in creating something truly impactful.
The target audience for this design includes anyone who loves tea culture and appreciates high-quality beverages, as well as aspiring entrepreneurs interested in joining the Gong Cha franchise.
For tea enthusiasts, the website serves as a gateway to explore Gong Cha’s diverse menu, learn about new product launches, and easily place orders for delivery or in-store pickup. It caters to both casual customers looking for a quick treat and devoted fans who want to engage more deeply with the brand.
For potential franchisees, the website provides comprehensive information about Gong Cha’s franchise opportunities, including details on how to join the network, benefits of the partnership, and resources to guide their journey as business owners.
By addressing the needs of both consumer and business audiences, the design creates a versatile platform that strengthens Gong Cha’s connection with its customers while expanding its presence in the global market.
For tea enthusiasts, the website serves as a gateway to explore Gong Cha’s diverse menu, learn about new product launches, and easily place orders for delivery or in-store pickup. It caters to both casual customers looking for a quick treat and devoted fans who want to engage more deeply with the brand.
For potential franchisees, the website provides comprehensive information about Gong Cha’s franchise opportunities, including details on how to join the network, benefits of the partnership, and resources to guide their journey as business owners.
By addressing the needs of both consumer and business audiences, the design creates a versatile platform that strengthens Gong Cha’s connection with its customers while expanding its presence in the global market.
This design stands out because of its focus on modern visual language while maintaining universal appeal across diverse cultures in both Eastern and Western markets. The minimalist aesthetic is clean and sophisticated, yet approachable, creating a harmonious blend that resonates with customers from different countries.
The design uses soft, smooth elements to visually evoke the sensation of sipping creamy, silky milk tea, connecting the digital experience to the brand’s core product. Every detail, from typography to color palettes, was carefully chosen to reflect the brand’s premium yet inviting identity.
Unlike many other beverage brands that focus heavily on vibrant, crowded visuals, this design emphasizes simplicity and elegance. It prioritizes functionality and accessibility, ensuring a seamless user experience while reinforcing Gong Cha's global presence as a refined and customer-focused brand.
By balancing cultural sensitivity, modern aesthetics, and an emotional connection to the product, this design creates a unique identity that sets Gong Cha apart in a competitive marketplace.
The design uses soft, smooth elements to visually evoke the sensation of sipping creamy, silky milk tea, connecting the digital experience to the brand’s core product. Every detail, from typography to color palettes, was carefully chosen to reflect the brand’s premium yet inviting identity.
Unlike many other beverage brands that focus heavily on vibrant, crowded visuals, this design emphasizes simplicity and elegance. It prioritizes functionality and accessibility, ensuring a seamless user experience while reinforcing Gong Cha's global presence as a refined and customer-focused brand.
By balancing cultural sensitivity, modern aesthetics, and an emotional connection to the product, this design creates a unique identity that sets Gong Cha apart in a competitive marketplace.
The name "Brewing Happiness" was inspired by the simple yet profound joy that tea and beverages can bring to people's lives. It represents more than just the act of making a drink—it’s about creating moments of comfort, connection, and warmth that elevate everyday experiences.
"Brewing" symbolizes the process of carefully crafting something special, while "Happiness" reflects the emotional outcome that the design aims to evoke. Together, the name captures the essence of spreading positivity and delight through a thoughtfully designed experience, whether it’s enjoying a favorite drink or discovering something new.
This name encapsulates the mission to create meaningful connections and foster joy, one cup at a time.
"Brewing" symbolizes the process of carefully crafting something special, while "Happiness" reflects the emotional outcome that the design aims to evoke. Together, the name captures the essence of spreading positivity and delight through a thoughtfully designed experience, whether it’s enjoying a favorite drink or discovering something new.
This name encapsulates the mission to create meaningful connections and foster joy, one cup at a time.
For this project, I utilized a range of design tools to ensure a seamless and efficient workflow:
Figma: Used for prototyping and collaborative design, enabling real-time feedback and iteration.
Miro: Essential for brainstorming, wireframing, and mapping out user flows with the team.
Adobe Creative Suite: Leveraged Photoshop and Illustrator for creating high-quality visuals and assets.
WordPress: Implemented the design and ensured smooth functionality for the website, customizing it to meet project needs.
By combining these tools, I was able to create a well-rounded, accessible, and visually appealing design while keeping the process collaborative and efficient.
Figma: Used for prototyping and collaborative design, enabling real-time feedback and iteration.
Miro: Essential for brainstorming, wireframing, and mapping out user flows with the team.
Adobe Creative Suite: Leveraged Photoshop and Illustrator for creating high-quality visuals and assets.
WordPress: Implemented the design and ensured smooth functionality for the website, customizing it to meet project needs.
By combining these tools, I was able to create a well-rounded, accessible, and visually appealing design while keeping the process collaborative and efficient.
The most unique aspect of this design is its emphasis on web accessibility. From the very beginning, the project prioritized creating an inclusive experience for all users, including those with visual impairments, such as color blindness or other disabilities.
Key features include keyboard navigation, screen reader compatibility, high-contrast color schemes, and text alternatives for all visual elements. These accessibility-focused elements ensure that every user, regardless of ability, can fully engage with the website and complete tasks with ease.
This commitment to accessibility not only sets the design apart but also reinforces the brand’s values of inclusivity and customer care, making it a leader in providing equal digital experiences.
Key features include keyboard navigation, screen reader compatibility, high-contrast color schemes, and text alternatives for all visual elements. These accessibility-focused elements ensure that every user, regardless of ability, can fully engage with the website and complete tasks with ease.
This commitment to accessibility not only sets the design apart but also reinforces the brand’s values of inclusivity and customer care, making it a leader in providing equal digital experiences.
This project involved collaboration with a diverse group of highly skilled professionals, each bringing their expertise to the table. The team included:
Food Photographers: To capture visually stunning images that highlighted the products.
Food Stylists: To ensure the presentation of the beverages and dishes was appealing and aligned with the brand's image.
Graphic Designers: To create cohesive visuals that complemented the website's overall aesthetic.
Brand Designers: To ensure the design reflected and enhanced Gong Cha's identity and values.
Web Designers: To develop the structure and layout of the website with a focus on user experience.
Writers: To craft compelling and engaging content that resonated with the audience.
Web Engineers: To implement the design and ensure the website's functionality, performance, and accessibility.
This collaboration brought together a wealth of technical and creative expertise, resulting in a website that is both visually captivating and highly functional.
Food Photographers: To capture visually stunning images that highlighted the products.
Food Stylists: To ensure the presentation of the beverages and dishes was appealing and aligned with the brand's image.
Graphic Designers: To create cohesive visuals that complemented the website's overall aesthetic.
Brand Designers: To ensure the design reflected and enhanced Gong Cha's identity and values.
Web Designers: To develop the structure and layout of the website with a focus on user experience.
Writers: To craft compelling and engaging content that resonated with the audience.
Web Engineers: To implement the design and ensure the website's functionality, performance, and accessibility.
This collaboration brought together a wealth of technical and creative expertise, resulting in a website that is both visually captivating and highly functional.
Technology plays a central role in this design, transforming the website from a simple information hub into a comprehensive platform for customer interaction and convenience.
The website enables users to browse product information, place orders online, and choose between in-store pickup or home delivery services. It incorporates advanced features like SEO optimization to increase visibility and attract a broader audience.
Additionally, the responsive design ensures seamless functionality across devices, whether accessed via a smartphone, tablet, or desktop computer. This allows customers to effortlessly complete their tasks—such as exploring new products, customizing their orders, and tracking deliveries—on their preferred devices.
By integrating these technological features, the website not only enhances the user experience but also solidifies the brand’s presence in the digital space, making it more accessible and efficient for a diverse audience.
The website enables users to browse product information, place orders online, and choose between in-store pickup or home delivery services. It incorporates advanced features like SEO optimization to increase visibility and attract a broader audience.
Additionally, the responsive design ensures seamless functionality across devices, whether accessed via a smartphone, tablet, or desktop computer. This allows customers to effortlessly complete their tasks—such as exploring new products, customizing their orders, and tracking deliveries—on their preferred devices.
By integrating these technological features, the website not only enhances the user experience but also solidifies the brand’s presence in the digital space, making it more accessible and efficient for a diverse audience.
Yes, this design was heavily influenced by data and analytical research, as we adopted a data-driven design approach throughout the project. The research process included:
Primary and Secondary Data Collection: Gathering firsthand insights from user interviews, surveys, and focus groups, as well as analyzing industry reports and competitor studies.
User Interviews: Conducting interviews to understand the needs, preferences, and pain points of target users.
Competitive Analysis: Studying similar websites and brands to identify opportunities for differentiation and innovation.
Sales Data Analysis: Using sales trends and performance metrics to inform key decisions on features and priorities.
User Behavior Analysis: Examining website analytics and heatmaps to understand how users interact with similar platforms.
Customer Journey Mapping: Creating detailed user journey maps to visualize the customer experience and identify potential friction points.
Usability Testing: Conducting usability tests to observe real users interacting with the website. This allowed us to identify areas of improvement, optimize navigation, and ensure a seamless user experience.
A/B Testing: Testing variations of design elements to determine which solutions performed better in achieving user engagement and conversion goals.
By grounding the design in thorough research, usability testing, and ongoing analysis, we ensured that every element of the website was tailored to meet user needs, drive engagement, and deliver measurable results for the brand.
Primary and Secondary Data Collection: Gathering firsthand insights from user interviews, surveys, and focus groups, as well as analyzing industry reports and competitor studies.
User Interviews: Conducting interviews to understand the needs, preferences, and pain points of target users.
Competitive Analysis: Studying similar websites and brands to identify opportunities for differentiation and innovation.
Sales Data Analysis: Using sales trends and performance metrics to inform key decisions on features and priorities.
User Behavior Analysis: Examining website analytics and heatmaps to understand how users interact with similar platforms.
Customer Journey Mapping: Creating detailed user journey maps to visualize the customer experience and identify potential friction points.
Usability Testing: Conducting usability tests to observe real users interacting with the website. This allowed us to identify areas of improvement, optimize navigation, and ensure a seamless user experience.
A/B Testing: Testing variations of design elements to determine which solutions performed better in achieving user engagement and conversion goals.
By grounding the design in thorough research, usability testing, and ongoing analysis, we ensured that every element of the website was tailored to meet user needs, drive engagement, and deliver measurable results for the brand.
One of the most challenging aspects of this project was conducting usability testing specifically for users with visual impairments or eye conditions. This required extensive observation of how they interacted with the product to identify potential barriers that could interrupt their ability to complete tasks.
We faced several hurdles, such as:
Understanding Unique Interaction Patterns: Each user had different ways of navigating the website depending on their condition, requiring the design to accommodate a wide range of needs.
Identifying Friction Points: It was challenging to uncover subtle issues, such as low-contrast elements or unclear navigation paths, that could significantly hinder task completion.
Iterative Testing: The process involved multiple rounds of testing and feedback to refine features like keyboard navigation, screen reader compatibility, and clear visual cues.
Balancing Functionality and Aesthetics: Ensuring the design met high accessibility standards without compromising the overall visual appeal for other users was a complex balancing act.
Through persistence and continuous collaboration with users during the testing phases, we were able to address these challenges and create a design that is not only accessible but also user-friendly and inclusive.
We faced several hurdles, such as:
Understanding Unique Interaction Patterns: Each user had different ways of navigating the website depending on their condition, requiring the design to accommodate a wide range of needs.
Identifying Friction Points: It was challenging to uncover subtle issues, such as low-contrast elements or unclear navigation paths, that could significantly hinder task completion.
Iterative Testing: The process involved multiple rounds of testing and feedback to refine features like keyboard navigation, screen reader compatibility, and clear visual cues.
Balancing Functionality and Aesthetics: Ensuring the design met high accessibility standards without compromising the overall visual appeal for other users was a complex balancing act.
Through persistence and continuous collaboration with users during the testing phases, we were able to address these challenges and create a design that is not only accessible but also user-friendly and inclusive.
The decision to submit this design to an international competition was driven by a desire to showcase the innovation and impact of the project on a global stage. This design not only embodies modern aesthetics and accessibility but also addresses real-world challenges by creating an inclusive digital experience for diverse audiences.
The project’s success in reaching 150,000 users across 60 countries and its emphasis on web accessibility made it a strong candidate for recognition. Submitting it to an international competition was an opportunity to celebrate the collaborative efforts of the team, highlight the brand’s commitment to inclusivity, and inspire others in the design community to prioritize accessibility in their work.
This competition provided the perfect platform to share the design’s story and the values it represents, while also gaining valuable exposure and feedback from industry leaders.
The project’s success in reaching 150,000 users across 60 countries and its emphasis on web accessibility made it a strong candidate for recognition. Submitting it to an international competition was an opportunity to celebrate the collaborative efforts of the team, highlight the brand’s commitment to inclusivity, and inspire others in the design community to prioritize accessibility in their work.
This competition provided the perfect platform to share the design’s story and the values it represents, while also gaining valuable exposure and feedback from industry leaders.
Designing this project was a transformative experience that deepened my skills and broadened my perspective in several ways:
Empathy Through Accessibility: I gained a deeper understanding of the challenges faced by users with visual impairments and learned how to design with inclusivity at the forefront. Conducting usability testing with these users taught me to think beyond standard practices and prioritize accessibility in every detail.
Collaboration Across Disciplines: Working with professionals from various fields—like photographers, writers, and engineers—enhanced my ability to communicate and collaborate effectively, ensuring the final product met both technical and creative standards.
Data-Driven Design: The integration of user behavior analysis, sales data, and A/B testing helped me refine my approach to making decisions grounded in real-world insights, improving the overall user experience.
Iterative Problem-Solving: The design process required continuous testing and iteration, which taught me patience and the value of feedback in creating a truly polished and functional product.
Balancing Aesthetics and Functionality: Striking a balance between a visually appealing design and practical usability was a rewarding challenge, allowing me to push the boundaries of my creativity while maintaining user-centered design principles.
This project not only strengthened my technical skills but also reinforced the importance of designing with purpose, empathy, and innovation.
Empathy Through Accessibility: I gained a deeper understanding of the challenges faced by users with visual impairments and learned how to design with inclusivity at the forefront. Conducting usability testing with these users taught me to think beyond standard practices and prioritize accessibility in every detail.
Collaboration Across Disciplines: Working with professionals from various fields—like photographers, writers, and engineers—enhanced my ability to communicate and collaborate effectively, ensuring the final product met both technical and creative standards.
Data-Driven Design: The integration of user behavior analysis, sales data, and A/B testing helped me refine my approach to making decisions grounded in real-world insights, improving the overall user experience.
Iterative Problem-Solving: The design process required continuous testing and iteration, which taught me patience and the value of feedback in creating a truly polished and functional product.
Balancing Aesthetics and Functionality: Striking a balance between a visually appealing design and practical usability was a rewarding challenge, allowing me to push the boundaries of my creativity while maintaining user-centered design principles.
This project not only strengthened my technical skills but also reinforced the importance of designing with purpose, empathy, and innovation.
Grand Interview about Brewing Happiness Responsive Website
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.
Achieving the balance between brand aesthetics and accessibility was a key challenge and a top priority for our team. We aimed to create a visually appealing website that stayed true to the brand’s identity while meeting WCAG 2.1 AA compliance standards to ensure inclusivity for all users.Here’s how we achieved this harmony:Accessible Color Palette:We worked closely with the brand design team to refine the color palette, ensuring it met contrast requirements without compromising the brand’s visual identity. This involved testing combinations to create a vibrant yet accessible aesthetic, appealing to users with and without visual impairments.Typography Optimization:Font choices were carefully selected for readability and style. We maintained brand elegance by using clean, modern fonts while ensuring sufficient size, spacing, and contrast to meet accessibility guidelines.Visual Hierarchy:To align with the brand’s minimalist and sophisticated image, we emphasized a clear and consistent visual hierarchy. This not only enhanced the overall aesthetic but also improved navigation for users relying on assistive technologies.Collaborative Iteration:Designers, accessibility specialists, and developers collaborated closely, using tools like Figma and Miro to iterate on designs that preserved the brand’s look and feel while adhering to accessibility standards.Inclusive Testing:Usability testing with users, including those with disabilities, provided critical feedback to ensure that design elements like navigation, forms, and multimedia features were functional and user-friendly. Adjustments were made based on real-world interactions to maintain accessibility without sacrificing style.Accessible Multimedia:Time-based media, such as videos, were equipped with captions and transcripts, aligning with compliance standards while enhancing the storytelling aspect of the brand.By integrating accessibility into every stage of the design process, we ensured that it complemented rather than competed with the brand’s aesthetics. This approach allowed us to deliver a platform that is as visually captivating as it is inclusive, embodying the values of both accessibility and beauty.
Implementing adaptive design features across a variety of devices and screen sizes presented several significant technical challenges, which required careful planning and innovative problem-solving:Responsive Layouts for Accessibility:Ensuring that the website was both visually consistent and functionally accessible across smartphones, tablets, and desktops was a key challenge. Components like navigation menus, forms, and multimedia elements needed to adapt seamlessly without losing usability for assistive technologies, such as screen readers and keyboard navigation.Complex Interactions on Smaller Screens:Designing for mobile-first accessibility required rethinking complex interactions like drop-down menus and content toggles. On smaller screens, these elements needed to remain intuitive, accessible, and easy to operate, even for users relying on keyboard navigation or voice commands.Optimizing Performance Across Devices:Maintaining fast load times and smooth performance on devices with varying hardware capabilities was another hurdle. We optimized assets like images and animations to ensure that accessibility features, such as high-contrast modes and screen reader compatibility, did not negatively impact website performance.Testing Across Multiple Platforms:Consistency was a challenge, especially given the diversity of operating systems, browsers, and device types. Extensive cross-platform testing revealed subtle inconsistencies, such as differences in how screen readers interpreted content or how devices handled responsive layouts, which required targeted adjustments.Dynamic Content Accessibility:Ensuring that dynamic elements, such as live updates or interactive forms, remained accessible across all devices required the implementation of robust ARIA roles and attributes. These elements needed to be functional without introducing unnecessary complexity for users.Balancing Branding with Adaptive Design:Preserving the brand’s visual identity while making adaptive adjustments was another technical challenge. This required creating scalable design systems that maintained Gong Cha’s aesthetic appeal while allowing for flexibility across different screen sizes.To overcome these challenges, our team used an iterative development process, leveraging frameworks like responsive grids and testing tools to fine-tune the experience. Through collaboration between designers, developers, and accessibility specialists, we delivered a website that adapts beautifully and inclusively to any device, ensuring a seamless user experience.
The "personal assistant" approach was born from our goal to create a website that feels intuitive, personalized, and engaging for users. We wanted the website to not only provide information but also actively guide users through their journey, anticipating their needs and simplifying their tasks.Evolution of the Concept:User-Centered Research:During user research, we noticed a common pain point: users often struggled with finding relevant information or completing tasks efficiently on traditional websites. This inspired us to develop a system that mimics the helpfulness of a personal assistant, offering proactive and tailored support.Incorporating Accessibility and Usability:To ensure inclusivity, the "personal assistant" approach was designed to work seamlessly for users with disabilities. Features like keyboard navigation, voice command support, and screen reader compatibility were integrated to make the assistant accessible to everyone.Data-Driven Personalization:We leveraged data analytics to understand user behavior and preferences, enabling the assistant to provide relevant suggestions, such as product recommendations, store locations, or quick access to recent orders.How It Enhances the User Experience:Proactive Guidance: The assistant helps users navigate the website effortlessly, offering step-by-step support for tasks like placing orders, customizing products, or finding store details.Time-Saving Features: By predicting user needs and presenting the most relevant options upfront, the assistant reduces the time spent searching or troubleshooting.Inclusivity and Comfort: For users with visual impairments or other disabilities, the assistant simplifies interactions by providing clear, accessible instructions and alternatives.Engagement and Delight: The assistant adds a layer of interactivity, making the experience more engaging and enjoyable, while also reinforcing the brand’s commitment to customer care.The "personal assistant" approach transforms the website from a static platform into a dynamic, user-focused tool that not only meets but anticipates user needs. It elevates the overall experience by combining functionality, accessibility, and personalization in a way that resonates with every visitor.
The journey from May 2021 to October 2023 was marked by continuous iteration and refinement, driven by user feedback, accessibility research, and advancements in web technology. Each phase of development brought us closer to achieving the level of accessibility excellence we envisioned.Phase 1: Initial Concept and User Research (May 2021 – December 2021)We began with extensive research to understand the needs of diverse users, including those with visual impairments. This phase included:User Interviews and Surveys: To identify pain points and accessibility gaps in similar platforms.Competitor Analysis: To benchmark accessibility standards and uncover areas for improvement.The insights gathered formed the foundation for our accessibility-first design strategy.Phase 2: Early Prototypes and Testing (January 2022 – June 2022)During this phase, we developed prototypes and conducted:Usability Testing with Assistive Technologies: Ensuring compatibility with screen readers, keyboard navigation, and other tools.User Journey Mapping: Visualizing how users with different abilities interacted with the platform to identify barriers.This phase highlighted areas that required rethinking, such as improving contrast ratios and simplifying navigation flows.Phase 3: Implementation and Iteration (July 2022 – December 2022)The focus shifted to implementing accessibility features, including:Enhanced Keyboard Navigation: Allowing users to navigate seamlessly without a mouse.Dynamic ARIA Attributes: Ensuring screen readers could interpret and communicate content accurately.Responsive Design: Adapting layouts to work flawlessly across various devices and screen sizes.Feedback from additional testing led to adjustments, such as reworking form validation and improving real-time feedback mechanisms.Phase 4: Advanced Testing and Refinement (January 2023 – June 2023)We conducted more rigorous testing during this phase, including:A/B Testing: To evaluate the effectiveness of design changes on user engagement and task completion.Accessibility Audits: Using automated tools and manual checks to ensure WCAG 2.1 AA compliance.Phase 5: Final Iteration and Launch (July 2023 – October 2023)The final phase focused on polishing the design and ensuring a seamless experience for all users. Key updates included:Interactive Tutorials: Helping new users familiarize themselves with accessibility features.Performance Optimization: Enhancing load times and responsiveness to ensure smooth functionality across all devices.Through this iterative process, the Brewing Happiness Responsive Website evolved into a platform that not only meets accessibility standards but exceeds user expectations. Each iteration brought us closer to achieving a design that is inclusive, intuitive, and impactful.
The integration of schema.org markup and SEO optimization was a deliberate strategy to enhance both accessibility and digital visibility, ensuring the website serves a wider audience while maintaining an inclusive user experience.Supporting Accessibility:Enhanced Screen Reader Support: By using schema.org markup to structure content semantically, we ensured that screen readers could interpret and convey information more effectively to visually impaired users. Structured data provides clear context for elements like navigation, product descriptions, and interactive features.Improved Navigation: Schema.org markup organizes content hierarchically, making it easier for users relying on assistive technologies to locate specific sections of the site.Clearer User Context: Providing metadata such as product details, store locations, and customer reviews helps users understand content more efficiently, especially when using tools like voice search or screen readers.Supporting Digital Visibility:Search Engine Ranking: The structured data markup enables search engines to understand and index content more effectively, increasing visibility in search results and attracting a broader audience.Rich Snippets: Schema.org markup allows search engines to display rich snippets, such as star ratings, product prices, or delivery options, directly in search results. This boosts click-through rates and user engagement.Localization and Reach: Structured data supports geotargeting, enabling the website to connect with users based on their location while maintaining accessibility features.How It All Comes Together:By combining schema.org markup with SEO best practices, we created a website that is not only accessible to users with disabilities but also optimized for search engines. This dual-purpose approach ensures that the site is discoverable by a global audience while offering an inclusive experience for everyone.Ultimately, this technical foundation bridges the gap between accessibility and visibility, proving that thoughtful design and optimization can drive both user satisfaction and digital success.
Designing for a global, multicultural audience required a careful balance of accessibility, cultural sensitivity, and universality to ensure that the website resonated with users across diverse regions and backgrounds. Here’s how we addressed this challenge:1. Extensive Research on Cultural PreferencesWe conducted thorough research to understand cultural nuances, visual preferences, and usability patterns in different regions. This included studying color symbolism, typography preferences, and design elements that resonate with audiences in both Eastern and Western cultures.2. Inclusive Design ElementsColor Palette Adaptation: We selected a neutral yet vibrant color palette that maintained accessibility (meeting contrast standards) while avoiding cultural misinterpretations or exclusions.Typography: Fonts were chosen for legibility and cultural appropriateness, ensuring they worked well across multiple languages and scripts.Localized Content: The website supports localization to adapt content, including language and regional preferences, while maintaining consistent accessibility features.3. Universal Accessibility StandardsWe adhered to global accessibility guidelines (WCAG 2.1 AA) to create a baseline that transcends cultural differences. Features like keyboard navigation, screen reader compatibility, and adaptable layouts ensured the site was usable by all users, regardless of their location or abilities.4. Collaborative Testing Across RegionsTo ensure inclusivity, we conducted usability testing with users from diverse cultural backgrounds, including individuals with disabilities. Feedback from these sessions helped us identify and address potential cultural and accessibility barriers, such as navigation preferences and visual design expectations.5. Flexible User InterfaceWe designed a clean, minimal interface that could adapt to cultural variations without overwhelming users. This approach allowed us to maintain a universal appeal while incorporating localized elements where needed, such as regional product information or store locations.6. Cultural Sensitivity in MessagingThe tone and language used in the website’s copy were carefully crafted to be respectful and inclusive, avoiding idioms or expressions that might alienate users from different cultures.ResultBy integrating cultural sensitivity into every aspect of accessible design, the Brewing Happiness Responsive Website delivers a seamless and inclusive experience for users worldwide. It reflects a commitment to creating a digital space that values diversity and prioritizes usability, regardless of cultural or geographical differences.
The recognition from the Silver A' Design Award highlights the importance of making accessibility a cornerstone of digital design. I envision the Brewing Happiness Responsive Website serving as a model for future developments in inclusive digital experiences by showcasing how accessibility and innovation can go hand in hand.1. Raising Awareness of Accessibility as a Design PriorityThis project demonstrates that accessibility is not just a technical requirement but an opportunity to create meaningful, user-centered designs. I hope it inspires designers and developers to prioritize inclusivity from the very beginning of their projects.2. Advancing Accessibility StandardsBy implementing features like enhanced keyboard navigation, screen reader compatibility, and dynamic ARIA attributes, this website sets a higher benchmark for what accessible web design can achieve. I envision these practices becoming more widely adopted, leading to richer, more intuitive experiences for users with disabilities.3. Promoting Collaboration Across DisciplinesThe success of this project was driven by collaboration between designers, developers, accessibility specialists, and end users. I see this approach influencing future projects by encouraging interdisciplinary teams to work together to address complex accessibility challenges.4. Expanding Accessibility Beyond ComplianceThe website illustrates how inclusive design can go beyond compliance with standards like WCAG 2.1 AA to create a seamless and delightful user experience for everyone. I hope this inspires others to view accessibility not as a limitation but as a creative challenge to innovate and push boundaries.5. Supporting Global InclusivityThe project’s emphasis on cultural sensitivity in accessible design also paves the way for future developments that address the needs of diverse, multicultural audiences. I envision more digital experiences being designed to resonate with users across regions while maintaining universal accessibility standards.6. Fostering a Movement Toward Inclusive Digital TransformationAs more businesses and organizations recognize the benefits of inclusive design—both for their users and their brand image—I believe this project can serve as a case study in the value of accessibility. It demonstrates that inclusive design is not just ethical; it’s also a powerful driver of engagement and innovation.Ultimately, I hope the Brewing Happiness Responsive Website inspires the design community to embrace accessibility as a foundation for creating digital experiences that are not only functional but also empathetic, empowering, and universally impactful.