OVERA Inc.

A.I Model

Intuitive AI model showcase experience.

Fashion & Beauty / Winner

OVERA Inc.

Fashion & Beauty

Winner

We simplified service explanation using motion and intuitive visuals, solely with mouse and scroll. Meito Shirasaki

Q: Can you briefly describe your project and the concept behind it?

A: AI model is a service that generates high-quality fashion models for apparel companies using AI technology. Our solution solves challenges such as model photo shooting with AI-generated high-quality images optimized for brands and customers. We designed our website to be intuitive and attractive, avoiding complicated explanations of AI technology. Instead, users can experience what an AI model can do through interactive web interactions.

Q: Once you settled on your idea, what influenced your decision on the chosen technical approach? How did it differ or go beyond approaches you’ve taken in the past?

A: As we develop our ideas, we generally have a rough technical approach in mind. If we're uncertain, we'll code it and adjust our approach if needed. Our focus this time was on: 1. Maintaining a consistent aesthetic throughout the website. 2. Creating a comfortable scrolling experience.

Q: What were some of your biggest learning and takeaways from this project?

A: Ensuring new interactive motions being easy to understand and use is always a challenge, but we were persistent and determined this time. Special operability could make design appear elaborate, but it may also compromise service clarity. Our takeaway is that by using scroll and on-mouse actions, as well as enhancing scrolling comfort, we were able to balance usability and comprehension.

Q: What web technologies, approaches, tools, or resources did you use to develop this experience (WordPress, headless, AI, Sublime Text, HTML5, Adobe XD, etc)?

A: We used Figma for design and created a tool to check animations during the idea phase, which allows us to adjust animation parameters as a team. Other tools: * CSS: Small animations * gsap: Animations that require JavaScript * Three.js: Rendering WebGL implementation * Barba.js: Page transitions * gsap: scroll control * WordPress: Page contents

Q: How did the final product meet or exceed your expectations? What results did you see?

A: Our service gained more attention than we initially expected, with mentions on social media and TV shows. We received many inquiries not only from within Japan, but also from all over the world.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: If a simple explanation is enough, then social media and YouTube will do the job. We think there's a more effective approach to promote the content of services using web technology. By creating an interactive website that functions like a presentation, we hope to broaden the potential of websites.

Q: How did you reach a good balance of your own creative ideas and technical capabilities with a fair representation of the client’s brand?

A: We've been constantly thinking about ways to market products or services that don't solely rely on text, but instead incorporate motion. That's why when we received a consultation for this project, we felt like it perfectly aligned with our philosophy, and we were in sync with the client right from the initial proposal of the idea concept.

Q: What did your initial moodboard, wireframe, or prototype look like? How did those ideas change throughout the design process?

A: We brainstormed ideas to display the AI model's ability to change faces by organizing examples and showing how it can intuitively attract attention on the web. To make it easy to understand, we added interactive features with visual representation and dynamic changes instead of just putting images and text together. We also made sure that scrolling felt comfortable and natural as we improved the design.