Let's keep in touch!
.png){kind=small}
.png){kind=small}
© 2025 Khateallen. Fueled by lots of matcha 🍵 All rights reserved.
.png)
For this project, I was tasked to create a Scratch programming book to support our upcoming game creator course. This self-study book aims to guide students, particularly kids, through step-by-step tutorials for various games, preparing them for the junior programming test. Leveraging resources and books in Japanese provided by my company, I translated and adapted content to suit curriculum needs.
For this phase, there was no detailed brief or specific design direction provided. The main objective was to create a website for Uniplay After School that would showcase information about the program. During the initial meeting, I gathered some general notes about the key content they wanted to include. We were asked to incorporate sections such as "About Us," school features, class information, location access, frequently asked questions, and a contact page. Additionally, we were instructed to use the Uniplay After School logo, but the overall design approach was left to our creative discretion, allowing us to structure and visualize the website freely.
This phase involved taking a rough content direction and turning it into a structured, visually cohesive website. We moved through key steps—starting from sitemap to prototype—working collaboratively to build a user-centered and brand-consistent design.
The sitemap shows the website structure, helping users easily find key sections.
.png)
I collaborated closely with my designer teammate during the creation of the wireframes. The low-fidelity wireframes helped us establish the basic layout and flow of the website, ensuring that key sections were well-organized and easy to navigate.
The mid-fidelity wireframes brought significant changes to the design. We added several new frames and sections, moved the navbar to the top and made it fixed for better visibility, and created a separate Contact Us page. This stage helped us refine the content and layout more clearly, and my designer teammate and I worked closely to ensure everything aligned with the project goals.
.png)
For the branding, we based it on Uniplay's provided logo, ensuring consistency with the brand’s existing visual identity. Our graphic designer chose the typography, icons, and character illustrations to complement the look and feel of the site. After finalizing the branding, I proceeded to create the high-fidelity prototype.
.png)
After collaborating on the wireframes and branding, I moved on to creating the high-fidelity wireframe and prototype in Figma. The final prototype allowed us to test both the user flow and overall design before implementation. Initially, I planned to design the entire site in Japanese, but my teammate suggested using English for now so that it would be easier to match with the Japanese content during localization. I was also given the freedom to choose the color palette, which helped shape the early look and feel of the site. Over the years, the website has gone through many changes—while some of my original designs and content were kept, much of it evolved, including the branding and color choices.
The website was successfully handed over as a prototype, and the design was implemented using no-code tools. After the prototype handover, I was not involved in any further changes to the project. Recently, the company updated the website and added a lot more pages and information.
This project helped me improve my wireframing, prototyping, and user experience skills. I enjoyed having creative freedom and learning more about Figma, which pushed me to think more deeply about how users would experience the website. Even though there were only two of us on the design team, I learned the importance of compromise, patience, and working with limited resources. I also gained insight into how web design preferences can vary by culture, especially in Japan where more content-heavy layouts are common.