Rebuilding the website for one of the biggest Mandarin teaching centers on the west coast of Canada.
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
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.
"There are 3 essential things to a happy life: good scenery, good people and the perfect sauce for your barbecue party!"
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
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
The key is now a large icon navigating through the backdrop of binary numbers finding the right lesson to unlock in virtual speed
"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.
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
An expedition to learn and achieve the final goal of the adventurer's journey represented through the ultimate treasure, the "key" to communicate Mandarin
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!
Fun fact: KLT offers private French lessons! The key also travels with the Eiffel tower to watch over the French fields
"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.