Case study

Yōkai — a website dealing with lizard breeding

Time range
October 2024

Time for reading
~ 5 min

Tags
UX/UI, new project, desktop, mobile,

The process of creating a new product: the Yōkai website. The owners wanted to start a small side business connected to their hobby, and the main purpose of this page was to be showcased at trade fairs.

Context

About Yōkai

The Yōkai brand was still in its early development stages. While the owners had a conceptual vision for the business, there were no formalized brand assets, documentation, or specific visual elements to guide the project.

The project scope

Although they had produced some preliminary drafts, they entrusted me with full creative control over the design and visual direction. The only fixed element in the project was the brand name — Yōkai.

My role in the process

I was the sole designer on the team for this project, responsible for the entire process.

The outcome

The owners of Yōkai were very happy with the results and accepted the design with no major changes. The project was not released yet, however, the design decision still stands.

Design process

Research

Terraristics was a new topic for me, so I began by speaking with people involved in the hobby and researching other exhibitors' websites. However, the market was mostly dominated by companies and shops, which differed significantly from the owners' assumptions.

Therefore, I focused primarily on insights from hobbyists and the owners' vision, while gathering any useful information I could find.

Examples of other pages related to terraristics; Bayzliszek

Examples of other pages related to terraristics; Gekota

Examples of other pages related to terraristics; Gady z Brodą

Proposition from the owners

Although I mentioned before that the Yōkai brand was without selected visuals, they tried to create a first sketches and drafts. They opted for purple accent color and pink blossom tree motif.

They handed me their sketches, however, they stated clearly it’s not any kind of indication where it supposed to go and that I have full autonomy in proposing something new. The only unchangeable thing was the name of the site.

Ideation

Understanding the Yōkai

To fully unlock the potential of Yōkai, I needed to understand the meaning behind the name. The central theme that emerged during discussions with the owners and my online research was Japan and its culture. Yōkai is a collective term for monsters in Japanese folklore, which loosely translates to 'strange creatures.'

In Japanese culture, Yōkai are supernatural beings that can range from mischievous spirits to fearsome monsters. They can take many forms, from animals and plants to inanimate objects, and are often featured in traditional stories, art, and modern media.

Examples of the representation of Yōkai; Kidōmaru by Utagawa Kuniyoshi

Examples of the representation of Yōkai; Kitsune by Utagawa Kuniyoshi

Examples of the representation of Yōkai; Tsuchigumo by Tsukioka Yoshitoshi.

Japanese woodblock art; Onoe Eisaburo by Utagawa Toyokuni.

Japanese woodblock art; Fisherman by Kanae Yamamoto.

Japanese woodblock art; Boy Flower Seller by Okumura Masanobu.

While mischievous and fearsome monsters may not have been the perfect connotation, the rich cultural associations of Japan proved to be a great fit for the overall design process of Yōkai, becoming a central anchor throughout.

Design change process

The owners envisioned their website as a place where potential customers could find detailed information about gecko species. They didn’t want to create a full-fledged shop, preferring to keep it small and 'local.' Their primary goal was to showcase their work at trade fairs, while also having a platform to promote their business.

Our goal was to design a welcoming space where gecko owners could find reliable information about their pets. We aimed to keep it local and small — more of a passion project than a large-scale commercial venture.

Navigation

The first step in preparing the wireframes for Yōkai was to create an overview of the information architecture. Since the website was relatively simple, assigning content to each page was straightforward.

Design moodboard

I created a small mood board featuring screenshots and color samples that aligned with my vision. The main goal was to reference the Suiboku-ga style of art, typically associated with Japan, using a red/black/white color scheme and woodblock-style imagery.

Colors

Initially, I wanted to stick with the original color scheme proposed by the owners, with some adjustments. While the pinkish color could be associated with Sakura blossoms in spring, and thus with Japan, it didn’t quite fit the definition of Yōkai—it felt too soft and delicate.

To better reflect the Yōkai character and align it with the mockup, I shifted the color scheme toward red. On the mood board, I used a deep, almost crimson color, but in the final design, I toned it down to make it less prominent.

Drafts of logo from the owner.

Final selection of logo.

Final products

We developed a small design system with the intention of refining it further if the owners decide to launch the site. Both desktop and mobile versions were designed, ensuring proper scaling and visual consistency.

Final mockup of the main page; desktop & mobile.

Final mockup of the catalog page; desktop & mobile.

Summary

The project was fully approved and prepared for implementation, with a strong visual connection between Yokai and Japanese culture.

The owners of Yōkai were very happy with the results and accepted the design with no major changes. As of early 2025, I know the project is still on hold—the geckos are still too young and need more time before the website can launch. Nevertheless, I consider this a successful project, and even though it hasn't been released yet, I look forward to seeing it in action soon.