Perla Portfolio Website

I. Overview

Founded in 2006, Wuxi Korean School offers world-class education to Korean students living in Wuxi and the surrounding Suzhou area in China.

With about 550 students and 100 staff, Wuxi Korean School (WKS) ensures each student gets the education and attention they need to succeed in English and beyond. Wuxi Korean School is recognized not only by the Chinese government but also by the South Korean government for its excellence.

Objective

In order to have continuous growth in admissions, the school website needs an upgrade to both create a more user-friendly experience and to best advertise all of their achievements.

There is no affiliation with Wuxi Korean School for this project other than an English Teaching role.

II. Research

Goal: To understand the audience and primary use of the school website.

Process: Market Research, Competitive Analysis, User Interviews

At the discovery phase of my project, I conducted market research about the typical user of school websites, competitive analysis of other schools in that area's websites, and user interviews in order to get a better understanding of the problem.

Market Research:

According to research conducted by Southern Utah University, professional and creative web designs built "a powerful emotional connection" with their visitors. The main reasoning concluded that professional and accessible web design is important in increasing recruitment, user engagement, and trust in credibility.

School websites must appeal to several different users, the main audience consisting of current students, parents, school staff, and prospective clients, each requiring different needs to be met. WKS currently enrolls students from kindergarten to 12th grade and hires Korean, Chinese, and Native-English speakers, yet their website is only in Korean, thus limiting their accessibility to a large percentage of their prospective users.

Competitive Analysis

I compared the websites of a few schools in the surrounding area (ISW-International School of Wuxi and SKS-Shanghai Korean School) to that of WKS in order to assess the usability and benefits of each.

I discovered several areas for improvement in the WKS page:

WKS pages did not use up the available screen space
Many headings that appear to be clickable are not
There is a false menu that distracts from the true menu
It is unclear to know which page you are currently visiting, how to get back to the home page
Images and fonts are far too small ( there is a button to enlarge the font but does not work for static fonts or fonts in static images)

Comparison chart between Wuxi Korean School's website usability and other international schools in the surrounding area.

Personas

I conducted several interviews and usability tests of the current website among 6 people aged 13-45 (target school page users) and recorded their pain points.

Each participant was given a scenario (eg. You are a parent wanting to find information about the curriculum). I recorded the time that they took to reach the desired page. Many struggled, with some abandoning altogether. Others would click around on the page until they found clickable spaces that lead them to another page.

Overall, users seemed fairly unhappy with the layout of the webpage. Many users claimed it was "too difficult to navigate" or "very old-school."

I set up three personas (student, parent, employee) and referred to them throughout the entire product development process to ensure I would meet their individual needs within the same design. After the interviews, I discovered these top frustrations:

Lack of website interactivity The webpage has many static, unclickable items on the page that cause confusion. There is also a false menu that distracts from the true menu that is too small and unnoticeable.
No Language toggle There is an option to change the font size of non static text but there is no option to change language. This is difficult for users who cannot speak Korean, especially foreign teachers.
Navigation of the pages is not intuitive It takes many layers to get to information that is not already displayed on the home page.

III. Design

Goal: To create lo and hi fidelity prototypes of the website that meets the design needs.

Process: Wireframes using hand-drawn sketches and Figma. Prototype using AdobeXD.

Wireframes

At the beginning of my design process I created lo-fidelity sketches in order to visualize the changes needed to be made to improve the user experience. I took important note of the content that was displayed on the original site and made sure to incorporate them on the new layout. I wanted to make sure the main topics were still a main part of the page while changing how it is diplayed and the interactions that occur.

As mentioned before, one of the main concerns of the original page is the lack of interactivity with multiple objects on the page. For example, there is a false menu directly below a smaller, true menu. Yet, the only way to differentiate is with the cursor. I decided to make buttons and clickable objects more noticeable.
I also wanted to increase the amount of space that the website content would take up. Currently, the content is restricted to a small area in the center of the page, with wide margins, not utilizing the full screen size. I increased the font size and object sizes in order to create a more welcoming and less text-overwhelming feel. I also wanted to ensure that most pages have a cohesive feel so I kept the theme clean, simple, and equal throughout.

UI Design

Once I tested out all the usability mistakes, I started designing the final screens in AdobeXD.

I based the design on school websites located in the US and other schools in the surrounding area, opting for a layout that encompasses the entire screen and is a bit less overwhelming with text.

Based on the interviews, I found that what people desired most was an easier user-interface. I changed the layout completely, only keeping similar key elements, colors, and styles.
Testing the protype on users, I saw that users were not clicking around aimlessly anymore and could find what they were looking for easily.
Users also enjoyed seeing more color and larger images on each page, as before most pages were primarily only text.

IV. Final Thoughts

The biggest challenge was translating the information on the page from Korean to English to identify the key information that needs to be displayed. Since the original website is only in Korean, it is very difficult as a foreign employee, to find information.
Another challenge was identifying the important features that need to be displayed on the homepage and how that would benefit the users daily needs.
While Korean is not my strong suit, I find that a usable webpage is a universal ideal. Creating a page that is easy to use while maintaining some elements of the original style will generate more interest in the school.
I hope to introduce this idea for their website so the community can see continued growth and success of this wonderful school.