Key Language Training

Role(s): Web Designer / Co-Developer, UX Designer

Rebuilding the website for one of the biggest Mandarin teaching centers on the west coast of Canada.

Scroll Down


Located in Vancouver, BC, there is an ever growing demand for Mandarin classes from elementary students to local news anchors. Key Language Training is well respected for their mentors and classes however their site lacks credibility and organization and poses a threat to drive away potential users.

Previous site here >
How can we make KLT's website pleasant to use for its users and have them sign up for classes?
This nav bar adopts the white background with green dropdown menus on the majority of the pages
(not shown in the screenshot but nav bar pages are either missing, redundant or unecessary)
When only clicking the children's Mandarin classes page, the nav bar changes its style to a grey background and appears bigger until exiting to another page

Meet Ruth

Age: 37
Relationship with technology: Is a regular blogger about her BBQ tips
Family: Married, 1 son (9 years old)
Occupation: Public school teacher
Motivations: Family barbecues and owner of the title: Best BBQ ribs in the neighborhood
Interests: Barbecue, blogging, canoeing on the east coast

Ruth feels she lives a fulfilling lifestyle with a simple job and a small family of her, her husband and her only son. She lives in Vancouver where Mandarin is considered the second language.

Being a late mother is never easy especially taking care of her son when her health is not at its peak, still she raises him to be the best that he could ever be. She wants to enroll him to take classes and make new friends but also distract him from his video games.

Her son isn't too keen at the decision to give up his games, nonetheless both Ruth and her son are looking forward to him learning a new language.

KLT Website: For Who?

"There are 3 essential things to a happy life: good scenery, good people and the perfect sauce for your barbecue party!"

User Journey

User journey of before site reconstruction, IF the user was very patient and optimistic about finding classes
Desired user journey of after site reconstruction, fingers crossed!
Previous wireframe of the home individual page and structure of the nav bar pages to study from and discuss with web development team


SKILLS: Designed page layouts and link interactions

First, the navigation structure and organization is the most confusing aspect of the site as it has a lot of links that can definitely be hidden under the drop down, combined or moved to the footer.

New layouts and plans for the website including the FAQ and separate corporate page
"What has KLT done right on their website and what can I do to improve on their shortcomings?"
Paths that the users can take with a main focus on getting them to contact KLT or Sign Up for a class

Building On WordPress

TOOLS: WordPress
SKILLS: HTML, CSS, Javascript

I was responsible for coding on WordPress since the staff are already using it on their previous site. The old site was beyond fixing since confusing bugs were too much of a hassle to touch and it is much faster to start over at this point.

Doodling of the layout and priorities on web page and nav bar on new page layout and design
The footer expanding on each page on the site and more contact information along with social media accounts

Online Courses

The key is now a large icon navigating through the backdrop of binary numbers finding the right lesson to unlock in virtual speed

Illustrations + Icons

"Simple shapes and silhouettes lead the user to the "key" as the final goal and tell its unique story to the user."

TOOLS: Adobe Photoshop, Illustration
SKILLS: Icon Design, Illustration

In addition to building the website, I planned to have illustrations accompanying each service that KLT offers for easy navigating.

Unfortunately, they have been discontinued by the clients however if the images were kept, it would help with their branding and give users a hint of what each service has to offer.

Business Courses

The key for KLT used as a scale to balance the terminology and worth of Chinese currency and the learner's phrases on the right

Private Courses

An expedition to learn and achieve the final goal of the adventurer's journey represented through the ultimate treasure, the "key" to communicate Mandarin

Corporate Courses

Distinguished business men who have the "key" tie are in the background spectating a deal being made with Canadian and Chinese people. Also check the sleeves for flags!

French Courses

Fun fact: KLT offers private French lessons! The key also travels with the Eiffel tower to watch over the French fields

Final Product

"By placing the user first, I was able to help KLT find their flaws and built a tool that carries the message they want to convey to a larger audience."

Although not as optimal as I wished, it did provide valuable experience working with clients who wanted to partake in the design process.

Key Language Training was constantly restructuring their classes so I had to be flexible with adjusting page structure. It was a lot of work each time however the team made it work for the clients on time.

Visit Website >


  • Site provides structure and prioritized features such as contact to lead users to the next step faster and easier
  • Consistency of branding gives increases confidence in the professionalism and legitimacy of Key Language Training
  • Call to action for contact information ensures that user never misses the opportunity to consult with Key Language Training


  • Stock images used on the site project a superficial, vapid impression to users who stumble onto the site
  • Site is lacking in mobile support for mobile users

In The Future...

  • Create the margins for the page before detailing and content
  • Never use low quality images or stock images to communicate authenticity and professionalism
  • Contact the client more before starting on an ambitious side project such as the illustrations by drawing sketches

Let's Talk!

Want to talk about a project?
Need a team member?

Website built and designed by Buu ⚡️