Spirit of the lion.

Case Study


Hung Gar Yau Shu Martial Arts School (HGYS), established in 1986, has grown substantially from their humble beginnings. The brand’s identity has gone through a series of iterative updates which weren't unified in a single visual direction. The club also felt the brand gave their customers value that wasn't being addressed in their marketing content


I operated as a Branding Strategist and UX Designer. My goal was to run a series of workshops that would identify users, outline a visual style for the brand and develop a new website

Project Scope

Project Length: 3 Months
Team Size: 6


  • App Development
  • User Requirements
  • User Acceptance Testing
  • UX Design

View Life Project



The process for this project included: 


User Persona Workshop

Brand Identity Workshop


Style Scapes



Detail Fixing

Design Iterations


Webflow Setup


User Persona Workshop

To begin the project I ran a team of four through a user persona workshop where the group came up with various customer traits. Four personas were created with two being selected as the “most common user” and an "aspirational user”. These personas were used in the Brand Identity workshop.

HGYS: Personas

Brand Identity Workshop

The Brand Identity workshop was used to identify key attributes the organisation wants to represent to the users. This was done by brainstorming adjectives for 6 brand criteria. At the end of the workshop, the group selected one adjective from each category to define the brand's desired future state.

HGYS: Brand Values



Similar to mood boards, style scapes are used to develop visual representations of a brand. This was done by selecting pre-existing images that appeal to the target personas and represent the identified brand attributes from the Brand Identity workshop.
I created three style scapes:

HGYS: Stylescape 1 - Traditional Asia

HGYS: Stylescape 2 - Kungfu Nike

HGYS: Stylescape 3 - Cyberpunk Asia


The team liked all three stylescapes. They ultimately chose Stylescape 2 and wanted to bring elements from the other two into the final design.
The approved stylescape was:

HGYS: Final Stylescape


Design System

In preparation of the website build I created a design system to outline basic details such as colours, typography, icons, headers, footers and base UI elements.

HGYS: Design System

Wire Frames

After the Design System was signed off on, wireframes were created. The wireframes were created in Adobe XD, went from low to high fidelity and were constructed into a click-through prototype for review.

HGYS: wireframes


Design Revisions

As wireframes were completed they were passed to the client for design revisions. We went through a series of updates, which ultimately lead to the final design.

HGYS: website concept



Webflow was selected to build the website. This allowed for rapid deployment and enabled fast feedback updates. Once the design was finished, the HTML/CSS code was exported and uploaded to a hosting platform
The live site can be accessed at:


HGYS: webflow

Want to chat about a project?