Skill
Role
Software
Wix Studio Web Design
Responsive Web Design
CMS Development
Rive Animation
Micro-interactions
Website Redesign
CMS Development
Rive Animation
Wix Studio
Rive
Figma
TAPI Taiwanese Mandarin language school
TAPI Taiwanese Language School Website Redesgn
A website redesign for TAPI, a Taiwanese Mandarin language school in Tokyo, Japan.
The project included a refreshed design in Wix Studio and Rive micro-animations to enhance the user experience.
A custom CMS-powered tutor filtering system was developed with Velo by Nibori of N5-Creation.
Project Brief & Objectives
The redesign focused on making TAPI’s content clearer and more approachable while maintaining its existing visual identity.
I redesigned the homepage, trial lesson pages, tutor directory, and individual tutor profile pages in Figma, with a focus on simple and intuitive navigation. TAPI’s mascot, Tapi-chan, was incorporated throughout the UI to create a friendlier and more recognisable brand experience.
After refining the design and user experience with the client in Figma, the new pages were implemented in Wix Studio.
A Collaborative Process, Built for Handover
The design direction was developed in Figma and refined collaboratively with the client before being brought to life in Wix Studio.
Once the redesign was complete, I created a tailored handover guide covering CMS management and the key updates made across the site. The guide was delivered as a PDF through a dedicated Wix Resource Kit, giving the TAPI team a clear reference for managing and updating the website independently.
"What stood out was how Ayaka considered not only the visual design, but also how clear and intuitive the website would be for our users. She responded thoughtfully to our detailed requests and changes throughout the project, and clearly explained the technical aspects, which made the whole process feel smooth and reassuring."
"What stood out was how Ayaka considered not only the visual design, but also how clear and intuitive the website would be for our users. She responded thoughtfully to our detailed requests and changes throughout the project, and clearly explained the technical aspects, which made the whole process feel smooth and reassuring."
FINAL OUTPUTS
Wix Web Design & Velo Development
Rive Micro-interactions in Wix Studio
To make the trial lesson journey more intuitive and engaging, I created custom Rive animations that bring each application step to life. Separate interactions for online and in-person courses communicate the process visually, adding personality and motion without taking up valuable page space.
Built for the web, each Rive file is lightweight at around 100KB.
Multiple artboards are managed directly in Wix Studio, with iframe integration connecting Rive interactions to links across the site.
Custom Search & Filtering with Velo
To make it easier for students to find the right tutor, I designed a custom search and filtering experience based on lesson format, language, and learning goals. The interface was designed to keep multiple filter options clear and intuitive across desktop and mobile.
Working with Velo developer Nibori of N5-Creation, the filtering system was connected to Wix CMS and implemented with Velo. This collaboration brought the UI design and custom functionality together, creating a more flexible and user-friendly way to explore TAPI’s tutors.
Rive Micro-interactions in Wix Studio
To make the trial lesson journey more intuitive and engaging, I created custom Rive animations that bring each application step to life. Separate interactions for online and in-person courses communicate the process visually, adding personality and motion without taking up valuable page space.
Built for the web, each Rive file is lightweight at around 100KB.
Multiple artboards are managed directly in Wix Studio, with iframe integration connecting Rive interactions to links across the site.
Custom Search & Filtering with Velo
To make it easier for students to find the right tutor, I designed a custom search and filtering experience based on lesson format, language, and learning goals. The interface was designed to keep multiple filter options clear and intuitive across desktop and mobile.
Working with Velo developer Nibori of N5-Creation, the filtering system was connected to Wix CMS and implemented with Velo. This collaboration brought the UI design and custom functionality together, creating a more flexible and user-friendly way to explore TAPI’s tutors.
Streamlining Content Management with Wix CMS & Dynamic Pages
Tutor profiles and booking pages were previously built as individual pages and lightboxes, making ongoing updates time-consuming. As part of the redesign, I restructured the tutor content using Wix CMS and dynamic pages to create a simpler, more scalable system.
The tutor directory was rebuilt as a dynamic list, while individual profiles were consolidated into a single dynamic item page connected to the CMS. This significantly reduced the number of pages to maintain and made tutor information easier for the TAPI team to manage and update.
Wix Web Design & Velo Development
