Aug 2022 - Dec 2022
Individual Project
User Research, UX Design, Visual Design, Branding
I co-founded U Smarty Pants in 2020. USP is a local Chinese school based in Shanghai offering one-on-one customized lessons targeting working professionals.
The school has been operating on a word-of-mouth basis. After a few years, we wanted to expand beyond our current mode of business.
To attract more potential students and establish brand credibility, we decided to create an official website.
The first step I took was to understand the business goals. I gathered all of the stakeholders for a brainstorming session to find an answer to the question - What do we want to achieve by creating this website?
Let more people know about our brand and our unique teaching style.
Build upon the old word of mouth business model and attract more students.
The next step was to understand user needs. I conducted interviews with 5 current students of different proficiency levels and 3 potential students who are actively seeking a Chinese school.
Students report that they want to quickly learn about the courses the school offers, teaching styles and pricing. In their past experience browsing school websites, they ran into problems navigating to these information.
After students have decided they want to give the school a try, they found it hard to get in touch with the school. The contact information is hard to find and not easily accessible.
When I want to get in touch to get more information, it’s always frustrating if I can’t find the contact details.
Students report that teaching style is a determining factor in whether they want to study at a school. Sometimes they found that the school’s website doesn’t reflect or match their teaching style at all.
I’m tired of going to many trial lessons just to find that the teaching style is not for me. I wish the websites can reflect the teaching style so that I can make a more informed decision before going to any trial lessons.
Emily is about to relocate to Shanghai for work. She is very nervous about moving and wants to look for a Chinese teacher.
1. Find a curriculum for beginners.
2. Find the teaching styles that she likes.
1. Easily navigate the website and contact the teachers.
2. Clear showing of the teaching style
Working in Shanghai, Alex works with a lot of local clients. He wants to learn Chinese to better communicate with his clients.
1. Learn at a pace tailored to a demanding work schedule.
2. Find personalized, one-on-one lessons.
1. Easy navigation to find all the information he needs.
2. Simple contact/enrollment options
After creating the wireframe, I conducted a usability testing where I asked 5 students I previously interviewed to complete a series of tasks and analyze their feedback.
After creating the wireframe, I conducted a usability testing where I asked 5 students I previously interviewed to complete a series of tasks and analyze their feedback.
Navigation
To address this issue, I added a drop-down menu in the navigation bar to improve accessibility.
Navigation
WeChat is the primary communication platform in China. Scanning the WeChat QR code allows new students to get in touch with a teacher easily. Initially I designed the floating button so that users could find the QR code regardless of their position on the page. However, the usability results suggest that users keep accidentally hover over the floating button and got very annoyed.
I removed the floating button and emphasized the contact button on the navigation bar. In this case contact information is still very visible and users always have access no matter where they are on the page.
Content
To enhance readability and user engagement, I refined the section layout. During the second round of usability tests, I found a notable increase in the time participants spent reading the information.
Content
This section demonstrates USP’s Level system. Students can use the system to position their current Chinese level and what they will be learning in the future. In the initial design, if a student is at a more advanced level, students need to scroll all the way down and they often show impatience and frustration when that happens. After consideration, I integrated interactive elements that allow users to easily locate their level with a simple click.
U Smarty Pants has students from diverse backgrounds - different countries, skin tones, professions, and styles. By choosing these illustrations, I tried to incorporate inclusivity in our branding.
- No matter who you are, you can find your place here at USP.
By using bright colors with high contrast, I added an element of fun and vibrancy into the school's identity. The color scheme reflects the dynamic and engaging nature of our teaching philosophy.
- With USP, learning is never dull.
Drawing inspiration from the interactive and engaging nature of USP classes, I added many interactive elements to encourage users to actively participate and explore.
- With USP’s engaging classes, study less but learn better.
