Development

Customiser AI Website Design & Development

Built an animation-driven marketing website that explains complex manufacturing automation in 30 seconds through visual storytelling

Client Customiser AI

Year 2025

Services UI/UX Design, TypeScript Development

Duration 1 month

Visit Project

The Challenge

Customiser AI is a manufacturing automation SaaS startup solving a complex problem: connecting production orders to factory floor execution. The challenge was communicating this value proposition to manufacturers who are skeptical of "yet another software tool." Most SaaS websites in the manufacturing space are dense with jargon, filled with feature lists, and require visitors to read paragraphs of text to understand what the product actually does. For a new startup entering a conservative industry, we needed to cut through the noise immediately—visitors needed to "get it" within seconds of landing on the page, or they'd bounce.

Our Role

We handled every aspect of this project: UI/UX design from wireframes to high-fidelity mockups, all copywriting for the marketing messaging, TypeScript development of the entire frontend, and full deployment to production. This was our startup, so we wore every hat—founder, designer, developer, and copywriter.

The Approach

Our strategy was radical simplification through visual storytelling. Instead of explaining manufacturing workflow automation through text, we decided to show it through smooth, engaging animations that guide visitors through the process: order comes in, system automatically generates production instructions, factory executes. The goal was to make even non-technical factory managers immediately understand the value within 30 seconds of scrolling. We prioritized visual clarity and motion design over feature density—every animation needed to serve the story, not just look impressive.

Discovery & Research

We started by analyzing competitor websites in the manufacturing SaaS space—nearly all of them committed the same sin: walls of text, generic stock photos of factories, and vague promises about "efficiency gains." We studied how consumer SaaS companies like Stripe and Notion use animations to explain technical concepts without requiring users to read documentation. We interviewed potential manufacturing customers to understand their biggest hesitations about adopting new software, which boiled down to: "We don't have time to learn another complicated tool." The insight was clear: manufacturers are visual, hands-on people who need to see the solution in action, not read about it.

Design & Development

We designed the website in Figma with a scroll-driven narrative structure—each section tells one part of the story: the problem (chaotic production floor), the solution (automated workflow), and the outcome (streamlined operations). We prototyped the key animations in Figma to validate the concept before committing to code. Moving into TypeScript development, we built the frontend with scroll-triggered animations using Framer Motion for smooth, performant interactions. The trickiest technical challenge was ensuring animations remained buttery smooth across devices—we spent significant time optimizing animation performance and implementing progressive enhancement so the site worked perfectly even without JavaScript. The copywriting went through multiple iterations to find the right tone: confident but not arrogant, technical but not jargon-heavy, direct but not pushy.

Final Design

The final website uses scroll-driven animations to visually demonstrate how Customiser AI transforms chaotic manufacturing workflows into streamlined automation. Visitors immediately see the product in action—orders flowing into the system, production instructions being generated automatically, and factory floor execution happening seamlessly. The entire value proposition is communicated through motion and visual hierarchy, requiring minimal reading. The site is fast, responsive, and converts manufacturing decision-makers who previously dismissed software solutions as "too complicated."

Results & Outcomes

The website successfully launched Customiser AI's market presence and established credibility in the manufacturing automation space. Visitors consistently report understanding the product within seconds, and the visual storytelling approach has become a differentiator in an industry dominated by text-heavy, feature-list websites.

Key Achievements

Scroll-driven animation system that visually demonstrates complex manufacturing workflows without requiring text explanations

Complete execution: UI/UX design, copywriting, TypeScript development, and production deployment

Performance-optimized animations using Framer Motion—smooth 60fps interactions across all devices

Progressive enhancement architecture ensuring core content works without JavaScript

Visual storytelling approach that differentiates from text-heavy manufacturing SaaS competitors

Responsive design system optimized for both factory floor tablets and executive desktop browsers

What We Learned

This project reinforced that manufacturing audiences are far more visual than the industry assumes—they don't want to read whitepapers, they want to see solutions in action. Wearing every hat (designer, developer, copywriter) forced me to think holistically about the user journey in a way that's harder when responsibilities are siloed. The biggest technical lesson was learning when to use animation and when to show restraint—not every interaction needs motion. If we were starting over, we'd prototype the animations in code earlier rather than spending so much time in Figma, because the real performance constraints only become clear in the browser. This experience fundamentally shaped how we think about marketing sites for technical products: show, don't tell.