Root & Ruff
Testing a persistent cart
experience through
an AI-assisted Shopify build.
Root & Ruff is a self-initiated e-commerce concept for a small pet-food business.
I designed the experience in Figma and built it as a functional custom Shopify storefront using Codex. The project tested whether a persistent mini-cart could keep order progress visible and create a more direct path from product discovery to checkout.
- Project type
- Self-initiated hypothesis project
- Role
- Product Designer · UX/UI Designer · AI-assisted Shopify Development
- Scope
- UX Strategy · Visual Design · Interaction Design · Responsive Design · Shopify Implementation
- Tools
- Figma · Shopify · Codex
Context
A small store did not need a complicated shopping experience.
Root & Ruff was designed for a focused range of fresh, organic food for dogs and cats.
Instead of creating multiple catalogue pages and a long shopping journey, I wanted customers to discover the brand, select products, and move toward checkout within one connected experience.
Most online stores keep the cart in the header or reveal it only when opened. My hypothesis was that keeping the cart close to the products could make selections easier to track, maintain shopping momentum, and potentially reduce cart abandonment.
Because this is a private concept project, these are intended outcomes rather than measured commercial results.
Core UX Decision
Keep the cart visible while customers build their order.
I placed a persistent mini-cart at the bottom of the product experience.
When a customer adds a product, its button changes to “In Cart” and the mini-cart updates with the item count, selected products, running total, and a direct checkout action.
The cart becomes part of the shopping journey rather than a separate destination customers need to remember.
- Select a product
- Receive immediate confirmation
- See the mini-cart update
- Continue shopping or checkout
Shopping without losing context
From product selection to “Your Pet’s Pantry.”
Products can be added directly from compact cards without opening individual product pages.
Opening the mini-cart reveals a side drawer called “Your Pet’s Pantry,” where customers can review products, change quantities, remove items, see the subtotal, confirm free delivery, and continue to checkout.
The experience remains connected to the warm, playful brand through pet photography, illustrated packaging, expressive typography, conversational language, and subtle scroll-linked motion.
From Figma to Shopify
Designing the interface was familiar. Building it was the experiment.
I had designed websites before, but I had never coded one.
After completing the experience in Figma, I used Codex to help translate the design into a custom Shopify storefront. I moved repeatedly between design, implementation, browser testing, and responsive refinement until the result felt like the original concept rather than a standard theme.
Codex made implementation more accessible, but I remained responsible for the product decisions, interaction model, visual direction, testing, and final quality.
- Figma design
- AI-assisted development
- Functional Shopify storefront
Outcome
A product hypothesis became a working storefront.
Root & Ruff became a functional private Shopify concept with custom product selection, immediate cart feedback, a persistent mini-cart, a cart drawer, responsive layouts, and scroll-linked motion.
The project allowed me to test a focused e-commerce idea while proving that I could move beyond static design and build a working custom experience through an AI-assisted development workflow.
Designed in Figma.
Built on Shopify.
Developed with Codex.
Complete Walkthrough
Watch the storefront in action.
See the product-selection experience, persistent mini-cart, cart drawer, and responsive storefront in this short walkthrough.
Next project
Biletiniz→
