Hantang Chinese School
Redesigning the website of a Chinese school according to users' needs.
The Assignment
Redesign the website of the Hantang Chinese School to make it more appealing and help users find relevant information more easily.
Context
The client of this project is Hantang Chinese School Eindhoven. This organization was founded in 1978 and it has grown to a school with a staff of 50 volunteers teaching and helping over 200 students with their proficiency in the Chinese language and culture. The school has been named a ‘Model school for learning Chinese’ and is one of only three schools in The Netherlands to receive this commendation. Apart from the Chinese language the school also teaches the Chinese culture through extra hobby lessons and activities.
Goals
-
Update the school's online image to be more modern and interesting for potential clients: redesign the website and logo
-
Reorganize the website's layout so that users can find information more easily.
-
Communicate to users the school's status (history, accreditation etc.).
-
Allow the school to show the activities and classes that they organize.
Role: UX/UI Designer, Developer
Timeline: 4 months (February - May 2020)
Tools: Adobe XD, HTML/CSS, Javascript, Illustrator
The Process
This page will present my work on the project for my second Media Design semester. This was my first large UX/UI project, that I had a lot to learn from and that I am personally still quite happy with.
Defining the client's needs
Our project started with our first meeting with the client, where we learned about their priorities and goals for the website. From this meeting and from what we saw looking at the original version of the website we were able to determine a few focus points:
-
Show connections to Chinese culture, while adding a modern touch.
-
Show the school's history and status.
-
Allow the school to display more personality by presenting their activities through pictures.
-
Offer support for multiple languages: Dutch, Chinese and English.
-
Design a new logo showing elements of Chinese and Dutch culture.
Understanding the users
From our meeting with the client, we were also able to determine some main target audiences to focus on. The most important ones would be Chinese parents and their children that might be students there. A smaller audience could be Dutch or foreign students of various ages that might be interested in the Chinese language or culture.
Several interviews were conducted with students of the school and with parents whose children follow the courses there. Based on the information from these interviews, we were able to gather some information on what the users of the website would want to see.
Affinity maps
Several affinity maps were made for each person interviewed, and were then combined to show their combined feedback.
Personas
Task analysis
Prototyping
Knowing what aspects we wanted to focus on while redesigning the website, we could now start working on prototypes. To begin with, everyone in the group made their own version of what they would think the website could look like, which would then be shared with the rest off the team and discussed.
I started by making some wireframes of the main pages of the website.
I then made my sketches into a higher fidelity prototype through Adobe XD.
Combining our work
After we all shared our ideas for the website, we put our designs together into a functional, high-fidelity prototype.
Making the website
After the prototype was made, tested and modified based on our feedback, we could make the actual website. The pages of the prototype were divided between all the group members, who made them into the final web pages.
Logo redesign
Aside from the website itself, I also worked on a new logo for the school. The client requested something that showed their connection to Chinese culture, while also keeping some Dutch elements.
I started by sketching a few concepts on paper based on this request.
After deciding on a main design, I iterated it on paper and in Illustrator, making the logo into a vector format.
