Laiterie: Design, Code, Launch

Laiterie: Design, Code, Launch

Laiterie: Design, Code, Launch

Client Project

Client Project

Client Project

Duration

Duration

Duration

3 months, 2026

3 months, 2026

3 months, 2026

Overview
Overview

Laiterie is a lifestyle e-commerce brand I designed and built as a custom Shopify storefront. The project focused on creating a shopping experience that captures a way of living.

Visit Live Site

My role
My role

Design engineer: I owned the project from visual direction through implementation and launch. Using Claude Code, I quickly learned Shopify development and brought the product live without a dedicated engineer.

01. Challenges & Decisions
01. Challenges & Decisions
Limited budget
Limited budget

Instead of purchasing and adapting a premium Shopify theme, I customized the base theme to create a more distinctive experience while keeping costs low.

First collection, first impression
First collection, first impression

Because this was Laiterie’s first launch, the site needed to establish the brand tone quickly and work alongside social media to define its lifestyle point of view.

02. Design
About Page: More Story, Less Scroll
About Page: More Story, Less Scroll

A split-view layout pairs concise copy with large editorial imagery, making the brand easy to scan. Hover states reveal deeper context and matching imagery, while carousels add exploration without disrupting the flow.

Subscription Pop-Up: Invite Users Into the Laiterie world
Subscription Pop-Up: Invite Users Into the Laiterie world

Shown shortly after a first-time visitor begins exploring, the pop-up uses a branded signup experience to capture interest early and reinforce recognition from the start.

Bundle Preview Page: Give Context Before the Details
Bundle Preview Page: Give Context Before the Details

The layout quickly explains the collection, what’s included, available sizes, and overall value, while lifestyle imagery makes the bundle feel more desirable.

Bundle Detail Page: Give Context Before the Details
Bundle Detail Page: Give Context Before the Details

Large lifestyle imagery reinforces desire, while size, savings, bundle contents, and material details are surfaced directly beside the add-to-cart action.

Footer: Extend the Brand to the Last Touchpoint
Footer: Extend the Brand to the Last Touchpoint

The bunny is Laiterie’s recurring brand character, bringing warmth and personality into the visual system. In the footer, it turns a functional endpoint into a memorable brand moment.

Customized Buttons: Turn Conversion Into a Brand Signature
Customized Buttons: Turn Conversion Into a Brand Signature

I designed a decorative CTA frame inspired by Laiterie’s romantic details, turning a standard button into a consistent brand element without sacrificing clarity.

03. Design to Code
03. Design to Code

Claude Code accelerated my learning while I stayed responsible for the problem solving, implementation, and final quality.

Define Intent

Define Intent

Diagnose in Browser

Diagnose in Browser

Code with Claude

Code with Claude

Test & Ship

Test & Ship

Set the interaction, behavior, and visual.

Set the interaction, behavior, and visual.

Identify the constraint and test the fix live

Identify the constraint and test the fix live

Translate solution into Liquid, JavaScript, or CSS.

Translate solution into Liquid, JavaScript, or CSS.

Validate across breakpoints, and launch.

Validate across breakpoints, and launch.

04. Reflection
Direct the AI, Own the Judgment
Direct the AI, Own the Judgment

AI saved the most time when I first defined the problem, chose the approach, and gave it precise direction. The value came from accelerating execution while I stayed responsible for the decisions and final quality.

Thank you for stopping by!

Thank you for stopping by!

© 2026 Kandice

Thank you for stopping by!

© 2026 Kandice

Thank you for stopping by!

© 2026 Kandice