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 Length: 3 Months
Team Size: 6
The process for this project included:
User Persona Workshop
Brand Identity Workshop
Style Scapes
WireFrames
Detail Fixing
Design Iterations
Webflow Setup
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
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
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
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
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:
www.hgys.org.au
HGYS: webflow