JESSICA COUTURE WEBSITE REDESIGN
JESSICA COUTURE WEBSITE REDESIGN
JESSICA COUTURE WEBSITE REDESIGN
UI/UX
UI/UX
FREELANCE
FREELANCE
YEAR: 2026
YEAR: 2026
ROLE: UX/UI Designer · Research · Visual Design
ROLE: UX/UI Designer · Research · Visual Design
PLATFORM: Responsive Website
PLATFORM: Responsive Website
TOOLS: Figma, Claude Code, Shopify CLI
TOOLS: Figma, Claude Code, Shopify CLI
CONTEXT
CONTEXT
{1}
{1}
Jessica Couture is a bridal house with three labels
a considered, emotional purchase experience
Jessica Couture is a bridal house with three labels
a considered, emotional purchase experience
The site ran on Shopify’s stock Dawn theme, the same setup any store selling anything might use. Nothing about it said luxury bridal. I proposed a full redesign.
The site ran on Shopify’s stock Dawn theme, the same setup any store selling anything might use. Nothing about it said luxury bridal. I proposed a full redesign.
CHALLENGE
CHALLENGE
{2}
{2}
Dilemma of Coding and Shopify editing
Dilemma of Coding and Shopify editing
The site had to survive handover to a marketing team with no coding background. That meant navigation links, hero copy, and collection images all needed to live in Shopify’s admin, not buried in code only I could touch.
I had one rule for myself: if a setting shows up in the editor, the template better actually use it. Otherwise it’s a ghost setting someone edits it thinking it does something, and it doesn’t. Navigation and footer links pull from Shopify’s own menu system with a fallback built in, so marketing can add a link without opening a template.
I put every editable field on a launch checklist and walked the client through it directly, so nobody found out what was and wasn’t editable after the site had already gone live.
The site had to survive handover to a marketing team with no coding background. That meant navigation links, hero copy, and collection images all needed to live in Shopify’s admin, not buried in code only I could touch.
I had one rule for myself: if a setting shows up in the editor, the template better actually use it. Otherwise it’s a ghost setting someone edits it thinking it does something, and it doesn’t. Navigation and footer links pull from Shopify’s own menu system with a fallback built in, so marketing can add a link without opening a template.
I put every editable field on a launch checklist and walked the client through it directly, so nobody found out what was and wasn’t editable after the site had already gone live.
SOLUTION
SOLUTION
{3}
{3}
Here’s what I actually changed, and why.
Here’s what I actually changed, and why.
Navigation was costing them browsing. Reaching a collection took multiple clicks, so customers rarely saw past the one they landed on. Rebuilt as a hover-driven menu that reveals the full catalogue without a commitment click.
The stockist locator was a paid, limited third-party plugin. I audited the old theme, found it ran on a bolt-on app that couldn’t categorise anything, and replaced it with a custom-built, country-filterable map.
The About page had no story. [see below]
The FAQ and Trunk Shows pages were flat text. Rebuilt both as filterable, categorised grids, FAQ by topic, Trunk Shows by country each editable from the Shopify admin.
Full landing page rebuild, SEO pass, and a redesigned footer.
Etc.
Navigation was costing them browsing. Reaching a collection took multiple clicks, so customers rarely saw past the one they landed on. Rebuilt as a hover-driven menu that reveals the full catalogue without a commitment click.
The stockist locator was a paid, limited third-party plugin. I audited the old theme, found it ran on a bolt-on app that couldn’t categorise anything, and replaced it with a custom-built, country-filterable map.
The About page had no story. [see below]
The FAQ and Trunk Shows pages were flat text. Rebuilt both as filterable, categorised grids, FAQ by topic, Trunk Shows by country each editable from the Shopify admin.
Full landing page rebuild, SEO pass, and a redesigned footer.
Etc.
EXAMPLE: About page
EXAMPLE: About page
The original About page was just a wall of text. Nobody finished reading it, which is a problem when brand story is half the sell on a purchase this considered.
So I rebuilt it as a scroll-driven story across seven sections, each with its own parallax.
My favourite part is the globe turning into a map. First attempt crossfaded between two separate images, and you could see the seam. I scrapped that and rebuilt it as one map asset that reveals through an expanding circle instead — nothing to fade between anymore, just one shape opening into the next.
The original About page was just a wall of text. Nobody finished reading it, which is a problem when brand story is half the sell on a purchase this considered.
So I rebuilt it as a scroll-driven story across seven sections, each with its own parallax.
My favourite part is the globe turning into a map. First attempt crossfaded between two separate images, and you could see the seam. I scrapped that and rebuilt it as one map asset that reveals through an expanding circle instead — nothing to fade between anymore, just one shape opening into the next.
DESIGN DECISION
DESIGN DECISION
{4}
{4}
AI doesn’t replace my taste, I’m still me!
AI doesn’t replace my taste, I’m still me!
I went looking on Dribbble for storytelling layouts and found a parallax landing page by Julia for TechWings that stuck with me. Not something to copy, just a direction.
I went looking on Dribbble for storytelling layouts and found a parallax landing page by Julia for TechWings that stuck with me. Not something to copy, just a direction.
Once I had the copywriting, I identified 7 narrative beats and mapped each one to a section. Lo-fi screens first, pitched the concept. They approved it, and I moved to high-fidelity.
Once I had the copywriting, I identified 7 narrative beats and mapped each one to a section. Lo-fi screens first, pitched the concept. They approved it, and I moved to high-fidelity.
HI-FI DESIGN
HI-FI DESIGN
{5}
{5}
Hi-Fi screens built in Figma, ready to be translated into Shopify.
Hi-Fi screens built in Figma, ready to be translated into Shopify.
TOOLS and WORKFLOWS
TOOLS and WORKFLOWS
{6}
{6}
Experimenting with Claude Code + Figma + Shopify CLI
Experimenting with Claude Code + Figma + Shopify CLI
Using Figma (starter plans) meaning I’m limited to Figma MCP. Therefore I had to be creative with my options!
Figma —> Export Assets & Screenshots for reference —> Claude Code —> Shopify CLI —> Deploy on preview —> Push to dupe theme in Shopify
Here’s how it worked:
Using Figma (starter plans) meaning I’m limited to Figma MCP. Therefore I had to be creative with my options!
Figma —> Export Assets & Screenshots for reference —> Claude Code —> Shopify CLI —> Deploy on preview —> Push to dupe theme in Shopify
Here’s how it worked:
Design in Figma:
Using Slices and Frames section to screenshot for Claude Code as reference. As well as exporting each individual assets into a folder
Design in Figma:
Using Slices and Frames section to screenshot for Claude Code as reference. As well as exporting each individual assets into a folder
Export
into a working folder, both reference screens and assets (Claude read through these folders)
Export
into a working folder, both reference screens and assets (Claude read through these folders)
Write a SKILL.md
so Claude understands the context for each page. For the About page, for example: “check the reference screenshots before touching any layout or assets.” This kept Claude grounded in the actual design rather than guessing.
Write a SKILL.md
so Claude understands the context for each page. For the About page, for example: “check the reference screenshots before touching any layout or assets.” This kept Claude grounded in the actual design rather than guessing.
Deploy vibecode Claude -> Shopify and iterate!
Deploy vibecode Claude -> Shopify and iterate!
Check it out! : jessicacouturebridal.com/pages/about-jessica-couture
Check it out! : jessicacouturebridal.com/pages/about-jessica-couture
FINAL DESIGN
FINAL DESIGN
{7}
{7}
REFLECTION
REFLECTION
{end}
{end}
AI remove the gap of “design” and “deliver”
AI remove the gap of “design” and “deliver”
Using AI kind of scares me, it could easily replace my own ideas if I let it. So before touching any design, I go learn the craft properly first.
I look for inspiration on Dribbble, Pinterest, Awwwards, stuff like that. Helps me understand the context from the ground up. Then I make my own design decisions and build it out in Figma myself.
Claude Code only steps in at the end, linking Figma to Shopify. Honestly the fun part, closing that gap between designing something and actually shipping it.
Especially on how Shopify uses custom open sourced templating language. “Liquid”, that bridges HTML files and Shopify store’s database. An already complicated enough language for a designer to understand, but do spark my curiosity to learn.
Overall, using AI powered design, prompt me to keep experimenting and learning both design and backend stuff, which I found more confidence in!
Using AI kind of scares me, it could easily replace my own ideas if I let it. So before touching any design, I go learn the craft properly first.
I look for inspiration on Dribbble, Pinterest, Awwwards, stuff like that. Helps me understand the context from the ground up. Then I make my own design decisions and build it out in Figma myself.
Claude Code only steps in at the end, linking Figma to Shopify. Honestly the fun part, closing that gap between designing something and actually shipping it.
Especially on how Shopify uses custom open sourced templating language. “Liquid”, that bridges HTML files and Shopify store’s database. An already complicated enough language for a designer to understand, but do spark my curiosity to learn.
Overall, using AI powered design, prompt me to keep experimenting and learning both design and backend stuff, which I found more confidence in!
GET IN TOUCH
DESIGNED BY TAM METHACHAI
GET IN TOUCH
DESIGNED BY TAM METHACHAI
GET IN TOUCH
DESIGNED BY TAM METHACHAI