- Role
- Product Designer
- Year
- 2024
- Industry
- E-commerce
Altatienda
At Altatienda, our mission is to make online commerce simpler, more transparent, and more enjoyable for everyone. We're building a platform that gives both buyers and sellers the tools they need to connect, grow, and succeed. Whether it's helping entrepreneurs scale their businesses or giving customers access to products they can trust, we want every experience to feel easy, reliable, and meaningful.
We believe shopping should be more than just a transaction—it should feel seamless, secure, and rewarding. That's why we're focused on creating an experience that removes friction, builds trust, and makes every step of the journey faster and more intuitive for both buyers and sellers.
At the heart of Altatienda is a commitment to people. We're constantly learning, improving, and adapting to the changing needs of our community. Our goal is to become the marketplace people choose not only for what they can buy, but for the confidence, connection, and experience they find every time they come back.
The palette
Purple leads, orange supports.
A confident purple anchors the brand — used for primary actions, key surfaces, and moments of focus. A warm orange plays the supporting role, cueing energy and human warmth across alerts, highlights, and secondary actions.
Primary
primary/lighter
color/purple/50
#F9F5FF
primary/light
color/purple/300
#BF8FFF
primary/default
color/purple/500
#6400E6
primary/dark
color/purple/700
#5000B8
primary/darker
color/purple/900
#330075
Secondary
secondary/lighter
color/orange/50
#FFF1EB
secondary/light
color/orange/300
#FCA17D
secondary/default
color/orange/500
#FA652A
secondary/dark
color/orange/700
#A93304
secondary/darker
color/orange/900
#371001
Background
background/default
color/neutral/0
#FFFFFF
background/primary
color/neutral/50
#F5F5F5
background/secondary
color/neutral/100
#F0F0F0
background/hover
color/neutral/50
#F5F5F5
background/disabled
color/neutral/100
#F0F0F0
Foreground
foreground/title
color/neutral/900
#141414
foreground/default
color/neutral/700
#262626
foreground/helper
color/neutral/500
#595959
foreground/disabled
color/neutral/300
#BFBFBF
02
Design Process
From discovery to delivery, the work moved through five phases — each grounded in marketplace research and pressure-tested against real buyer and seller flows.
- 01
Research & Discovery
Talk to buyers, study sellers, map the marketplace.
- 02
Define & Strategy
Pick the problems worth solving, set a north star.
- 03
Wireframing, UX Design
Draft the journeys, pressure-test each tap.
- 04
UI & Visual Identity
Apply the system, make it feel like the brand.
- 05
Presentation Design
Ship the artifacts that get stakeholders aligned.
The product
Three movements. One marketplace, end to end.
From the first screen the buyer opens to the receipt that thanks them, the product carries the same brand voice — calm, specific, and built for two audiences at once.
- IHome shell
- IIPersonalised menu
- IIIPurchase flow
I · Home shell
Open the app. The smile is the homepage.
A persistent search field anchors the top of the screen, and the bottom tab bar elevates the “Vender” CTA as a floating purple smile — the brand mark doubles as the marketplace's most important action.
Vender = the brand mark, doubled.
II · Personalised menu
It knows you. Or it offers.
The “Más” view morphs based on identity. Signed-out visitors see an invitation to register; signed-in buyers get a warm greeting and a path back to their profile — without losing the categories they came for.
III · Purchase flow
Seven screens. About a minute.
Four chapters from product to receipt. Delivery splits into three taps so the buyer never faces a wall of fields, and a friendly loader carries them through the only wait the system can't avoid.
- 01Product
- 02Delivery (×3)
- 03Process (×2)
- 04Receipt
Product
See options
Pick one
Confirm
Processing
¡Listo!
Receipt
Designed for buyers, created for sellers.
In closing
Altatienda was built to make online commerce feel less transactional and more human — calmer for the buyer, clearer for the seller, and worth coming back to for both. Across colour, type, and every product surface, the same idea carries through: a marketplace that smiles when you arrive, guides you while you stay, and thanks you when you leave.
From the library
One component, six states.
A live accordion straight from Altatienda's Panda UI Figma library — same tokens, same focus ring, same caret. Tap a row to open it; tab to it to see the brand-purple focus halo.
Accordion
↳ Tap a row to expand · tab to reveal the focus halo
Checkbox
↳ Tap the first to toggle · the second is locked
Button
↳ Hover · click · tab to see hover, pressed, and focus states
Continue exploring
