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
FYI: THIS IS STILL WORK IN PROGRESS, CLIENT PERMIT ME TO SHARE (so far)
FYI: THIS IS STILL WORK IN PROGRESS, CLIENT PERMIT ME TO SHARE (so far)
the CONTEXT
the CONTEXT
{1}
{1}
Jessica Couture's website feel generic and pull from normal Shopify theme-editor
Jessica Couture's website feel generic and pull from normal Shopify theme-editor
Using the free Dawn theme from Shopify (a very common theme for e-commerce site), the site feel generic. Even though their brand image are supposed to be a luxurious brand. Thus I proposed to them some changes :)
Using the free Dawn theme from Shopify (a very common theme for e-commerce site), the site feel generic. Even though their brand image are supposed to be a luxurious brand. Thus I proposed to them some changes :)
my CHALLENGE
my CHALLENGE
{2}
{2}
Dilemma of Coding and Shopify editing
Dilemma of Coding and Shopify editing
I have to consider this site is being outsourced and website continuously updating by the marketing team. I cannot hardcode everything from Claude Code. Therefore I create a launch checklist of what is editable or not as well as communicating directly with the client on this dilemma.
This help rescope the project, and I were able to use my empathy and UX skills to offer them with some solutions
I have to consider this site is being outsourced and website continuously updating by the marketing team. I cannot hardcode everything from Claude Code. Therefore I create a launch checklist of what is editable or not as well as communicating directly with the client on this dilemma.
This help rescope the project, and I were able to use my empathy and UX skills to offer them with some solutions
my OFFER
my OFFER
{3}
{3}
Better Intuitive UI design
Better Intuitive UI design
Storytelling About Page
Hoverable Header instead of multiple clicks
Redesign clean Footer
Whole Landing Page, SEO improve + UI Layout
+ More pages!
Storytelling About Page
Hoverable Header instead of multiple clicks
Redesign clean Footer
Whole Landing Page, SEO improve + UI Layout
+ More pages!
EXAMPLE: About Page
EXAMPLE: About Page
Original about page are very simple. Image Text. No storytelling
Original about page are very simple. Image Text. No storytelling
Therefore my redesign are meant to convey more of a story —> Parallax Scrolling storytelling, making the UI more engaging and intuitive; dynamic assets moves having it's own story to tell. (p.s my favourite part are the globe -> map! )
Therefore my redesign are meant to convey more of a story —> Parallax Scrolling storytelling, making the UI more engaging and intuitive; dynamic assets moves having it's own story to tell. (p.s my favourite part are the globe -> map! )
BEFORE
AFTER
my TOOLS and WORKFLOWS
my TOOLS and WORKFLOWS
{4}
{4}
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 have 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
This workflow is very simple and efficient. Here's how it work:
Using Figma (starter plans) meaning I'm limited to Figma MCP. Therefore I have 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
This workflow is very simple and efficient. Here's how it work:
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)
Create a skill.md for Claude to understand this workflow: E.g for About Page; "go through the reference every time to understand the layout when touching any assets or redesigning the about page", then I path Claude using @'filelocation' to understand where all the assets are, naming, etc.
Example skill creation prompt:
Create a skill.md for Claude to understand this workflow: E.g for About Page; "go through the reference every time to understand the layout when touching any assets or redesigning the about page", then I path Claude using @'filelocation' to understand where all the assets are, naming, etc.
Example skill creation prompt:
Vibecode link to Shopify CLI ( I can't show this! confidential info :D )
Deploy to Shopify and iterate!
Vibecode link to Shopify CLI ( I can't show this! confidential info :D )
Deploy to Shopify and iterate!
GET IN TOUCH
GET IN TOUCH
GET IN TOUCH