.jpg)
Overview
I redesigned Yiyang International Education's website to raise client interest and usability by modernizing and tackling the user experience gaps.
​
Problem
Yiyang International Education's Website had an outdated look that could diminish the professionalism and credibility of the school. Along with being outdated, it had many user issues that had been overlooked. Much information was not clear, cut out from various responsive website layouts, and had buttons that led nowhere.
Role
UX Designer
​
Timeline
4 Weeks
​
Tools
Figma, Figjam, Wix
​
Skills
User Research, Website Design, Wireframing
Initial Problem
The afterschool director of Yiyang International Education (YIE), Kari Fu, expressed concern that the website was outdated and lacked a level of professionalism and sleek look. I conducted a heuristic evaluation of the website pre-redesign. Below is the website prior to the redesign and evaluation chart.
Before
Heuristic Evaluation
.jpg)
.jpg)
Competitive Analysis
In addition to the heuristic evaluation, I conducted a comparative analysis with local leading Chinese afterschool websites such as Learning Tree Walnut Education Center and Hacienda Heights Chinese School.
Key Identifiable features from the Evaluation and Competitive Analysis:
​
-
Clean, organized, and intuitive website with consistent typography
-
Readily available contact information
-
Responsive website layout
-
System prompts to action match
-
Aesthetic and minimalist design meeting WCAG standards
Research
​
Modernize the website to align with industry standards and achieve a professional reputation.
​
Improve the usability and address the responsive layout flaws.
​
Ensure frequently sought-after information, registration, and contact details accessible.
Finalized Website Goals
Target Users
Our target audience are Chinese parents of children ages 4-14. The majority of the users are busy workers who have limited time to care for and educate their children.
Ideation
Site Map & Wireframing
I created a new sitemap to condense the repetitive and disorganized information in order to make the user flow more intuitive.
Utilizing Figma, I produced low fidelity wireframes which later guided my ideation process of the redesign.
Modernize the website to align with industry standards and achieve a professional reputation.
To ideate the modernization, I adjusted the color contrast ratio of the design system and implemented consistent typography throughout the site to enhance readability and visual coherence. Introducing more white space not only contributed to a sleek and contemporary aesthetic, but also fostered a sense of clarity and user-friendly navigation giving the website a polished look.
.jpg)
-
Instead of the outdated font used previously, I opted to use the non serif typeface Open Sans
​
-
To keep consistent branding, I adjusted the color scheme only to create a clearer contrast ratio
​
-
Replacing the yellow background, I opted to utilize white for a cleaner look
Improve the usability and address the responsive layout flaws.
As seen in the screen captures below, the previous version had usability issues, especially on smaller screens where some content got cut off. I fixed this by adjusting the proportions to make sure everything fits well on the screen, creating a more user-friendly and responsive layout.
Before
After
Following the earlier-discussed sitemap, I have strategically restructured the content to enhance user navigation and organization, thereby minimizing potential confusion and creating a more aesthetically pleasing platform.
Before
After
Ensure frequently sought-after information, registration, and contact details accessible.
Furthermore, I have prioritized the placement of frequently sought-out information (grades taught, operating hours, location) and contact details at the forefront of the layout.
Before
Previous website showcasing tiny font of location and grade levels offered at bottom of home page. Activities gallery was relocated to the activities page.
After
The revamped website incorporates the phone number as a functional contact link and showcases the operational hours for user convenience.
Results
The updated website is now live at yiyangeducation.org!
Below are additional before and after snapshots of the redesign.
About Us
Contact
Success Metric
​
Monthly contact form submissions rose by 50%
​
On average, users spent 9 seconds less navigating to their destination
Challenges
Accessibility
​
Knowing that the main audience of this website are Chinese speakers, I had the challenge of creating a website without the proficiency of Chinese writing. I worked with the Director, Kari Fu in adding a Chinese section in the About Us page but would love to have been able to incorporate a dual language option throughout the platform if I had more time. I will keep this in mind as a prioritized adjustment in future projects!
Conclusion
​
Throughout the completion of this project, I acquired valuable insights. I learned through the enhancement of the website's overall UX/UI and its transformation into a more polished and professional appearance. Collaborating with a real-life client heightened the level of accountability and professionalism associated with the project. Though there were challenges, it was met with overwhelming approval. I acknowledge that a team could have helped contribute to a more comprehensive outcome while recognizing that doing this project alone has still greatly improved my knowledge and skills in the field of design.