UI/UX
FREELANCE
YEAR: 2026
ROLE: UX/UI Designer · Research · Visual Design
PLATFORM: Responsive Website
TOOLS: Figma, Claude Code, Shopify CLI
CONTEXT
{1}
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
{2}
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
{3}
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.
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
{4}
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.
HI-FI DESIGN
{5}
Hi-Fi screens built in Figma, ready to be translated into Shopify.
TOOLS and WORKFLOWS
{6}
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:
Check it out! : jessicacouturebridal.com/pages/about-jessica-couture
FINAL DESIGN
{7}
REFLECTION
{end}