Coto Japanese Academy Redesign
As Creative Lead, I oversaw the complete redesign of Coto Japanese Academy’s website — the core driver of the company’s lead generation. The previous site was built on an outdated WordPress theme with security issues, limited control over key SEO factors, and poor performance.
Our goals were to improve performance, boost SEO, simplify the inquiry process, and create a scalable system for ongoing content and campaign updates. Over 9 months, we conducted competitive audits, redesigned the site architecture, and iterated designs through an agile workflow. This was a close collaboration between myself, Max Pierson (Project Manager), Gigi Liew (Content Strategy), and the APAC dev team at Human Made. The result was a powerful multisite now supporting English, Japanese, and French, with Chinese in progress.
This chart illustrates the design process used while working on the Coto Japanese Academy redesign.
Our research began by analyzing user behavior on the existing site — identifying landing patterns, common navigation paths, and drop-off points before key CTAs. From there, we developed detailed personas representing both current students and prospective users we aimed to target. We also factored in regional considerations, such as economic context and visa availability, which influence how users in different markets engage with language programs in Japan.
Difficulty locating detailed course information, content overload on some pages leading to confusion, and poor mobile usability across key flows
Improving the site’s information architecture was a key priority. User feedback highlighted several navigation pain points, and we saw a clear opportunity to streamline access to course information and guide users more effectively toward conversion.
We began with collaborative whiteboard sessions to map out user flows, define entry points, and identify friction across the site journey — a photo of one of those sessions is shown here. From there, we iterated through multiple sitemap versions to refine structure, hierarchy, and labeling. The second image shows one of the final working drafts, which reflects a more strategic, conversion-focused layout.
We moved through multiple rounds of wireframing and prototyping to define the layout and functionality of key pages. At key stages, we conducted user testing to validate design decisions and identify areas for improvement. Feedback informed every iteration, helping us refine both the desktop and mobile experiences. Special attention was given to the mobile version, addressing pain points from the previous site and ensuring a smoother, more accessible interface.
The last image in this section summarizes key findings from our user testing. By combining these insights with additional input from stakeholders, we confidently committed to a clear design direction and moved into the production phase.
