Awwwards

 

Gong Cha UI/UX Case Study

Gong Cha was established in Taiwan in 2006 as one of the most reliable providers of quality tea in the world. With nearly 1,500 outlets around the world, the popular bubble tea chain became a sensational icon associated with pop culture. Rich, flamboyant, creative and brewed with premium quality, Gong Cha also offers unique drink customisation services for its consumers’ preferences.

Gong Cha Singapore wanted a website that would fulfill its service assurance to their customers by providing them with instructions on how to customise their drinks. To personify the vision of a healthier menu, we blended together fresh aesthetic textures and zesty illustrations on the website.

The Verz Process: From Vision to Reality

Click image to preview

01 WEBSITE DESIGN
Color Palette

We kept to the fresh and healthy feel with this color palette with this colour palette.

  • c
  • c
  • c
  • c
  • c
Typography

We used Libre Baskerville Regular, Libre Baskerville Bold, Arial Regular and Arial Bold to pair best with the site’s design.

02 GRAPHIC DESIGN (DIGITAL MENU SIGNBOARD)

After completing the website, we proceeded to relay its design to the digital signboard of Gong Cha Singapore’s menu for a consistent branding quality. We did not want the menu signboard to simply be an ornament of tea images; we wanted to drive inbound marketing for Gong Cha via a flurry of distinctive illustrations and functions.

Our objective was to give Gong Cha Singapore a platform to stand out from its competitors’ menus. By using Partea’s and Sharetea’s menus as reference points, we designed a visually appealing “How to Order” menu board solely for the purpose of guiding consumers to make an order and customise their drinks. We also came up with 2 menus to accentuate new items and hot sellers.

It was a challenge to assemble the different menu boards and discern their applications between the wide-ranging types of stores Gong Cha has. While the ‘classic’ stores had a full menu of 6 signboards, ‘express’ stores had 4, with one store installed with a portrait-display television.

From the perspective of a graphic designer, lending some emphasis to the oriental history of Gong Cha was necessary to evoke its identity in the minds of consumers. We did this by adding brushstrokes to the design for a calligraphic touch. We also retained the brand colours of Gong Cha to maximise the signboard’s branding style.

03 UI/UX DESIGN (SELF-ORDERING KIOSK SYSTEM)

Our expertise in design transcends the web. Noticing a trend of cashless kiosks that has been catching on with milk tea brands for customising and ordering drinks, our team took on the task of coming up with a kiosk experience that stood out from the convention.

With different roles to fulfill, the team operated from a design thinking approach, gathering information based on personal physical experience, observation and interviews with Gong Cha Singapore.

Now stationed islandwide, Gong Cha Singapore’s self-ordering kiosks embody a User Experience and Interface flow that emulates what consumers expect from a milk tea kiosk. Going a notch further, our design team made use of real photos instead of graphic icons to capture the wholesome authenticity of the Gong Cha’s milk teas.