← Work03 / 08 · Design — Build

Client
Doğuş Teknoloji
Year
2026
Role
Product design, Design system, Front-end rebuild, Backend integration
Disciplines
Design — Build
CreaLoomX home: the “From brief to launch” banner above the four production stages, scenarios, storyboards, videos and merges.

CreaLoomX is Doğuş Teknoloji’s generative-AI marketing studio: brief a campaign, and it produces the scenarios, storyboards, videos, voiceovers and music. Its first version ran on stock shadcn components. I redesigned it as Midnight Studio, rebuilt the front end on hand-made components and connected it to the live backend.

Screens show the live product with demo content.

Link
Product page ↗

01 — Design

The MVP was assembled from off-the-shelf shadcn parts. It worked, but it looked like any admin template, and nothing on screen told you where the AI was at work.

Midnight Studio is dark and quiet by default. Glow is kept for four things: the active state, AI content, the primary action and live indicators, so the eye lands wherever something is happening.

CreaLoomX
CreaLoomX home: a greeting with a Create Campaign button, the plan bar, three campaigns to pick up where you left off, and the “From brief to launch” production-line banner.
Fig. 01Home is the production line: pick a campaign back up, or start a new one.
Campaigns: a featured campaign card in the violet gradient with its slogans, product and last update, above a grid of campaign cards.
New campaign form: campaign info, brand and product, then sector chips and the target audience, with a required-fields counter in the header.
The campaign holds the brief (brand, product, audience) that every scenario, visual, video and voiceover inherits.

Brief once.

Produce everything.

CreaLoomX
The production line: campaign, scenario, storyboard, video and merge as connected stages with their counts, voiceovers and music feeding in below.
Fig. 02Each stage feeds the next; voiceovers and music join at the merge.
Storyboard library: panel-by-panel image strips grouped by scenario, each panel numbered in order.
Video library: a grid of generated video thumbnails with duration and aspect ratio, each tagged with its campaign.
A library for every output: storyboard panels in order, videos that play in place.
Visual Studio: a glowing canvas that says “Write a prompt, choose settings, and hit Generate”, with resolution, aspect ratio and brand settings on the right.
New merge: a composition of a required video layer and optional voiceover and music layers, with the total length below.
One prompt to on-brand visuals; video, voice and music layered into one cut.
CreaLoomX home on a phone: the greeting, the Create Campaign button, the plan and the campaigns to continue.
The video library on a phone: Upload and Create Video buttons above a generated video card.
The whole studio works on a phone, down to the navigation drawer.
CreaLoomX
CreaLoomX sign-in: a mosaic of generated clips on the left and the “Welcome back” form on the right.
Fig. 03Sign-in is a reel of what the studio makes: generated clips play behind the form, and hold still under reduced motion.

02 — Build

I moved the design into the production repo and rewrote every page on hand-made primitives: Modal, DataTable, Tabs, Tooltip, date fields and a dependency-free toaster. Then shadcn came out completely: 160 packages removed, and the global CSS cut from 628 lines to 277.

The data layer stayed exactly as it was, 21 RTK Query API slices with their method names untouched, so the new interface plugged straight into the live .NET backend. Every create flow submits, polls the AI job, completes it and lands on the result.

160
packages removed with shadcn
21
API slices, wired unchanged
10
AI create flows, end to end
2
languages, Turkish and English

AI takes time, so the wait is designed: a loader drawn from the two loops in the logo, stage labels that follow the job (preparing, generating, finishing) and a running timer.

Long jobs can carry on in the background. A small pill keeps count while you move on, and a toast links to the result when it lands.

Forms validate inline, on blur, with react-hook-form and zod, in Turkish and English. A security audit, a real CSP and a hardening pass came with the rebuild.

Stack

Frontend
Next.js 16 · React 19
UI
Hand-made components, no shadcn
Data
Redux Toolkit · RTK Query
Forms
react-hook-form · zod
Languages
next-intl, Turkish and English
Backend
.NET 9 API (existing)

  1. Studio UI

    hand-made components

  2. RTK Query

    21 API slices

  3. .NET 9 API

    PostgreSQL · AI jobs

Like what you see? — work@selimyaylali.com

(Next) 04 / 08

SustainFlow