Showing mibot landing page and preorder page

Designing the Experience Behind 3,300+ Mibot EV Preorders

Client

KG Motors, JP
and Next Innovations

Role

Visual and UX/UI Designer

Services

Content flow, UX, UI, Design Direction, Interaction Design

Collaborators

PM

Tools

Figma, Ai, Ps

Timeline

2024, 3 weeks

Live Website
Live Website
overview

KG Motors is entering into a new market with Mibot, a compact EV designed for elders who require reliable transportation for short-distance travel in rural regions. I’ve designed a landing page that would tell mibot story, highlight its capabilities and features, and drive sales through custom preordering experience. KG Motors is a Japanese EV startup redefining personal mobility with compact, affordable electric vehicles. Their flagship product, Mibot, is a single-seat micro EV designed for short-distance travel, especially in urban and rural Japan. They aimed to position Mibot as a utility-focused yet charming compact EV, while driving sales through a custom-designed preorder experience.

overview

KG Motors is entering into a new market with Mibot, a compact EV designed for elders who require reliable transportation for short-distance travel in rural regions. I’ve designed a landing page that would tell mibot story, highlight its capabilities and features, and drive sales through custom preordering experience. KG Motors is a Japanese EV startup redefining personal mobility with compact, affordable electric vehicles. Their flagship product, Mibot, is a single-seat micro EV designed for short-distance travel, especially in urban and rural Japan. They aimed to position Mibot as a utility-focused yet charming compact EV, while driving sales through a custom-designed preorder experience.

Mibot Landing
Page Walkthru

As Mibot is a compact, single-seat EV, a short video showcasing real-world use cases is placed early on the landing page to quickly set expectations and communicate its utility-driven purpose. This is followed by an interactive 3D model that allows users to explore the vehicle from all angles while viewing key specifications, helping create a stronger sense of ownership.

As Mibot is a compact, single-seat EV, a short video showcasing real-world use cases is placed early on the landing page to quickly set expectations and communicate its utility-driven purpose. This is followed by an interactive 3D model that allows users to explore the vehicle from all angles while viewing key specifications, helping create a stronger sense of ownership.

To address questions around Mibot’s capabilities and features, the core features are presented in a full-screen layout designed to capture attention and clearly communicate value. To capture conversions, clear CTAs are placed in the navigation and a final closing CTA at the end of the experience to guide users toward preordering.

To address questions around Mibot’s capabilities and features, the core features are presented in a full-screen layout designed to capture attention and clearly communicate value. To capture conversions, clear CTAs are placed in the navigation and a final closing CTA at the end of the experience to guide users toward preordering.

The whole flow for preordering

The whole flow for preordering

The whole flow for preordering

High fidelity of preorder page

High fidelity of preorder page

High fidelity of preorder page

Prototype of the preorder flow

Prototype of the preorder flow

Prototype of the preorder flow

Expand to try out the flow. The expand button is at the top right corner.
This interface is translated. Actual experience is in Japanese.

As a result, after the launch of the website, they opened for reservation and could generate over 3,300 preorders, outpacing major automakers like Toyota in domestic EV sales.

As a result, after the launch of the website, they opened for reservation and could generate over 3,300 preorders, outpacing major automakers like Toyota in domestic EV sales.

This $7000 Single-Seat Electric Car Is a Big Hit in Japan

2025

Read more

$7,000 single-seat EV a hit in Japan

2025

Read more
Challenges

Design fidelity was impacted by cross-regional development.

You may notice several differences between the mockups and the live website. Although detailed design guidelines and deliverables were shared, the development phase was managed by a separate team in Japan. During implementation, certain adjustments were made to better align with their technical decisions and local considerations.

Challenges

Design fidelity was impacted by cross-regional development.

You may notice several differences between the mockups and the live website. Although detailed design guidelines and deliverables were shared, the development phase was managed by a separate team in Japan. During implementation, certain adjustments were made to better align with their technical decisions and local considerations.

Challenges

Design fidelity was impacted by cross-regional development.

You may notice several differences between the mockups and the live website. Although detailed design guidelines and deliverables were shared, the development phase was managed by a separate team in Japan. During implementation, certain adjustments were made to better align with their technical decisions and local considerations.

What I learnt

Working across regions highlighted that design handoff is not a one-time event but an ongoing process. Even with detailed guidelines, differences in technical approach, priorities, and local context can lead to design changes. This project taught me to proactively build alignment through frequent check-ins.

What I learnt

Working across regions highlighted that design handoff is not a one-time event but an ongoing process. Even with detailed guidelines, differences in technical approach, priorities, and local context can lead to design changes. This project taught me to proactively build alignment through frequent check-ins.

Helping English learners practice speaking through real-life scenarios

Ux / UI / Design Direction / Design system

NOVA is an AI-powered app that gives feedback and targeted suggestions to enhance users’ speaking abilities—making language learning more engaging, practical, and effective.

Read casestudy
Read casestudy

Create a free website with Framer, the website builder loved by startups, designers and agencies.