KOAI: Brand and site for a marine-pollution cleantech
Client: KOAI Year: 2023 Services: Web Design & Development, Brand Systems, Interactive 3D (companion project) Duration: Roughly 8-10 weeks (web), additional build for the 3D drone presentation Tech: WordPress, Elementor, Three.js, Verge3D
The problem
KOAI is a Korean cleantech startup that builds marine-pollution-control equipment. Their flagship product is KOBOT, a self-propelled oil-spill-recovery robot that operators control remotely, plus a complementary system of oil fences, skimming machines, and collection tanks for end-to-end spill response.
The founding team came into the project with two pieces in motion at the same time. One was the brand and marketing site, aimed at Korean Coast Guard procurement, KIST research partnerships, and export distributors (Elastec among the early partners). The other was a CES 2023 booth presentation with an interactive 3D showcase of the drone. We built both.
The site brief was English-primary (KOAI's export focus put English ahead of Korean for this build), heavy on UN SDG 14.1 framing (marine-pollution prevention is literally an SDG target, and KOAI leans into that positioning), and built to carry real-incident video evidence. The flagship video shows KOBOT operating in a live spill response at Gamcheon Port Pier 1 in Busan.
What we built
An English-primary cleantech brand site plus a CES-booth-grade 3D interactive drone presentation. The two shared brand direction and visual assets.
- English-primary site with KOAI's product line: KOBOT oil-recovery robot, oil fences, skimmers, collection tanks
- UN SDG 14.1 framing and ESG positioning on the homepage (this is a genuine part of the product story, not appliqué)
- Three embedded YouTube videos of real spill-response incidents including Gamcheon Port Pier 1 in Busan
- Partner and research-affiliation row: KIST, Korea Coast Guard, Seoul National University, Elastec
- Product detail pages with remote-operation and self-propulsion specs
- News and contact sections
- Separate build: an interactive 3D presentation of the KOBOT drone that ran at the CES 2023 booth. Visitors rotated the drone, inspected the collection module, and walked through a deployment sequence. Built on Three.js and Verge3D to match our standard 3D runtime (see the interactive 3D service page for more on how we build these)
How we built it
Weeks 1-2. Brand direction. Cleantech brands in 2023 had a visual pattern problem: every one looked the same (blue gradient, abstract water, drone-ish illustration). We spent two weeks pushing the KOAI visual system toward something more specific to marine-pollution work: photography of actual spill scenes, actual port infrastructure, less abstract.
Weeks 3-4. Site build (Elementor + WordPress). Homepage, product pages, partner row, SDG framing.
Weeks 5-6. CES booth 3D presentation, built in parallel by the 3D team. We used the drone CAD as source, optimized for browser delivery, wrote the interaction script so a booth visitor could walk up and operate it without a tutorial.
Weeks 7-8. YouTube video integration, news module, final content pass.
Weeks 9-10. CES booth rehearsal, site QA, launch alongside the trade show.
What it changed
KOAI showed up to CES 2023 with a visual identity, a site, and a 3D booth presentation that all read as one product. That sounds obvious. It is the thing cleantech startups in the same launch window consistently failed at. Investors and export distributors visiting the booth saw the drone, operated the 3D version, then scanned a QR code that landed them on a site that continued the same story in the same voice.
What we learned
Web and 3D built by the same team is a different product than web-then-3D. KOAI was an early project where we ran the brand system, the site build, and the 3D interactive from a single internal team. The visual alignment between the site and the booth presentation came from that, not from a style guide. When we split brand work and 3D work across separate teams, the seams show; when they are one team, they do not.
SDG framing works when the product is literally the SDG. Half the cleantech brands we see invoke SDGs as a paragraph on the About page. KOAI's product directly prevents and reduces marine pollution, which is the exact text of UN SDG 14.1. Leading with that is not marketing, it is the product description. The framing works because the claim is load-bearing.
Real-incident video beats demo video. The Gamcheon Port footage is a real spill response, not a staged test. Site-visit analytics showed that the real-incident video got far more viewing time than the product demos. Procurement buyers want to see the product working under load, not on a test pad.
Stack
- WordPress
- Elementor (web build)
- Three.js + Verge3D (CES 2023 3D drone presentation)
- YouTube-embed video integration
- English-primary content with Korean accessible
- ESG / SDG content framing throughout
Want something similar?
Cleantech, marine, environmental-remediation brands that need a web presence and an event-grade interactive 3D piece at the same time. We have done this combination a handful of times (see the interactive 3D service page). Email hello@cclemang.com.
