GLENSIDE SHOTOKAN KARATE CLUB
Website Redesign & Development for Junior Workshop Class
(2016 – 2017)
Glenside Shotokan Karate Club (GSKC)
Worked in a team of six, our mission was to rebrand and redesign the website of the Glenside Shotokan Karate Club (GSKC) based on the requirements from the club instructors. For the new site, club instructors wanted a more inviting branding which promotes the sense of a community. Instructors wished that through the site redesign more potential students could discover the club, learn more about the club, and decide if the club is the right place for them. Our goal was to design a more modular-like and responsive WordPress site that not only allows the instructors to make easy updates through dashboard but also allows the users to access from any device.
In the beginning, when we first spoke with the instructors and received all the documentation, we realized this site would require quite a lot of content. On the old club site, much of the information was linked to multiple sites. Important information such as the content about the founder of the International Shotokan Karate Federation (ISKF) Teruyuki Okazaki was hard to be found. To young children and their parents who just wanted to register or check class schedule, they are unable to spend a long time on the site reading through a large amount of content. The challenge for us was to design and develop a site that was not only easy to navigate and absorb but also has the allowance for those who wish to dive deeper into the content.
As one of the UX designer in the team, I first started doing research on Shotokan Karate, the history of the Club, and the history of GSKC Dojo. Then worked with the team we identified the user types, conducted user interviews, and created personas and user journeys.
We interviewed Shotokan Karate students around the Philadelphia and Glenside areas and asked them to participate in the card sorting exercises in order to obtain knowledge about which content to prioritize. After we had a good understanding of what content is important to our users, we organized everything into different pages and sections. Then we started creating wireframes for each page and conducted usability testings on each wireframe to help us refine the structure.
As we were working on the wireframes, we also started exploring possible styling options. Initially, the visual design of the site was focused on the representation of the martial arts. The colors choices were restrained to red, yellow, black, white. However, the club instructors suggested us to shift the focus to a more sophisticated approach because they wanted the site to be more inviting. After a few iterations of the style tiles, we picked out colors and patterns from the club and finally decided on a style that represents the club and Dojo the most.
After the implementation of the style to the wireframes, we gradually added content and moved on to the development phase.
High fidelity design of all desktop pages can be seen on Invision.
The site is currently still in development. The initial version of the developed site can be found here.