Case Study

Pet Mimo

Taking my sister's pet store online: a learning project where I designed the brand, practiced components in Figma and built the WooCommerce store myself.

Client My sister's pet store

Year 2023

Role UX/UI Designer & builder (solo)

Platform WordPress + WooCommerce

30-second read

Context

My sister ran a physical pet store with no online presence.

Role

Everything, solo — my first e-commerce, learned by building it.

What I built

Name and visual identity

Figma component library with auto layout

WordPress + WooCommerce store

Outcome

The store went live. It has since been taken offline.

Brand

Warm, a little funny, and purple

The store sells affectionate, funny products — mugs, totes and t-shirts that say "Pai de pet" or "Mãe de vira-lata". So the wordmark is heavy and rounded, with a paw print in place of the last O.

Mimo purple #8A51FC
Grey #54595F
Dark #434242

Highlights Akaya Telivigala

Frete grátis a partir de R$ 249

Navigation Akaya Kanadaka

Home · Loja · Contato

Text Poppins

Camisa – Pai de pet · R$ 69,90

Marketing

One system, from logo to product banners

The same purple and the same voice carried into the category banners — Canecas, Bolsas, Roupas — built around the store's own products.

Canecas banner with an Eu ♥ cachorro mug

Bolsas banner with a Mãe de vira-lata tote bag

Roupas banner with a Mãe de bulldog t-shirt

Figma

A component library, built as practice

I also used the project to show I could work the way product teams do: in components and auto layout, not loose screens. Every piece of the store became a component with its own variants and states — from buttons to the checkout steps.

Button component set: primary, hover and secondary, each with and without a back-arrow icon — Buttons — primary, hover, secondary, with icon

Checkout progress component in four states, from step 1 to step 4 of 4 — Checkout steps — 1 to 4

Size dropdown component, closed and open — Dropdown — closed and open

Shipping calculator component: empty postcode field, and the state with shipping options listed — Shipping calculator — empty and calculated

Build

Learning e-commerce by building one

I had never built an online store, so I made it the way I could. I started from a WordPress theme, customized it to the brand with Elementor, and added WooCommerce for the cart, payment gateway, shipping and stock.

Product page for the Pai de pet t-shirt with size and color selectors, shipping calculator and buy button — Product page — the components above, assembled

Reflection

What it taught me

Pet Mimo went live and put my sister's store online; it has since been taken down.

Doing everything myself showed me the parts a designer rarely sees: payment gateways, shipping rules, stock that runs out. With what I know now, I would start where I skipped — talking to the customers who already walked into the physical store before designing the online one.

Next project

Continue exploring

View next project Back to top Back to main page