Product Launch Date
May 3. 2023

Team
Larry | PM
Min Huei Lu | UX/UI Designer
Kate Kao | Visual Designer
Tien | Information Architect
Frank | Web Developer

My Role
UX Research
Art Direction
Prototyping
Web Accessibility
SEO

Tool
Figma
Miro
UNVDA Screen Reader
Semrush
Accessibility Scan & Monitor

⊕ Objective

The objective of this case study is 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 that the website is accessible to the general public, regardless of their physical or cognitive abilities.

⊕ Approach

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 proves to be a wise choice for savvy business owners, delivering a substantial return on investment (ROI). 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.

⊕ Learn More

⊕ Results

User Feedback
Conducted 5 1-on-1 interviews with subject matter experts, visually impaired individuals, franchisees, and milk tea buyers. Received valuable insights from 39 survey responses.

Google Analytics
Led design teams in the successful redesign of Gong cha's SEO-optimized and accessible responsive website, launching over 50 webpages, resulting in a remarkable 251.69% improvement in sessions, a 280.51% increase in first-time users, an 87.64% reduction in bounce rate, and a 44.69% boost in page views. The website data is obtained from Google Analytics and SEMrush.

CTR Increase
Three months after the website redesign, the click-through rate increased significantly from 1.28% to 2.80%. This represents a remarkable 119% improvement in user engagement.

Increase in Website Visibility
Initial Visibility: Before the redesign, the website's visibility in search engine results pages (SERPs) stood at 19.62%.
Post-Redesign Visibility: The website's visibility skyrocketed to an impressive 44.40% after the redesign.

Significant Increase in Web Traffic
The website's commitment to mobile responsiveness and user experience led to a 34% boost in web traffic.

Improving Website Accessibility
Using SEMrush, our initial accessibility score was 56%. Given that scores below 75% risk legal issues in Ireland, we addressed and fixed over 150 violations, elevating our score to 88%.

⊕ Research Plan

01 User Goal
Gain a deep understanding of the users' objectives when visiting the website.

02 User Experience Evaluation
Identity users' positive and negative experiences while browsing the website.

03 WCAG 2.0 Compliance
Ensure the website aligns with the WCAG 2.0 guidelines for accessibility.

04 SEO Improvement
Enhance the website's search engine optimization to achieve higher rankings in Google search results.

⊕ User Persona

01 Visual impaired individuals

• Goals
  01 Navigate the website using a keyboard and screen reader.
  02 Customize drinks and place orders successfully through the website.

• Pain Points
  01 Difficulty controlling the rotation banner using the keyboard. Unable to access the last or next slide.
  02 Inaccessible map with numerous filters that cannot be accessed using the keyboard.
  03 Lack of warning or means to return to the brand site when redirected to a third-party online order and delivery webpage.
  04 Insufficient color contrast for individuals with color blindness.

02 Tea enthusiast

• Goals
  01 Obtain information about nearby Gong Cha store hours, address, latest seasonal drinks, promotions, reward points, and ordering methods.
  02 Access nutrition facts, calorie information, and allergen ingredients for health-conscious decision-making.
  03 Can file a complaint if there is a negative experience with Gong Cha.

• Pain Point
  01 Difficulty understanding drink ingredients and sweetness levels with only the drink's name and picture.

03 Potential Franchisee

• Goals
  01 Obtain comprehensive information about franchise costs and the joining process.
  02 Access details about the franchise support team, real estate developers, inventory and training.
  03 Select a trustworthy brand among various franchise options.
  04 Connect with industry experts to successfully launch a franchise store.

• Pain Points
  01 Incomplete or non-transparent information regarding the franchise or joining process.
  02 Hidden fees or undisclosed additional costs associated with joining a franchise brand.
  03 Insufficient support leading to unsuccessful store launches and financial losses.

04 Event / Wedding Planner

• Goals
  01 Discover and select catering services that best fit the event.
  02 Inquire about pricing, service details, and delivery methods.

• Pain Points
  01 Lack of understanding between serve on-site or self-serve bar options.
  02 Uncertainty about the package inclusions, such as equipment and catering menu.
  03 Needing assistance in selecting the most appropriate services for the event.

05 Potential Bobarista

• Goals
  01 Check for job openings at nearby stores.
  02 Understand the qualifications and job requirements for desired positions.
  03 Obtain information about the company culture, benefits, and perks.

• Pain Points
  01 Lack of clarity regarding job responsibilities and the recruitment process.
  02 Difficulty submitting a resume to the desired store location, with uncertainty about response time.

⊕ Value
Proposition

Brewing Happiness
Gong cha offers guests the highest quality tea and experience around the world.

⊕ Problem Statement

The website lacks accessibility features, making it difficult for individuals with disabilities to navigate and access the information they need. This exclusionary design hinders their ability to understand the brand, product, and services, potentially losing potential customers.

⊕ Landing Page

Key Findings
Rotation banner accessibility issue.

• Visually impaired individuals face difficulties controlling the rotation banner using the keyboard. The rotation time is insufficient for screen readers to complete reading the description texts.

• 85% of users access the Gong Cha website through the mobile app. The rotation banner is ineffective on the mobile app, resulting in slow loading speed or user impatience with the banner rotation.

Solution

• Mobile-first design: We propose a mobile-first web design approach to address these issues. This involves removing the rotation banner and incorporating the relevant information within the scroll-down section.

• Color Contrast: Ensure sufficient text and background color differences for visually impaired users to facilitate readability.

• Text Size and Scalability: Implement responsive typography that allows users to adjust the text size to their preference, ensuring readability for visual impairments.

• Navigation: Design intuitive and easy-to-use navigation menus that are operable through touch gestures and keyboard navigation.

• Alternative Text (Alt Text): Provide alternative descriptive text for all images, allowing screen reader users to understand the context and content.

• Forms and Input Fields: Optimize form elements by incorporating clear instructions, appropriate error messaging, and support for screen reader users.

• Multimedia Accessibility: Ensure that videos include closed captions and audio content is accompanied by transcripts or alternative text.

⊕ Brand

Key Finding
Gong Cha's Challenge in Building Brand Resonance among Americans

• Gong Cha has succeeded significantly in many Asian countries, including South Korea, Taiwan, Japan, China, Singapore, and Malaysia. However, Gong Cha has only entered the European and American markets in recent years. The brand remains relatively unfamiliar to the American audience, making it challenging to resonate. The Gong Cha brand identity system incorporates elements from Asian culture, such as the Chinese logo or the red seal, which further contribute to the cultural gap and hinder brand resonance among Americans.

• For many customers and prospective franchisees, the main reason for choosing Gong Cha is its international brand recognition. They have seen the brand in other countries or cities, contributing to their familiarity and trust in the brand.

Solution
Comprehensive Brand Page for Gong Cha to Bridge the Cultural Gap

• Gong Cha can effectively introduce its brand to the American audience by creating a comprehensive brand page. The brand page should include elements such as the brand story, brand history, global brand expansion, brand identity system, brand philosophy, brand commitment, and brand videos. A Contact Us Form should also be provided to address potential customer inquiries to ensure ongoing communication between the brand and its customers.

⊕ Menu

Key Finding

• Whether it's the menu or seasonal drink promotional banners, screen readers cannot read the text on the pictures if there is text on the images. Users navigating the website with a screen reader cannot access the information, select drinks, or complete purchases.

• Consumers want to understand further detailed drink information, affecting their willingness to purchase.

• The characteristic of bubble milk tea is its high level of customization, where all elements can be adjusted according to the customer's preferences. This includes the type of tea, milk, sweetness, ice level, and various toppings that can be added. As bubble milk tea originates from Asia, many customers unfamiliar with this beverage are unaware of its features and how to place an order.

Solution

• Banners must use descriptive metatext. Avoid using text on images and, instead, use web text that screen readers can read.

• In addition to browsing drink options, include calorie information, nutritional facts, drink ingredients, and allergens.

• Our solution is to visualize the in-store drink ordering experience on the website. We will present the "How to Order" process as a step-by-step guide, allowing customers to easily understand and navigate the process.

⊕ Locations

Key Findings

• Google Search Console data reveals that the keyword "Gong Cha near me" ranks among the most frequently queried terms. Users seek comprehensive store details before visiting. In light of this, we propose creating dedicated pages for each store, complete with images and pertinent information, providing users with valuable insights to aid their decisions.

• Different consumers have varying purposes and information needs when visiting the Locations page.
  A. Tea enthusiasts want to view the nearest stores' operating hours and delivery availability.
  B. Prospective franchisees want to identify active selling stores.
  C. Prospective franchisees must assess distances between Gong Cha stores using a map to avoid customer overlap in the same area while selecting a store location.
  D. Job seekers are interested in discovering nearby stores with recruitment information.

• This page presents a wealth of information to cater to diverse user needs. The inclusion of filters assists users in swiftly locating relevant information. However, we've identified an issue where screen readers struggle to navigate the extensive drop-down menus or filters above the map.

Solution

• Visual representation via a map is more intuitive than a list. However, for users relying on screen readers, the inability to interact with drop-down menus or filters prevents access to store-specific pages. Consequently, we've opted to streamline or eliminate certain filters to enhance accessibility.

⊕ Franchise

Franchise Webpage To comprehensively address the needs of potential franchisees and align with the company's business requirements, we employed various design methods, including competitor analysis, expert interviews, and franchisee user interviews. These methods allowed us to delve into the intricacies of franchisee needs and expectations.

Based on the insights garnered from these methods, our analysis revealed several crucial factors pivotal to the decision-making process of potential franchisees:

1. Brand awareness

2. Emerging industry

3. Appealing products

4. Workflow support

5. Ease of the material import process

6. Franchise financial requirements

7. Staff training

8. Store interior design

9. The professionalism of the development team

Synthesizing the findings, we created an affinity diagram that visually represented the interconnected elements shaping the franchisee experience. This diagram guided the structure of the franchise webpage, facilitating the seamless organization of information across nine distinct pages:

1. Industry Introduction

2. Ideal Candidate

3. Business Model

4. Support System

5. Store Development

6. Brand and Interior Design

7. Financial Requirements and Franchise Flow

8. Franchise FAQ

9. Franchise Application Form

Employing these design methods and the resulting affinity diagram, we ensured that the franchise webpage effectively communicates the comprehensive benefits and opportunities of becoming a Gong Cha franchisee.