COMPANY

Van Lang Vietnamese and Cultural school 

ROLE

Solo UX designer working with 2 stakeholders

TASK

Usability test, survey, sketch, user journey, wireframe, prototype, visual design 

DURATION

8 months

USER RESEARCH

• 100% of participants could not enroll in the Van Lang school
  
• The photo gallery is hard to navigate
  
• Content and functionality are not logically classified and grouped

I also conducted a user survey with 2 main groups of users: Current users (current parents, teachers, volunteers) and new users (prospective parents and students). 21 people responded, giving me a clearer sense of their top needs when visiting a school website.

— For users who are currently involved with the school

• School's calendar and upcoming activities
• Photos from school activities
  
• Curriculum for each class

— For new users

PROBLEM 1

The list of upcoming events takes up space of the whole homepage.

PROBLEM 2

Enrolling process is not convenient

Current information on enrollment only shows a month before the first registration dates. After the registration time ends, this information will be hidden in the activities section. With the current flow, new parents who look into Van Lang's website may be confused about the process and forget to follow up with the school for the next school year.

PROBLEM 3

Photo gallery does not group photos well

Currently, the photos are organized based on activity types (school activities, campings & picnics, community activities, Youtube gallery). However, usability test participants indicated that they would prefer to find photos based on year. Moreover, with the current design, users will have to click on and view photos one by one.

RESEARCH INSIGHTS

1. BUSINESS

A non-profit organization provides Vietnamese lessons and cultured events to students in the Seattle area wishing to learn.

2. USERS

• Parents whose children currently studying at Van Lang
• Parents who are new to Van Lang
• School administrators
  
• Teachers and volunteers

3. USERS' PROBLEMS

• Do not know about the website
• Cannot navigate the website to find needed information
• Do not know if Van Lang is a good school or not for their kids

4. MOTIVES

5. SOLUTIONS

• Show most important information first based on user research
• Make the enrolling process easier and more transparent
• Improve visual design to catch the users' attention
• Create a better hierarchy

Based on the findings, I approached my redesign in three steps: Information architecture, Core features, and Visual design.

After the user survey, I saw the need to reorganize the architecture hierarchy on the homepage. I created a content priority guide to identify components and their level of importance. 

Since I did not have access to a team of designers, I seek feedback by creating many sketches, wireframes and ran quick usability tests with random users. From these sessions, the users drove my design to a very clean layout.

The results have played a part in my design exploration, as I decided to improve the enrolling experience, promote school events, regroup content.

Solution

I pushed the event calendar to the top of the page. Initially, the two most recent events get featured. By clicking the CTA button "view calendar", users will be directed to a list of all upcoming events. 

Final pick: show upcoming events and event calendar at the top of the page.

Solution

I created an online space where parents always have access to the enrollment form. Once they fill it out, the school administration will contact them when the new school year would start. With this system, parents are ensured to not miss registration days while the school can easily control a database of forms.

With the new flow, information about registration and the school year is always available to prospective students. 

Solution

I also improved the photo gallery, which was indicated to be important to the users. My new design shows grids of photos first, which is more intuitive to the users.

The new photo gallery where photos are organized by events and year.

Showing photos using grid.

I tested the product at various stages of the project and made changes accordingly.

Lo-fi prototypes - I met with the stakeholders weekly or bi-weekly to get feedback on the functionality, content, and design of the website.

Moderated User testing - I conducted a usability test with 10 participants and received positive feedback on the functionality and interaction of the product. 100% of participants were able to enroll in classes at Van Lang. 

• "The website looks nice and clean"

• "Enrolling... okay that was straightforward"

• "I should be able to view all the classes to see if the class quality is good"

After identifying the color scheme and fonts based on the original school logo, I created hi-fi designs and identified the major screens. I used Sketch for the UI design. Below is the style guide I used throughout the final round of design:

My style guide for high-fidelity design.

Provide a more intuitive user experience for 800+ teachers and parents

Increase the success rate of usability test by 70%

Potentially increase traffic by 12%

— Early feedback is key

It is important to seek feedback frequently. Fortunately, I was able to meet frequently with the stakeholders to discuss sketches, ideas, low-fi, hi-fi and kept them with me in the process.

— Design with a low (0) budget

Since Van Lang is a non-profit organization, there was no funding for this project.I learned to conduct user research and usability tests without any expensive tools. I am grateful for this experience where I can solely design for a good social cause.