(Case 01)

(Case 01)

· E-commerce

· E-commerce

Amor Amarelo

Amor Amarelo

Amor Amarelo

UX/UI design and launch of a Shopify store for a handmade stationery brand. Research, information architecture and interface design.

UX/UI design and launch of a Shopify store for a handmade stationery brand. Research, information architecture and interface design.

UX/UI design and launch of a Shopify store for a handmade stationery brand. Research, information architecture and interface design.

UX/UI Designer · Freelance · Real client · Shopify · Figma · 2026

Key results

Own sales channel, without depending
on Instagram.

Canal de venta propio, sin depender de Instagram.

An online store with catalogue, cart and

payments via Shopify Payments and PayPal.

Store launched in 4 weeks

From brief to launch, on time. Currently paused by the brand's decision.

Orders organised from the first message

A guided form that gathers all the information for each custom order.

A guided form that gathers all the information for each custom order.

Summary

Amor Amarelo creates hand-sewn notebooks, illustrations and art journaling workshops in Barcelona. It sold through Instagram, at fairs and in partner shops, with a hard-to-use website and custom orders arriving scattered.

Fig. 01 · Store home page

Challenge

Challenge

Create its own sales channel, easy to use, that organised custom orders and conveyed the handmade value of each product.

Research

Research

I started with two meetings with the client to define the art direction, colours and content. Then I worked in Figma on archetypes, an empathy map, a point of view and the information architecture.

Fig. 02 · Buyer persona

Fig. 03 · Empathy map

From research to decisions

"Not everything handmade is truly handmade." "It's expensive, but it's worth it." "I'd rather have fewer things, but meaningful ones."

Clara doesn't buy on impulse: she researches, reads reviews and saves products before deciding. She distrusts over-edited photos and values brands that explain their processes and materials.

01 · Needs proof that handmade is authentic → a hand-sewn story with real photos.

02 · Values brands that explain processes and materials → workshop cards with all the information.

03 · Custom orders arrived scattered → a guided form.

04 · Physical shops build trust → a Partner shops section.

Fig. 04· Information architecture. ArtJournaling and Points of sale moved to the main menu

Design decisions

Design decisions

Decision 1

Custom designs

Problem

Custom orders arrived through Instagram or word of mouth, and replying to them was messy.

Decision

A form with product type and order description, so the client gets all the information from the first message, alongside photos of past work as inspiration.

Fig. 05 · Custom designs

Decision 1

Custom designs

Problem

Custom orders arrived through Instagram or word of mouth, and replying to them was messy.

Decision

A form with product type and order description, so the client gets all the information from the first message, alongside photos of past work as inspiration.

Fig. 05 · Custom designs

Decision 1

Custom designs

Problem

Custom orders arrived through Instagram or word of mouth, and replying to them was messy.

Decision

A form with product type and order description, so the client gets all the information from the first message, alongside photos of past work as inspiration.

Fig. 05 · Custom designs

Decision 2

A hand-sewn story

Problem

In a handmade brand, the person behind the product is part of its value.

Decision

A timeline where a needle and thread join polaroid photos. I built it custom, generating the code with AI (Claude).

Fig. 06 · A hand-sewn story

Decision 2

A hand-sewn story

Problem

In a handmade brand, the person behind the product is part of its value.

Decision

A timeline where a needle and thread join polaroid photos. I built it custom, generating the code with AI (Claude).

Fig. 06 · A hand-sewn story

Decision 2

A hand-sewn story

Problem

In a handmade brand, the person behind the product is part of its value.

Decision

A timeline where a needle and thread join polaroid photos. I built it custom, generating the code with AI (Claude).

Fig. 06 · A hand-sewn story

Decision 3

ArtJournaling, at first glance

Problem

The monthly sessions are a star product, but they got lost inside the store.

Decision

A place of its own in the main menu and four cards (when, where, what's included and price) that summarise everything without a single click.

Fig. 07 · ArtJournaling, at first glance

Decision 3

ArtJournaling, at first glance

Problem

The monthly sessions are a star product, but they got lost inside the store.

Decision

A place of its own in the main menu and four cards (when, where, what's included and price) that summarise everything without a single click.

Fig. 07 · ArtJournaling, at first glance

Decision 3

ArtJournaling, at first glance

Problem

The monthly sessions are a star product, but they got lost inside the store.

Decision

A place of its own in the main menu and four cards (when, where, what's included and price) that summarise everything without a single click.

Fig. 07 · ArtJournaling, at first glance

Decision 4

From screen to physical shop

Problem

Her products are sold in several physical shops that were hard to find.

Decision

Partner shops in the main menu, with each shop's address and a button that goes straight to Google Maps.

Fig. 08 · From screen to physical shop

Decision 4

From screen to physical shop

Problem

Her products are sold in several physical shops that were hard to find.

Decision

Partner shops in the main menu, with each shop's address and a button that goes straight to Google Maps.

Fig. 08 · From screen to physical shop

Decision 4

From screen to physical shop

Problem

Her products are sold in several physical shops that were hard to find.

Decision

Partner shops in the main menu, with each shop's address and a button that goes straight to Google Maps.

Fig. 08 · From screen to physical shop

The store

The store

A video on the home page that shows the product and the craft from the very first second, a clean catalogue with name and price under each notebook, testimonials as social proof, and payments via Shopify Payments and PayPal.

Fig. 09 · Notebook catalogue

Fig. 09 · Notebook catalogue

Fig. 10 · Product page, cart and checkout on mobile. Screens recreated from the original design

Fig. 10 · Product page, cart and checkout on mobile. Screens recreated from the original design

Results

Results

Results

01 · Store launched on time: from brief to launch in 4 weeks, in April 2026.

02 · Its own sales channel, without depending on Instagram or word of mouth.

03 · A guided form that organises custom orders from the first message.

04 · Integrated payments with Shopify Payments and PayPal.

Metrics to track

Conversion, abandoned carts and number of custom orders received through the form.

Conversion, abandoned carts and number of custom orders received through the form.

What I learned

I proposed giving Custom designs its own place in the main menu; the client preferred to keep it inside Store. Working with a real client means proposing, explaining my reasoning and also accepting her decisions.

I proposed giving Custom designs its own place in the main menu; the client preferred to keep it inside Store. Working with a real client means proposing, explaining my reasoning and also accepting her decisions.

© 2026 Lucia Alanis

UX/UI Designer in Barcelona

Create a free website with Framer, the website builder loved by startups, designers and agencies.