HGYS

.

Spirit of the lion.

Case Study

Overview

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

Role

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

Skills

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

View Life Project

CLICK TO VIEW

PROCESS

The process for this project included: 

DISCOVERY

User Persona Workshop

Brand Identity Workshop

IDEATION

Style Scapes

DESIGN

WireFrames

Detail Fixing

Design Iterations

DEPLOYMENT

Webflow Setup

DISCOVERY

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

IDEATION

Stylescapes

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 -Cyberpunk Asia

HGYS: Stylescape 2 - Kungfu Nike

HGYS: Stylescape 3 - Cyberpunk Asia

Feedback

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

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

FEEDBACK

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

Deployment

Webflow

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

Want to chat about a project?