LIVOGEN INDIA · SPARKT · WEBSITE REVAMP
A full consumer website for Livogen India, built as real responsive web pages with AI and mirrored into Figma for the client hand-off.
My Role
Product Designer: art direction, design system, directing the AI build, imagery, Figma hand-off and the compliance copy pass
Engagement
Client / Agency
Surfaces
7-page consumer website (responsive) + editable Figma file
Deliverable
Designs for client hand-off, not a live site
Context
Livogen India needed a revamped consumer website: Home, Iron Gummies, Iron Tonic, Livogen-XT, Livogen-Z, About Us and FAQs. All seven pages had to feel like one brand.
The client asked for designs only. The interesting decision wasn't what to design. It was how.
Instead of drawing every screen in Figma, I had AI build the pages as real responsive web pages in one design system, then mirrored each one into Figma as editable frames so the client got a file they could actually work with.
AI carried the production. I carried the decisions.
Delivered to client
Responsive pages designed and built in one system
Outputs: live web pages + editable Figma
Design system carried across the whole site
Compliance fixes applied across web and Figma
The client wanted designs. I decided how to make them.
My old process was Figma-first: design every screen by hand, then hand it off. For Livogen, I flipped it.
MY OLD WAY
Figma-first: draw every screen by hand
Slow to reach a real, responsive result. The design only existed as static frames until a developer built it.
LIVOGEN · AI-FIRST
Direct the build, then mirror it into Figma
AI builds real, responsive pages in one system. I art-direct and refine, then port each page into Figma as editable frames for hand-off.
The design skill didn’t go away. It moved up a level, from pushing pixels to directing and judging the output.
How I actually worked.
One repeatable loop per page. AI on execution; me on direction and craft.
Brief & references
AI builds a real web page
Confirm the design with client
Reiterate & finalise the design
I direct, clean up & add imagery
Client approved the basic layout, theme and page structure
Content, imagery and page details refined after client feedback
Final version signed off and mirrored into Figma for hand-off
The web pages were the source of truth. The Figma file was generated from them, so the client had editable frames. Every later change went into both, keeping them in sync.
What AI did, and what I owned.
Being AI-first doesn’t mean hands-off. It means spending my judgment where it counts.
I OWNED
✓
Art direction and the single design system
✓
Visual consistency and cleanup across all pages
✓
Imagery: sourcing, editing and placing every asset
✓
Design judgment on hierarchy, tone and layout
✓
The legal and compliance copy pass
✓
Final quality check before hand-off
AI HANDLED
–
First pass of every page as responsive HTML
–
Repetitive layout and component build-out
–
Fast iteration on structure across seven pages
–
Porting each page into Figma as editable frames
–
Applying copy changes across web and Figma
Seven pages, one design language.
Everything runs on a single system, so the brand holds together whichever page you land on.
TYPE & COLOUR
Octarine and DM Sans, in Livogen red and warm cream
Octarine for headlines and DM Sans for body text, with a Livogen red and warm cream palette carried across every page.
MOTIFS & MOTION
Blood drops, gummy stars and scroll reveals
Blood-drop and gummy-star motifs tie the range together, and scroll-reveal animations give each page a considered, premium feel.
The seven pages.
Every page follows the same visual system while giving each product its own content and story.
Home
The range at a glance and the brand story.
Iron Gummies
The everyday, easy-to-take gummy hero product.
Iron Tonic
The 9-in-1 benefit tonic.
Livogen-XT
Prescription iron · folic acid · zinc.
Livogen-Z
Prescription formulation with clinical backing.
About Us
The Livogen story and credibility.
FAQs
Common questions, cleanly organised.
Real web pages, mirrored into editable Figma.
Every page exists twice: as a live responsive build and as editable Figma frames the client can keep working in.
A regulated-industry compliance pass.
Health products can’t say whatever they like. I applied a reviewer’s regulatory feedback across all pages, on both web and Figma, without touching the signed-off design.
Reworded therapeutic claims into nutrient-attributed language ("Iron helps…", "Iron & folic acid help…"), so benefits attach to the nutrient, not the product.
Citations
Added superscript markers and a per-page “References & Disclaimers” block, citing sources such as NFHS-5, the Lancet, the HERS study and LIBERTY.
Removals
Removed unsupported claims and patient testimonials from the prescription pages, and added comparative-claim disclaimers.
Rx gating
Delisted the prescription SKUs (XT, Z) from consumer entry points, the products grid and footers, keeping the site consumer-appropriate.
Design that ships in a regulated category has to be defensible, not just pretty. AI made applying that across seven pages fast. The judgment on what to change was mine.
What came out of it.
Seven Livogen pages, delivered as one system in both live web and editable Figma, with a full regulated-industry compliance pass applied across both. AI carried the production. I carried the art direction, the system and every judgment call.
What this project demonstrates.
AI-first execution
I direct AI to produce real, high-fidelity output and know where my judgment adds value on top.
Systems thinking
One design language held consistently across seven distinct pages.
Design + medium fluency
Comfortable moving between a live web build and editable Figma, keeping both in sync.
Regulated-industry rigour
Claim wording, citations and disclaimers handled with real compliance discipline in a fraction of the usual time.
I don’t draw every screen anymore. I direct the build and own the decisions. That’s what AI-first design means for me.