Diseño UX que convierte visitas en ventas.

UX design that turns traffic into sales.

Con quién trabajo

Who I work with

Tiendas onlineOnline stores

Tienes tráfico, pero no vendes lo que deberías

You have traffic, but sales don't follow

Audito y rediseño lo que pasa dentro de tu tienda: navegación, fichas de producto, carro y checkout — con testeo real de usuarios, no opiniones.

I audit and redesign what happens inside your store: navigation, product pages, cart and checkout — with real user testing, not opinions.

Startups y productoStartups & product

Necesitas UX de producto sin armar un equipo

You need product UX without building a team

Descubrimiento, research, prototipos y design system inicial: el trabajo UX completo, por proyecto, listo para entregar a desarrollo.

Discovery, research, prototypes and a starter design system: complete UX work, per project, ready for developer handoff.

AgenciasAgencies

Te falta seniority UX para un proyecto puntual

You need senior UX for a specific project

Me integro a tu equipo por proyecto o por horas. Conozco los procesos desde ambos lados: fui la persona que contrataba y también la contratada.

I plug into your team per project or hourly. I know the process from both sides: I've been the one hiring and the one hired.

Casos seleccionados

Selected work

Tienda online de Caramel en tablet
Caramel · UX freelance · en producción Caramel · Freelance UX · live

Una chocolatería que vende por tres canales a la vez

A chocolatier selling through three channels at once

Tienda online, pedidos express y venta corporativa conviviendo en un mismo sitio, sin que el cliente tenga que entender la diferencia. En producción hoy.

Online store, express orders and corporate sales living on one site, without making the customer understand the difference. Live today.

Leer caso →Read case →
La tienda de Saint Cirq en un celular
Saint Cirq · UX freelance Saint Cirq · Freelance UX

Comprar por impulso y comprar una vez en la vida

Buying on impulse and buying once in a lifetime

Joyería, complementos y tocados de novia hechos a mano en una sola tienda: tres decisiones de compra que no se parecen en nada, entrando por la misma puerta.

Jewellery, accessories and handmade bridal headpieces in one store: three completely unalike buying decisions coming through the same door.

Leer caso →Read case →
Portada de heykiddo.cl en un celular
HeyKiddo · Proyecto propio HeyKiddo · My own venture

Diseñar para que vuelvan: el sistema de suscripción

Designing so they come back: the subscription system

Mi propio negocio de juego sin pantallas, usado como laboratorio de retención: cómo se diseña que alguien vuelva todos los meses. Incluye lo que no resultó.

My own screen-free play business, used as a retention lab: how you design for someone to come back every month. Includes what didn’t work.

Leer caso →Read case →
Portada del sitio de Kitchen Center
Kitchen Center · UX Lead · 2021–2024 Kitchen Center · UX Lead · 2021–2024

Construir la práctica UX de un ecommerce, desde cero

Building an ecommerce UX practice from zero

Primera contratación UX de un retail recién migrado a Shopify: research continuo, design system, marketplace interno y un equipo que quedó funcionando sin mí.

First UX hire at a retailer freshly migrated to Shopify: continuous research, a design system, an internal marketplace, and a team that kept running without me.

Leer caso →Read case →
Tienda de María Devota en celular
María Devota · UX freelance · 2026 María Devota · Freelance UX · 2026

De pedir una cotización a poder comprar

From requesting a quote to actually buying

Una marca de recuerdos hechos a mano cuyo catálogo no permitía comprar. Benchmark, auditoría, sistema de diseño y una tienda nueva — sin que lo hecho a mano se sintiera industrial.

A handmade keepsake brand whose catalog didn't let anyone buy. Benchmark, audit, design system and a new store — without making the handmade feel industrial.

Leer caso →Read case →
Trabajo de campo frente a un local de Unimarc
SMU · UX–UI · 2019–2021

Cincuenta productos en un solo carro

Fifty products in a single cart

Unimarc y Telemercados, en los dos años en que el supermercado online dejó de ser una comodidad. La compra más difícil que existe, y cómo se ordena.

Unimarc and Telemercados, during the two years when online groceries stopped being a convenience. The hardest purchase there is, and how you order it.

Leer caso →Read case →
La app de La Roja en un estadio
Funx · UX–UI · 2018–2019

Hablar el idioma de quien programa

Speaking the developer's language

Apps y plataformas B2B y B2C de punta a punta: análisis de usuarios, prototipos, tests — y los mockups entregados en HTML, CSS y JS.

B2B and B2C apps and platforms end to end: user analysis, prototypes, tests — and mockups delivered in HTML, CSS and JS.

Leer caso →Read case →

Marcas con las que he trabajado

Brands I've worked with

Cómo es trabajar conmigo

How working with me works

01

Entender

Understand

Tu negocio, tus datos y tus usuarios reales. Analítica, mapas de calor, entrevistas — la evidencia antes que las opiniones.

Your business, your data and your real users. Analytics, heatmaps, interviews — evidence before opinions.

02

Diseñar

Design

Decisiones con su porqué, prototipos testeados con usuarios, y prioridades claras: primero lo que más mueve la venta.

Decisions with their why, prototypes tested with users, and clear priorities: what moves sales most comes first.

03

Instalar

Deliver

Entrega lista para desarrollo, medición del cambio, y capacidad instalada en tu equipo para que el trabajo perdure.

Developer-ready handoff, measured change, and capability installed in your team so the work lasts.

Sobre mí

About me

Fotografía de Rosario Valech

Llevo 13 años diseñando experiencias digitales en Chile: fui la primera contratación UX y luego UX Lead en Kitchen Center, diseñé los ecommerce de Unimarc y Telemercados en SMU, y en Funx trabajé de punta a punta, del research a la entrega en código. Hoy trabajo freelance con tiendas, startups y agencias.

I've spent 13 years designing digital experiences in Chile: first UX hire and then UX Lead at Kitchen Center, designer of Unimarc's and Telemercados' ecommerce at SMU, and at Funx I worked end to end, from research to handing the design over in code. Today I work freelance with stores, startups and agencies.

Diseño UDD · MIT Design Thinking (Emeritus) · Certificación UX-PM · Full-Stack Developer, Desafío LATAM

Design, UDD · MIT Design Thinking (Emeritus) · UX-PM Certification · Full-Stack Developer, Desafío LATAM

← Volver a casos← Back to work

Construir la práctica UX de un ecommerce, desde cero

Building an ecommerce UX practice from zero

kitchencenter.cl

Llegué como la primera persona de UX a una tienda recién migrada a Shopify. Tres años después dejé un equipo formado, un design system funcionando y una empresa que sabía —con evidencia— a quién le vendía y cómo.

I joined as the first UX hire at a store freshly migrated to Shopify. Three years later I left behind a trained team, a working design system, and a company that knew — with evidence — who it was selling to and how.

ClienteClientKitchen Center
RubroIndustryRetail de cocina · ChileKitchen retail · Chile
RolRoleUX Lead — primera contratación UXUX Lead — first UX hire
PeriodoPeriod2021 – 2024
La tienda de Kitchen Center abierta en un notebook, sobre un mesón de cocina
El sitio público: catálogo, ofertas y servicio al cliente conviviendo en la misma portada.
The public site: catalogue, offers and customer service sharing the same homepage.

El contexto

Context

Kitchen Center equipa cocinas y quinchos: más de veinte marcas —SMEG, Le Creuset, DeLonghi, entre otras—, tiendas físicas a lo largo de Chile y un ecommerce en pleno crecimiento. En 2021 la empresa acababa de migrar su tienda a Shopify. La migración resolvió el problema técnico, pero las decisiones de experiencia —cómo se navegaba, cómo se mostraban los productos, cómo se compraba— se habían tomado por defecto, con la configuración que venía, no con los usuarios en mente.

Kitchen Center outfits kitchens and outdoor cooking spaces: more than twenty brands — SMEG, Le Creuset, DeLonghi among them — physical stores across Chile, and a fast-growing ecommerce. In 2021 the company had just migrated its store to Shopify. The migration solved the technical problem, but the experience decisions — navigation, product display, purchase flows — had been made by default, with whatever came out of the box, not with users in mind.

El síntoma de fondo era más profundo: la empresa no sabía con precisión quiénes eran sus usuarios ni cómo compraban. Y no había nadie de UX para averiguarlo. Me contrataron para eso: mejorar el sitio y diseñar desde cero el backoffice de un sistema de marketplace interno.

The deeper symptom: the company didn't precisely know who its users were or how they bought. And there was no one in UX to find out. That's what I was hired for: to improve the site and design, from scratch, the backoffice of an internal marketplace system.

Prototipo navegable del sitio de Kitchen Center, con varias versiones de la portada conectadas entre sí
El prototipo navegable: varias versiones de la portada conectadas entre sí, para discutir sobre algo que se puede recorrer en vez de sobre una imagen.
The clickable prototype: several homepage versions linked together, so the discussion happens over something you can walk through instead of an image.

El problema

The problem

Un catálogo enorme —de refrigeradores a sartenes— servido con una navegación y unos flujos de compra que nadie había diseñado a propósito. Cada decisión de menú, filtro o ficha de producto afectaba la venta directamente, y se estaba tomando a ciegas. En paralelo, la operación de marketplace crecía y necesitaba herramientas internas diseñadas, no improvisadas.

A huge catalog — refrigerators to frying pans — served by navigation and purchase flows nobody had deliberately designed. Every menu, filter and product-page decision affected sales directly, and each one was being made blind. Meanwhile, a growing marketplace operation needed internal tools that were designed, not improvised.

El encargo aparente era "mejorar pantallas". El problema real era que no existía la capacidad de saber qué mejorar ni para quién.

The apparent brief was "fix the screens." The real problem was that the capability to know what to fix and for whom didn't exist.

Tres decisiones que definieron el trabajo

Three decisions that shaped the work

Decisión 01Decision 01

Entender antes de rediseñar

Understand before redesigning

Lo urgente era arreglar el sitio; lo importante era saber para quién. Instalé research continuo: arquetipos de usuario, customer journeys, service blueprint, encuestas, entrevistas y testeos de usabilidad, con lectura permanente de Hotjar y NPS. Por primera vez la empresa tuvo una imagen concreta y compartida de a quién le vendía y cómo.

The urgent thing was fixing the site; the important one was knowing for whom. I installed continuous research: user archetypes, customer journeys, a service blueprint, surveys, interviews and usability testing, with an always-on read of Hotjar and NPS. For the first time, the company had a concrete, shared picture of who it sold to and how.

Decisión 02Decision 02

Sistema antes que pantallas

System before screens

Con proyectos corriendo en el sitio público y en el backoffice a la vez, diseñar pieza a pieza no escalaba. Construí un design system que dio consistencia entre ambos mundos y velocidad a cada proyecto siguiente: cambios de navegación, filtros, fichas de producto y flujos de compra completos.

With projects running on the public site and the backoffice at once, designing piece by piece couldn't scale. I built a design system that brought consistency across both worlds and speed to every following project: navigation changes, filters, product pages and complete purchase flows.

Decisión 03Decision 03

Capacidad instalada, no dependencia

Installed capability, not dependency

Una práctica que depende de una persona no es una práctica. Contraté a mi equipo, entrené practicantes, monté rituales de diseño y workshops internos con las áreas comerciales y de operación, y una forma de priorizar basada en evidencia. La meta era que UX siguiera funcionando sin mí — y así fue.

A practice that depends on one person isn't a practice. I hired my team, trained interns, set up design rituals and internal workshops with the commercial and operations areas, and an evidence-based way of prioritizing. The goal was for UX to keep working without me — and it did.

Protopersonas de Kitchen Center y el mapa del recorrido de usuario de Mi Cuenta
Protopersonas y el recorrido de Mi Cuenta: qué hace la persona, cómo se siente en cada paso, y dónde aparece una oportunidad. Las banderas rojas son los puntos de dolor.
Proto-personas and the My Account journey: what the person does, how they feel at each step, and where an opportunity shows up. The red flags are the pain points.
Tablero de taller con el equipo de Kitchen Center, organizado en tres preguntas
Uno de los talleres internos. Tres preguntas al equipo completo — el modelo de negocio, la mayor dificultad del ecommerce, y qué sí estaba funcionando — para partir de lo que ya sabían.
One of the internal workshops. Three questions to the whole team — the business model, the biggest ecommerce difficulty, and what was already working — to start from what they already knew.

Lo que se construyó

What was built

  • Proyectos completos sobre kitchencenter.cl: navegación y categorías, filtros, fichas de producto y flujos de compra.
  • El diseño integral del backoffice del marketplace interno — de levantamiento a entrega a desarrollo.
  • Workshops que alinearon a comercial, operaciones y tecnología alrededor del mismo mapa: el service blueprint pasó a ser lenguaje común.
  • Un equipo UX contratado, formado y operando con research, sistema y rituales propios.
  • Complete projects on kitchencenter.cl: navigation and categories, filters, product pages and purchase flows.
  • The full design of the internal marketplace backoffice — from discovery to developer handoff.
  • Workshops that aligned commercial, operations and tech around the same map: the service blueprint became a shared language.
  • A UX team hired, trained, and running on its own research, system and rituals.

El después

The after

Cuando salí en 2024, Kitchen Center era una organización distinta en lo digital: entendía a sus usuarios y su propia forma de vender, tenía procesos internos mapeados y mejorados, y un equipo de UX que no me necesitaba para funcionar. Ese es, para mí, el resultado que define un liderazgo bien hecho.

When I left in 2024, Kitchen Center was a different organization digitally: it understood its users and its own way of selling, had its internal processes mapped and improved, and had a UX team that didn't need me to function. To me, that's the result that defines leadership done well.

¿Tu tienda toma decisiones de diseño a ciegas?

Is your store making design decisions blind?

← Volver a casos← Back to work

De pedir una cotización a poder comprar

From requesting a quote to actually buying

mariadevota.cl

Una marca de recuerdos hechos a mano tenía catálogo, tenía clientas y tenía producto — pero no tenía forma de vender sin que alguien contestara un mensaje. El encargo era convertirla en tienda sin que lo hecho a mano empezara a sentirse industrial.

A handmade keepsake brand had a catalog, customers and product — but no way to sell without someone answering a message. The brief: turn it into a store without making the handmade start to feel industrial.

ClienteClientMaría Devota
RubroIndustryRecuerdos hechos a manoHandmade keepsakes
RolRoleUX y dirección de marcaUX and brand direction
EstadoStatus2026 · en curso2026 · in progress

El contexto

Context

María Devota hace recuerdos de primera comunión a mano: collares Liberty, pulseras, álbumes y cajas de recuerdos. Es una compra rara — ocurre una vez en la vida de una niña o un niño, casi siempre la hace otra persona como regalo, y el objeto se guarda durante años.

María Devota makes first-communion keepsakes by hand: Liberty necklaces, bracelets, albums and memory boxes. It's an unusual purchase — it happens once in a child's life, it's almost always made by someone else as a gift, and the object is kept for years.

El problema

The problem

La tienda mostraba los productos, pero no los vendía: para comprar había que pedir una cotización. Cada venta dependía de que alguien contestara un mensaje, y la marca crecía al ritmo de esa conversación, no al de su demanda.

The store displayed products but didn't sell them: buying meant requesting a quote. Every sale depended on someone answering a message, and the brand grew at the pace of that conversation, not of its demand.

Tres decisiones que definieron el trabajo

Three decisions that shaped the work

Decisión 01Decision 01

Mirar dieciséis tiendas antes de decidir

Look at sixteen stores before deciding

Revisé alrededor de dieciséis competidores chilenos e internacionales, más una auditoría de la tienda existente. No para copiar, sino para separar lo que es convención del rubro de lo que todos hacen mal y es una oportunidad.

I reviewed around sixteen Chilean and international competitors, plus an audit of the existing store. Not to copy, but to separate what is category convention from what everyone does badly and is therefore an opportunity.

Decisión 02Decision 02

Un sistema de marca, no una tienda bonita

A brand system, not a pretty store

Antes de diseñar pantallas armé el sistema: paleta, tipografías y un manual de marca que define la esencia en tres pilares —hecho a mano, heredable, personal— con reglas de logo, proporciones de color, dirección de fotografía y voz de marca.

Before designing screens I built the system: palette, typefaces and a brand manual defining the essence in three pillars — handmade, heirloom, personal — with logo rules, color proportions, photography direction and brand voice.

Decisión 03Decision 03

Diseñar contra la plataforma real

Design against the real platform

La home la entregué como prototipo navegable, estructurado para calzar uno a uno con las secciones nativas del tema de Shopify que se iba a usar. Nada de diseñar algo precioso que después hay que negociar con el desarrollo.

I delivered the home page as a navigable prototype, structured to map one-to-one onto the native sections of the Shopify theme being used. No designing something beautiful that then has to be negotiated with development.

Portada de María Devota en celular, con las categorías listadas
En celular, cada categoría muestra cuántos productos tiene: saber qué hay antes de entrar a buscar.
On mobile, each category shows how many products it holds: knowing what exists before going looking.
Ficha de producto personalizable de María Devota en escritorio
La personalización dentro de la ficha — nombre, colegio y fecha — para comprar directo en vez de pedir cotización.
Personalisation inside the product page — name, school and date — so you buy directly instead of asking for a quote.

¿Tu tienda hace trabajar a un humano en cada venta?

Does your store need a human for every sale?

← Volver al inicio← Back to home

Todo lo que he diseñado

Everything I've designed

Trece años de trabajo, ordenados. Los casos con historia completa se abren aparte; el resto está aquí para que veas el alcance real.

Thirteen years of work, in order. The ones with a full story open separately; the rest are here so you can see the actual range.

Proyectos propios

My own ventures

Donde tomo todas las decisiones y también todos los riesgos. Es lo que mejor explica cómo trabajo.

Where I make every decision and carry every risk. It's what best explains how I work.

En curso

HeyKiddo

Marca propia de juego sin pantallas: estrategia de negocio, producto, identidad, tienda y suscripción mensual.

Todo
En curso

NAVA Estudio

Estudio de UX y marketing digital con Carmen Nalda. Dirección de UX, identidad y sitio propio.

Cofundadora

Clientes freelance

Freelance clients

Marcas chilenas de ecommerce, en rubros muy distintos y sobre las plataformas que el mercado realmente usa.

Chilean ecommerce brands across very different categories, on the platforms the market actually uses.

En producción

Caramel

Chocolatería artesanal chilena con tienda online, pedidos express y venta corporativa.

UX
2026

María Devota

Recuerdos de primera comunión hechos a mano. De catálogo por cotización a tienda con compra directa.

UX y marca
—

Saintcirq

Joyería. Ecommerce de nicho premium y compra emocional de alto valor.

UX
—

Madremia

Ropa maternal y de lactancia, con confección chilena y tienda física en Santiago.

UX
—

Lorenzo di Pontti

Moda femenina de talla XS a 3XL, con catálogo amplio y tiendas físicas.

UX

¿Alguno se parece a lo que necesitas?

Does any of these look like what you need?

← Volver al inicio
Diagnóstico gratuito

¿Dónde se te están yendo las ventas?

Unas pocas preguntas sobre tu negocio — ninguna técnica. Al final te digo qué está pasando, cómo se llama, y tres cosas que puedes hacer tú misma esta semana. Vendas productos o servicios, o estés recién partiendo.

Hacer un sitio hoy toma una tarde. Saber qué hacer es lo que sigue costando.

2 minutos · sin registro · el resultado se ve completo

1 / 7

← Volver a casos← Back to work

Tres sitios que eran la misma empresa

Three sites that were the same company

caramel.cl

Una chocolatería con cuatro negocios repartidos en tres dominios distintos, un sitio hecho en casa que casi no vendía, y una clienta que quería poder seguir sola después.

A chocolatier with four businesses spread across three separate domains, a home-made site that barely sold, and a client who wanted to carry on by herself afterwards.

ClienteClientCaramelCaramel
RubroIndustryChocolatería artesanal · SantiagoArtisanal chocolate · Santiago
RolRoleUX freelanceFreelance UX
EstadoStatusEn producciónLive

El contexto

Context

Caramel hace chocolate artesanal de estilo alemán pintado a mano: bombones, barras, lava cakes y piezas propias como los moái rellenos. Más de ocho años en el mercado chileno, con despacho concentrado en el sector oriente de Santiago.

Caramel makes hand-painted German-style artisanal chocolate: bonbons, bars, lava cakes and signature pieces like their filled moái. More than eight years in the Chilean market, delivering mainly across eastern Santiago.

Lo que hace particular el encargo es que la marca no vende por un canal, sino por tres: la tienda online, los pedidos express y la venta corporativa a empresas. Tres compradores con urgencias, volúmenes y expectativas distintas, entrando todos por la misma puerta.

What makes this brief unusual is that the brand doesn't sell through one channel but three: the online store, express orders and corporate sales. Three buyers with different urgencies, volumes and expectations, all coming through the same door.

Portada de la tienda Caramel en tablet
La portada: el producto primero y una sola idea por pantalla.
The homepage: product first, one idea per screen.
Catálogo y ficha de producto de Caramel en escritorio y celular
Catálogo y venta corporativa conviviendo, y la misma ficha resuelta en celular.
Catalogue and corporate sales side by side, and the same page solved on mobile.

El problema

The problem

Eran tres sitios, tres dominios y una sola empresa. El cliente no tenía cómo saberlo.

Three sites, three domains and one company. The customer had no way of knowing.

Caramel no vende por un canal: vende por cuatro. Venta directa en tienda y online, despacho express a través de las plataformas de última milla, regalos corporativos para empresas, y chocolates en vending machines. Cada uno tenía su propio dominio, sin conexión entre ellos.

Caramel doesn't sell through one channel: it sells through four. Direct sales in store and online, express delivery through last-mile platforms, corporate gifting for companies, and chocolates in vending machines. Each had its own domain, with no connection between them.

Eso significaba mantener tres sitios en paralelo —el triple de trabajo para el mismo equipo— y, del otro lado, un cliente que llegaba a uno de ellos sin entender que los otros dos eran la misma marca.

That meant maintaining three sites in parallel — three times the work for the same team — and, on the other side, a customer landing on one of them without understanding the other two were the same brand.

Lo que pedíanThe brief

«Tenemos un sitio muy malo y casi no vendemos»

"Our site is very bad and we barely sell"

Lo habían armado ellas mismas en Wix, con conocimiento básico. Querían la ayuda de alguien que supiera, y llegaron a mí por recomendación de varias personas. El encargo era mejorar el sitio completo.

They had built it themselves on Wix, with basic knowledge. They wanted help from someone who knew, and came to me through several people's recommendations. The brief was to improve the whole site.

Lo que encontréWhat I found

Un menú que se contradecía a sí mismo

A menu contradicting itself

Había páginas de listado donde sí se podía agregar al carro y comprar, conviviendo con una sección de «catálogo» que llevaba a un PDF con todos los productos. Básico y complicado a la vez: dos formas de mirar lo mismo, sin que nada explicara cuál servía para comprar.

There were listing pages where you could add to cart and buy, sitting beside a "catalogue" section that led to a PDF of every product. Basic and complicated at once: two ways of looking at the same thing, with nothing explaining which one was for buying.

La auditoría inicial sacó a la luz varios problemas más que ni ellas sabían que tenían.

The initial audit surfaced several more problems they didn't know they had.

Las decisiones

The decisions

Antes de diseñarBefore designing

Fui a ver cómo se vende de verdad

I went to see how it actually sells

Hablé con varias personas que trabajan ahí, fui a las tiendas, hablé con las que venden, con las que hacen los chocolates y arman las cajas, hablé con clientes y observé cómo compraban ahí mismo. Un chocolate que se regala no se elige igual que uno que se come: eso no sale de mirar analítica, sale de estar parada en el local.

I talked to several of the people who work there, visited the stores, talked to the people who sell, to the people who make the chocolates and pack the boxes, talked to customers and watched how they bought right there. A chocolate bought as a gift isn't chosen the same way as one you eat yourself: that doesn't come from looking at analytics, it comes from standing in the shop.

EstructuraStructure

De tres dominios a uno solo

From three domains to one

Juntamos los cuatro negocios bajo un mismo dominio, cada uno con su propia ruta, pero todo es un solo Caramel. Un sitio que mantener en vez de tres, y un cliente que entiende de una sola vez con quién está tratando.

We brought the four businesses under one domain, each with its own path, but it's all one Caramel. One site to maintain instead of three, and a customer who understands in one go who they're dealing with.

PlataformaPlatform

La plataforma se eligió al final, no al principio

The platform was chosen last, not first

Con la investigación bajada armamos el manual de marca, los wireframes y la estructura de lo que debía ser el sitio. Recién con eso aprobado analizamos qué plataforma y qué aplicaciones convenían, según presupuesto y según el negocio. Migramos desde Wix rescatando todos los datos que se podían recuperar, para no perder ni el trabajo hecho ni los clientes fieles.

With the research in hand we built the brand manual, the wireframes and the structure the site needed. Only once that was approved did we analyse which platform and which apps made sense, by budget and by business. We migrated from Wix rescuing every piece of data we could, so as not to lose the work already done or the loyal customers.

SistemaSystem

Un design system con tono y voz, no solo con colores

A design system with tone and voice, not just colours

Armé el sistema —incluyendo tono, voz y criterios de redacción— integrado directamente en la plantilla de Shopify, y sobre eso toda la arquitectura del sitio. Que el criterio viva dentro de la herramienta con la que trabajan es lo que hace que se siga cumpliendo cuando yo ya no estoy.

I built the system — including tone, voice and copy criteria — integrated directly into the Shopify theme, and on top of that the site's whole architecture. Having the criteria live inside the tool they work with is what keeps it being followed once I'm gone.

Diagrama del flujo para armar una caja de 12 bombones en la tienda Caramel
El flujo de armar una caja de doce bombones: por dónde se entra, qué pasa cuando la caja ya está llena o un sabor se agota, y el pedido saliendo con los doce SKU descontados.
The build-your-own box of twelve flow: where you come in, what happens when the box is already full or a flavour runs out, and the order leaving with all twelve SKUs deducted.
Lo difícilThe hard part

Los envíos, con una tarifa distinta por comuna

Shipping, with a different rate per district

Lo que más me costó fue integrar los métodos de envío en Shopify, porque las tarifas cambian según la comuna. Es el tipo de problema que no se ve en ningún diseño y que igual decide si una compra se completa o no.

The hardest part was integrating shipping methods into Shopify, because rates change by district. It's the kind of problem no design shows and that still decides whether a purchase completes.

Lo que quedó instalado

What was left behind

Dejé todo armado de la forma más simple posible para que la clienta pudiera seguir sola, y le hice clases de cómo usarlo sin depender de nadie externo. La puerta queda abierta: si necesita algo más, agendamos horas o un proyecto puntual. Pero el sitio no depende de que me llame.

I left everything set up as simply as possible so the client could carry on alone, and taught her how to use it without depending on anyone external. The door stays open: if she needs more, we book hours or a specific project. But the site doesn't depend on her calling me.

Pantallas de la tienda Caramel en producción, en celular y escritorio
La tienda en producción: catálogo, ficha de producto, venta corporativa y compra express, resueltos en celular y en escritorio.
The live store: catalogue, product page, corporate sales and express purchase, solved on mobile and on desktop.

Lo que aprendí

What I learned

01

Cuando una marca tiene varios negocios, el problema rara vez es el diseño: es que nadie decidió cómo se relacionan entre ellos.

When a brand runs several businesses, the problem is rarely design: it's that nobody decided how they relate to each other.

02

Ir al local y ver comprar a alguien responde en una tarde preguntas que la analítica no contesta nunca.

Going to the shop and watching someone buy answers, in one afternoon, questions analytics never will.

03

La plataforma es la última decisión, no la primera. Elegirla antes de saber qué necesitas es cómo se termina pagando por funciones que no usas.

The platform is the last decision, not the first. Choosing it before knowing what you need is how you end up paying for features you never use.

Qué significa para tu tienda

What it means for your store

Si tienes más de una forma de vender —una tienda, encargos, empresas, ferias— lo más probable es que no necesites un sitio más bonito, sino que alguien decida cómo conviven. Y que después te lo deje andando de una manera que puedas mantener tú.

If you have more than one way of selling — a shop, commissions, companies, fairs — chances are you don't need a prettier site, you need someone to decide how they coexist. And then leave it running in a way you can maintain yourself.

El resultado

The outcome

La tienda está en producción hoy y se puede entrar a verla. Los cuatro negocios viven en un solo dominio, la clienta publica y mantiene sola, y el criterio con el que se toman las decisiones quedó escrito dentro de la plantilla.

The store is live today and you can go and look at it. The four businesses live on one domain, the client publishes and maintains it on her own, and the criteria behind the decisions are written inside the theme.

¿Tu tienda se parece a esta?

Does your store look like this one?

← Volver a casos← Back to work

Cincuenta productos en un solo carro

Fifty products in a single cart

unimarc.cl

Levantar los ecommerce de Unimarc y Telemercados justo en los dos años en que comprar el supermercado por internet dejó de ser una comodidad en Chile.

Building the Unimarc and Telemercados online stores during the two years when buying groceries online in Chile stopped being a convenience.

ClienteClientSMU · Unimarc y TelemercadosSMU · Unimarc and Telemercados
RubroIndustrySupermercados · Chile y PerúSupermarkets · Chile and Peru
RolRoleUX–UI, equipo de ecommerceUX–UI, ecommerce team
PeriodoPeriod2019 – 2021
Dos personas revisando una encuesta en una tablet frente a un local de Unimarc
El trabajo de campo: preguntarle a la clienta en la puerta del local, no adivinar desde la oficina.
Fieldwork: asking the customer at the door of the store instead of guessing from the office.

El contexto

Context

SMU es un holding multiformato de supermercados: Unimarc, Alvi, Mayorista 10 y Super10 en Chile, más Mayorsa y Maxi Ahorro en Perú. Entré en 2019 a un equipo de ecommerce que se estaba armando desde cero, con el encargo de levantar la tienda online y llevar a los clientes de telemercados.cl hacia unimarc.cl. Trabajábamos en célula, con sprints semanales.

SMU is a multi-format supermarket holding: Unimarc, Alvi, Mayorista 10 and Super10 in Chile, plus Mayorsa and Maxi Ahorro in Peru. I joined in 2019 on an ecommerce team that was being built from scratch, tasked with standing up the online store and moving customers from telemercados.cl to unimarc.cl. We worked as a squad, on weekly sprints.

Y después pasó todo lo demás. En octubre de 2019 el estallido social dejó supermercados quemados y saqueados. En marzo de 2020 llegó la pandemia. En dos años, comprar el supermercado por internet pasó de ser un canal minoritario a ser, para muchas familias, la única forma de abastecerse. Estábamos construyendo el sitio mientras la demanda se multiplicaba encima.

And then everything else happened. In October 2019 Chile's social unrest left supermarkets burned and looted. In March 2020 the pandemic arrived. In two years, buying groceries online went from a minority channel to being, for many families, the only way to stock a kitchen. We were building the site while demand multiplied on top of it.

Página de medidas sanitarias de Unimarc.cl en escritorio y celular
La página de medidas sanitarias, resuelta en escritorio y celular a la vez. Cuando comprar el supermercado dejó de ser opcional, explicar cómo se cuidaba el despacho pasó a ser parte del producto.
The health-measures page, solved for desktop and mobile at once. When buying groceries stopped being optional, explaining how delivery was handled became part of the product.

El desafío

The challenge

Comprar el supermercado no se parece a ninguna otra compra online: son cincuenta decisiones seguidas, no una.

Buying groceries is unlike any other online purchase: it's fifty decisions in a row, not one.

Una tienda normal resuelve una sola pregunta: ¿lo compro o no? Un carro de supermercado tiene cuarenta o cincuenta productos, sustituciones cuando algo se quiebra de stock, horarios de entrega que son un recurso escaso, y un cliente que repite casi la misma compra todas las semanas.

A normal store solves one question: do I buy this or not? A grocery cart holds forty or fifty products, substitutions when something goes out of stock, delivery windows that are a scarce resource, and a customer who repeats almost the same purchase every week.

Eso cambia la aritmética del diseño. Cada roce se multiplica por la cantidad de productos: un filtro apenas mal resuelto no cuesta una venta, cuesta el carro completo. Y si la compra semanal no es más rápida que la anterior, el cliente vuelve al local.

That changes the arithmetic of design. Every bit of friction multiplies by the number of products: a filter that's slightly wrong doesn't cost one sale, it costs the whole cart. And if this week's shop isn't faster than the last one, the customer goes back to the store.

Cómo lo trabajamos

How we worked

ReferenciaReference

Mirar afuera antes de decidir adentro

Look outside before deciding inside

Antes de resolver cada parte del sitio hicimos benchmark de ecommerce de supermercado nacionales e internacionales, sección por sección. En una categoría donde los patrones ya están resueltos afuera, inventar es caro y casi siempre peor.

Before solving each part of the site we benchmarked national and international grocery ecommerce, section by section. In a category where the patterns are already solved elsewhere, inventing is expensive and almost always worse.

ValidaciónValidation

Probar con gente antes de programar

Test with people before writing code

Testeo de guerrilla, compras acompañadas con usuarios internos, pruebas A/B, test de cinco segundos, tree testing y sesiones con tareas presenciales y remotas. En una organización grande, corregir algo ya construido cuesta muchas veces más que descartarlo en prototipo.

Guerrilla testing, accompanied shopping sessions with internal users, A/B tests, five-second tests, tree testing, and task sessions both in person and remote. In a large organisation, fixing something already built costs many times more than discarding it as a prototype.

Flujo y prototipo móvil del supermercado, incluyendo el caso de productos no disponibles
El recorrido completo en celular, con el caso incómodo incluido: qué pasa cuando un producto no está disponible.
The full journey on mobile, with the awkward case built in: what happens when a product is out of stock.
SistemaSystem

Un design system con glosario, no solo con componentes

A design system with a glossary, not just components

Armé la librería de componentes y patrones, las reglas de uso y un glosario de términos, y me hice cargo de mantenerlo y comunicar los cambios entre equipos. Lo del glosario no es un detalle: en una organización grande la mayor fuente de inconsistencia no es el color de un botón, es que cada equipo le pone un nombre distinto a la misma cosa.

I built the component and pattern library, the usage rules and a glossary of terms, and took on maintaining it and communicating changes across teams. The glossary isn't a detail: in a large organisation the biggest source of inconsistency isn't a button's colour, it's each team calling the same thing by a different name.

Design system: grilla, paleta de colores, tipografía y botones para escritorio y móvil
El design system: grilla, color, tipografía y botones, con su versión de escritorio y de móvil, y la anotación de contraste al lado de cada color.
The design system: grid, colour, type and buttons, in desktop and mobile versions, with the contrast note beside each colour.
MigraciónMigration

Mover a los clientes de un sitio al otro

Moving customers from one site to the other

Telemercados ya tenía una base de clientes con sus costumbres hechas. Llevarlos a unimarc.cl no era un problema de traspaso de datos: era pedirle a alguien que rehiciera en otro sitio la compra que ya sabía hacer de memoria.

Telemercados already had a customer base with settled habits. Moving them to unimarc.cl wasn't a data-transfer problem: it was asking someone to redo, on a different site, the shop they already knew by heart.

Lo que aprendí

What I learned

01

En una compra larga, cada fricción se multiplica por la cantidad de productos.

In a long purchase, every bit of friction multiplies by the number of products.

02

Validar un prototipo cuesta una fracción de corregir algo ya construido.

Validating a prototype costs a fraction of fixing something already built.

03

Un sistema de diseño no es una librería de componentes: es un vocabulario compartido.

A design system isn't a component library: it's a shared vocabulary.

Qué significa para tu tienda

What it means for your store

Si diseñé un carro de cincuenta productos con sustituciones y horarios de entrega, el checkout de tu tienda no es el problema más difícil que he visto. Y la forma de trabajar es la misma: mirar qué ya está resuelto afuera, probarlo con gente antes de construirlo, y dejar un sistema que se sostenga sin mí.

If I designed a fifty-product cart, with substitutions and delivery windows, your store's checkout isn't the hardest problem I've seen. And the way of working is the same: look at what's already solved elsewhere, test it with people before building it, and leave behind a system that holds up without me.

¿Tu tienda se parece a esta?

Does your store look like this one?

← Volver a casos← Back to work

Hablar el idioma de quien programa

Speaking the developer's language

Cinco productos en poco más de un año para hinchas y clubes —el Festival de Viña, Colo-Colo, La Roja— investigados, diseñados, testeados y entregados en HTML, CSS y JavaScript en vez de en una imagen.

Five products in just over a year for fans and clubs — the Viña del Mar Festival, Colo-Colo, La Roja — researched, designed, tested and handed over in HTML, CSS and JavaScript instead of as a picture.

ClienteClientFunx
RubroIndustryTecnología · deporte y espectáculosTechnology · sports and entertainment
RolRoleUX–UI, con entrega en códigoUX–UI, handing over in code
PeriodoPeriod2018 – 2019
La app de La Roja en un celular, con un estadio lleno de fondo
El momento real de uso: el partido en curso, en la mano, con todo lo demás compitiendo por la atención.
The real moment of use: the match under way, in your hand, with everything else competing for attention.

El contexto

Context

Funx hacía soluciones digitales B2B para conectar a los fans con las experiencias que ofrecen la entretención, el deporte y los espectáculos. En poco más de un año pasaron por mis manos cinco productos: la app del Festival de Viña del Mar 2019, el sitio de Colo-Colo, su tienda online oficial, la app de La Roja y un panel de administración para los clubes.

Funx built B2B digital products connecting fans with the experiences that entertainment, sport and live shows offer. In just over a year, five products went through my hands: the Viña del Mar Festival 2019 app, the Colo-Colo website, its official online store, the La Roja app, and an admin dashboard for the clubs.

App de La Roja en tres pantallas de celular: Fan Zone, el partido en vivo y Explora
La app de La Roja. El partido en vivo con las incidencias en una línea de tiempo: el hincha entra, mira, entiende y se va.
The La Roja app. The live match with incidents on a timeline: the fan opens it, looks, understands and leaves.

El desafío

The challenge

Un hincha no navega: mira el teléfono diez segundos entre una jugada y otra.

A fan doesn't browse: they glance at their phone for ten seconds between one play and the next.

Estos productos se usan en el peor momento posible para una interfaz. En medio de una multitud, de noche, con datos móviles malos, con la atención partida en tres, y con el contenido cambiando en vivo mientras la persona lo mira. No hay margen para que alguien tenga que averiguar cómo funciona algo: si no se entiende de una pasada, no se entiende.

These products get used at the worst possible moment for an interface. In the middle of a crowd, at night, on bad mobile data, with attention split three ways, and with the content changing live while the person looks at it. There's no room for anyone to work out how something operates: if it isn't understood at a glance, it isn't understood.

App del Festival de Viña 2019 en tres pantallas de celular
Festival de Viña 2019. Parrilla, transmisión en vivo y videos, usándose de noche, en una multitud y con señal mala.
Viña del Mar 2019. Line-up, live stream and videos, used at night, in a crowd, on bad signal.

Las decisiones

The decisions

AlcanceScope

Cinco productos, un mismo hincha

Five products, one same fan

Una app de fans, un sitio de contenidos, una tienda online y un panel interno parecen cuatro proyectos distintos. Son cuatro caras del mismo negocio, y la misma persona pasa por varias de ellas: mira el partido en la app, entra al sitio a ver la estadística, y termina comprando la camiseta. Diseñarlas todas obliga a entender el negocio entero, no solo la pantalla que a uno le tocó.

A fan app, a content site, an online store and an internal dashboard look like four separate projects. They're four faces of the same business, and the same person passes through several of them: watches the match on the app, goes to the site for the stats, and ends up buying the shirt. Designing all of them forces you to understand the whole business, not just the screen you were handed.

Página de estadísticas de un partido en el sitio de Colo-Colo
Sitio de Colo-Colo: el dato de un partido leído de una pasada — posesión, tiros al arco, pases — sin obligar a nadie a interpretar una tabla.
Colo-Colo's site: a match read at a glance — possession, shots, passes — without making anyone interpret a table.
EntregaHandover

Los mockups los entregaba en código, no en imágenes

I handed over mockups in code, not in pictures

No entregaba un archivo de diseño para que otro lo interpretara: armaba los mockups en HTML, CSS y JavaScript, listos para que desarrollo los integrara con Rails. El producto lo construía el equipo de desarrollo; lo mío era que lo que les llegara no dejara nada a la interpretación. Entre un diseño aprobado y lo que sale publicado siempre se pierde algo —un espaciado, un estado, el comportamiento en un celular chico—. Entregarlo ya escrito es la forma de que no se pierda.

I didn't hand over a design file for someone else to interpret: I built the mockups in HTML, CSS and JavaScript, ready for development to integrate with Rails. The product was built by the development team; my part was making sure what reached them left nothing open to interpretation. Something always gets lost between an approved design and what goes live — a spacing, a state, the behaviour on a small phone. Handing it over already written is how you stop that.

Tienda online oficial de Colo-Colo
La tienda oficial del club: el mismo hincha de la app, ahora comprando.
The official club store: the same fan from the app, now buying.
MétodoMethod

Research antes, pruebas después

Research first, testing after

Análisis de usuarios, focus groups, customer journeys y arquetipos antes de dibujar. Wireframes y prototipos para validar. Pruebas A/B y QA una vez construido. En productos que se estrenan con una fecha encima —un festival, un partido— no hay segunda oportunidad para arreglarlo después.

User analysis, focus groups, customer journeys and archetypes before drawing anything. Wireframes and prototypes to validate. A/B tests and QA once built. On products that launch against a fixed date — a festival, a match — there's no second chance to fix it later.

Lo aburridoThe boring part

El panel interno también se diseña

The internal dashboard gets designed too

El panel de administración de los clubes no lo ve ningún hincha, y es donde el cliente pasa el día. Lo trabajé con entrevistas, prototipo y pruebas de usabilidad, igual que la app. Una herramienta interna mal resuelta no genera reclamos: genera gente que deja de usarla y vuelve a pedir el dato por correo.

No fan ever sees the clubs' admin dashboard, and it's where the client spends the day. I worked on it with interviews, a prototype and usability tests, the same as the app. A badly resolved internal tool doesn't generate complaints: it generates people who stop using it and go back to asking for the data by email.

Panel de administración con analítica de varios clubes deportivos
El panel interno. Nadie lo muestra en un portafolio y es donde el cliente pasa el día.
The internal dashboard. Nobody shows these in a portfolio, and it's where the client spends the day.

Lo que aprendí

What I learned

01

Si no se entiende de una pasada, no se entiende.

If it isn't understood at a glance, it isn't understood.

02

Un diseño entregado en código deja mucho menos espacio a la interpretación que uno entregado en imágenes.

A design handed over in code leaves far less room for interpretation than one handed over as pictures.

03

Las herramientas internas no se quejan: se dejan de usar.

Internal tools don't complain: people just stop using them.

Qué significa para tu tienda

What it means for your store

Hablo el idioma de quien programa. Eso significa que no te entrego un diseño bonito que después tu desarrollador interpreta a su manera: te entrego algo lo bastante definido para que se construya como se pensó, y me siento con quien lo va a programar cuando haga falta.

I speak the language of the people who build it. That means I don't hand you a pretty design your developer then interprets their own way: I hand you something defined enough to be built as intended, and I sit down with whoever is going to code it when that helps.

¿Tu tienda se parece a esta?

Does your store look like this one?

← Volver a casos← Back to work

Comprar por impulso y comprar una vez en la vida

Buying on impulse and buying once in a lifetime

saintcirq.cl

Una joyería donde conviven tres decisiones de compra que no se parecen en nada: un par de aros, un tocado de novia hecho a mano, y una joya encargada a medida.

A jewellery brand where three completely unalike buying decisions live together: a pair of earrings, a handmade bridal headpiece, and a made-to-order piece.

ClienteClientSaint Cirq
RubroIndustryJoyería y tocados · SantiagoJewellery and bridal · Santiago
RolRoleUX freelanceFreelance UX
DuraciónLengthVarios mesesSeveral months
La tienda de Saint Cirq en un celular, mostrando la sección de carteras, entre joyas y pañuelos de la marca
La tienda en celular. Debajo de las joyas vive la línea de complementos — carteras, pañuelos — que compite por el mismo menú.
The store on mobile. Below the jewellery sits the accessories line — bags, scarves — competing for the same menu.

El contexto

Context

Saint Cirq vende joyas —aros, collares y pulseras—, una línea larga de complementos que va desde pañuelos y carteras hasta joyeros, bandejas y posavasos, y tocados de novia hechos a mano. Además hace joyas a medida por encargo. Tiene tienda en Nueva Costanera, despacha a todo Chile y su tienda corre sobre Shopify.

Saint Cirq sells jewellery — earrings, necklaces and bracelets — a long line of accessories running from scarves and bags to jewellery boxes, trays and coasters, and handmade bridal headpieces. It also makes bespoke pieces to order. It has a store on Nueva Costanera, ships across Chile, and runs on Shopify.

La marca no se presenta como una tienda sino como una puesta en escena: «la joyería como un espectáculo… ¡que comience la función!». Eso, que suena a un detalle de tono, es en realidad la primera restricción del proyecto: lo que se diseñe tiene que sostener esa promesa, no aplanarla en una grilla de productos.

The brand doesn't introduce itself as a shop but as a staging: "jewellery as a spectacle… let the show begin!". What sounds like a matter of tone is in fact the project's first constraint: whatever gets designed has to hold up that promise instead of flattening it into a product grid.

El encargo

The brief

«No estamos teniendo ventas, no llega la gente y no compran. Tenemos la misma página desde hace mucho tiempo.»

"We're not making sales, people don't arrive and they don't buy. We've had the same site for a long time."

Así llegó el encargo, con sus palabras. Querían vender más y hacer la marca más visible. El sitio estaba en Shopify sobre una plantilla pagada que limitaba bastante lo que se podía hacer, así que lo primero fue cambiarla por Dawn —que es gratis— y trabajar desde cero sobre ella.

That's how the brief arrived, in their own words. They wanted to sell more and make the brand more visible. The site ran on Shopify on a paid theme that limited quite a lot, so the first move was to swap it for Dawn — which is free — and work from scratch on top of it.

El desafío

The challenge

Unos aros se compran en dos minutos. Un tocado de novia se compra una vez en la vida.

Earrings take two minutes to buy. A bridal headpiece is bought once in a lifetime.

Una tienda online normal asume que todas las compras funcionan igual: mirar, agregar al carro, pagar. Aquí hay tres que no se parecen — comprar un producto directamente, encargar un tocado, y mandar a hacer una joya especial — y el trabajo fue entender cómo separarlas sin desarmar la tienda en tres.

A normal online store assumes every purchase works the same way: look, add to cart, pay. Here there are three that don't — buying a product directly, commissioning a headpiece, and having a special piece made — and the work was figuring out how to separate them without breaking the store into three.

Las decisiones

The decisions

Punto de partidaStarting point

Un taller con las dueñas antes de tocar el sitio

A workshop with the owners before touching the site

Para entender el negocio de verdad, concretar objetivos y saber cómo querían que creciera la marca. Un encargo que empieza en «hazme el sitio más lindo» y termina en «así queremos crecer» es otro encargo.

To understand the business properly, pin down objectives and learn how they wanted the brand to grow. A brief that starts at "make the site prettier" and ends at "this is how we want to grow" is a different brief.

Lámina del análisis heurístico del sitio de Saint Cirq, con la portada anotada en escritorio y móvil
El análisis heurístico del sitio que ya existía: cada punto marcado como bien resuelto, por mejorar, por arreglar, o idea. Ninguna decisión posterior se tomó por gusto.
The heuristic analysis of the site that already existed: each point marked as working, to improve, to fix, or an idea. No later decision was made on taste.
MarcaBrand

La tienda como un museo, no como una grilla

The store as a museum, not a grid

Saint Cirq tiene un sentido muy grande del cuento: el espectáculo, la función que comienza, la joya como obra. Trabajamos la marca y el storytelling completo para que el diseño del ecommerce lo sostuviera — los productos al centro, bien iluminados, con un recorrido, como las obras de un museo. El relato no es decoración: es lo que decide dónde va cada cosa.

Saint Cirq has a strong sense of story: the spectacle, the show beginning, the jewel as an artwork. We worked the brand and the whole storytelling so the ecommerce design would hold it up — products at the centre, well lit, with a route through them, like works in a museum. The story isn't decoration: it's what decides where everything goes.

Los tres caminosThe three paths

Separados, pero sin partir la tienda en tres

Separate, without splitting the store in three

Comprar un producto queda directo, con su carro y su pago. El tocado se cotiza, pero no desde cero: la novia elige una base y tiene su propia ficha de producto, así la conversación parte de algo concreto en vez de una hoja en blanco. Y la joya a medida se habla directamente, porque ahí no hay producto que mostrar todavía.

Buying a product stays direct, with its cart and its checkout. The headpiece is quoted, but not from nothing: the bride picks a base and it has its own product page, so the conversation starts from something concrete instead of a blank sheet. And the bespoke piece is discussed directly, because there's no product to show yet.

Ficha de producto de Saint Cirq en una tablet, con precio, stock disponible, retiro en tienda y atributos del producto
La ficha resuelta: precio, cuántas quedan, dónde retirar, y los tres atributos que la clienta pregunta siempre — hecho a mano, exclusivo, piedras finas.
The product page solved: price, how many are left, where to collect, and the three attributes customers always ask about — handmade, exclusive, fine stones.
Mapa del recorrido de usuario de Saint Cirq, con la persona Sofía Larraín y siete etapas desde el descubrimiento hasta la lealtad
El recorrido completo, etapa por etapa: qué hace, qué siente, dónde duele y qué oportunidad aparece. Los flujos de compra salieron de acá, no de una reunión.
The full journey, stage by stage: what she does, how she feels, where it hurts and what opportunity appears. The purchase flows came from here, not from a meeting.
MediciónMeasurement

Un MVP, y después meses de mirar y corregir

An MVP, then months of watching and correcting

Salimos con una primera versión y desde ahí fuimos probando con clientes reales. Usamos herramientas de comportamiento —Hotjar, hoy Contentsquare— para ver qué hacía la gente de verdad en el sitio, y montamos encuestas dentro del sitio y después de la compra. Cada cambio siguiente salió de eso.

We launched a first version and from there kept testing with real customers. We used behaviour tools — Hotjar, now Contentsquare — to see what people actually did on the site, and ran surveys inside the site and after purchase. Every change after that came from those.

El resultado

The outcome

Subieron las ventas y las visitas. Y acá viene la parte honesta: no me quedé con las cifras. Trabajé meses, funcionó, y no guardé el registro.

Sales and visits went up. And here's the honest part: I didn't keep the figures. I worked for months, it worked, and I didn't keep the record.

Lo cuento porque es exactamente lo que hoy hago distinto: dejar la medición instalada y el punto de partida anotado desde el primer día, antes de tocar nada. No por el portafolio — porque sin eso ni la clienta ni yo podemos saber qué fue lo que funcionó.

I mention it because it's exactly what I do differently now: leave measurement installed and the baseline written down from day one, before touching anything. Not for the portfolio — because without it neither the client nor I can know what actually worked.

Lo que aprendí

What I learned

01

Cuando una marca tiene un relato fuerte, el diseño no lo ilustra: lo ejecuta. El cuento decide la estructura.

When a brand has a strong story, design doesn't illustrate it: it executes it. The story decides the structure.

02

Una compra que necesita conversación igual puede partir de una ficha concreta. Nadie quiere empezar en una hoja en blanco.

A purchase that needs a conversation can still start from a concrete page. Nobody wants to start on a blank sheet.

03

Si no anotas el punto de partida, después no tienes cómo demostrar lo que lograste. Aprendido a la mala.

If you don't write down the baseline, you have no way of proving what you achieved. Learned the hard way.

Qué significa para tu tienda

What it means for your store

Si tienes productos que se compran distinto —uno directo, otro por encargo, otro conversando— no necesitas tres tiendas ni obligar a todos por el mismo camino. Y nada de lo que propongo sale de que me parezca más bonito: sale de un análisis del sitio que ya tienes, de un recorrido mapeado y de mirar qué hace la gente de verdad cuando entra.

If you have products that get bought differently — one direct, one to order, one through conversation — you don't need three stores or to force everyone down the same path. And nothing I propose comes from what looks nicer to me: it comes from an analysis of the site you already have, a mapped journey, and watching what people actually do when they arrive.

¿Tu tienda se parece a esta?

Does your store look like this one?

← Volver a casos← Back to work

Diseñar para que vuelvan

Designing so they come back

heykiddo.cl

El sistema de suscripción de HeyKiddo: mi propio negocio, usado como laboratorio de retención.

HeyKiddo's subscription system: my own business, used as a retention lab.

ProyectoProjectHeyKiddo
Qué esWhat it isPacks imprimibles sin pantallasPrintable screen-free packs
RolRoleFundadora · UX · producto · operaciónFounder · UX · product · ops
EstadoStatusEn cursoOngoing
La portada de heykiddo.cl en un celular, rodeada de niños usando el material impreso
La portada dice de qué se trata en una línea y ofrece la muestra gratis antes de pedir nada. Al fondo, el producto en uso.
The homepage says what it is in one line and offers the free sample before asking for anything. Behind it, the product in use.

El contexto

Context

HeyKiddo son packs mensuales de material imprimible para que los niños jueguen sin pantallas. Cada mes sale un tema nuevo, la familia lo descarga, lo imprime y lo usa en casa.

HeyKiddo is a monthly pack of printable material for kids to play without screens. A new theme comes out each month; the family downloads it, prints it and uses it at home.

Soy fundadora, y también quien hace la UX, el diseño, el producto y la operación. No hay nadie a quien pedirle aprobación ni a quien echarle la culpa — que es exactamente lo que hace que este caso sirva.

I'm the founder, and also the one doing the UX, the design, the product and the operations. There's no one to ask for approval and no one to blame — which is exactly what makes this case useful.

El desafío

The challenge

Una tienda vende una vez. Una suscripción tiene que ganarse al cliente todos los meses.

A store sells once. A subscription has to earn the customer every single month.

Toda la pregunta del negocio cabe en una línea: ¿qué hace que alguien vuelva? Y no es una pregunta de marketing — es de diseño. La respuesta tiene que estar construida dentro del producto, no colgada encima con descuentos.

The whole business question fits in one line: what makes someone come back? And it isn't a marketing question — it's a design one. The answer has to be built into the product, not bolted on with discounts.

El sistema

The system

Seis decisiones, cada una resolviendo una parte distinta del mismo problema.

Six decisions, each solving a different part of the same problem.

RitmoRhythm

El material sale el día 5, siempre

The material ships on the 5th, always

Una fecha fija convierte la suscripción en una costumbre. Ese mismo día sale un correo avisando: no hay que acordarse de entrar, el producto va a buscar al cliente.

A fixed date turns a subscription into a habit. An email goes out the same day: nobody has to remember to log in — the product comes to the customer.

ExpectativaExpectation

Un tema nuevo cada mes

A new theme every month

Que sea distinto es lo que crea la espera; que sea reconocible es lo que crea la confianza. El tema cambia, la forma no.

Being different is what creates anticipation; being recognisable is what creates trust. The theme changes, the format doesn't.

Mesa con láminas impresas de HeyKiddo, lápices, tijeras y un tablero de juego
El pack del mes sobre la mesa: cada lámina trae abajo su categoría y su rango de edad.
The month's pack on the table: each sheet carries its category and age range at the bottom.
Un puzzle imprimible de HeyKiddo recortado y a medio colorear
Un puzzle que hay que colorear, recortar y recién ahí armar: tres actividades en una hoja.
A puzzle you colour, cut out and only then assemble: three activities on one sheet.
El sitio de HeyKiddo en un celular mostrando la sección de ocasiones y estaciones, con una familia usando el material
El tema cambia cada mes; la forma no. Eso es lo que hace que la espera funcione en vez de confundir.
The theme changes every month; the format doesn't. That's what makes anticipation work instead of confusing people.
PlanesPlans

Una escalera, no una lista de precios

A ladder, not a price list

Individual y Familiar. Dos opciones, no cinco: elegir entre dos toma segundos, elegir entre cinco hace que la gente postergue la decisión — y postergar es no comprar.

Individual and Family. Two options, not five: choosing between two takes seconds; choosing between five makes people postpone — and postponing means not buying.

La comparación de los dos planes de suscripción de HeyKiddo en una tablet
Dos planes, uno al lado del otro. Elegir entre dos toma segundos; entre cinco, la gente posterga.
Two plans, side by side. Choosing between two takes seconds; between five, people postpone.
CriterioCriterion

La regla de 2 de 3

The 2-out-of-3 rule

El filtro con el que decido si una lámina entra al pack o se queda fuera. Tener un criterio escrito es lo que evita que el contenido dependa de cómo amaneciste.

The filter I use to decide whether a sheet makes it into the pack. Having a written criterion is what keeps the content from depending on the mood of the day.

Cuando fallaWhen it fails

El mes que salí tarde, compensé

The month I was late, I made up for it

El material salió dos días después de lo prometido. En vez de dejarlo pasar, avisé y agregué un bonus de regalo. Una suscripción se sostiene en la confianza, y la confianza se juega justo cuando algo sale mal — no cuando todo funciona.

The material came out two days late. Instead of letting it slide, I said so and added a bonus. A subscription runs on trust, and trust is decided exactly when something goes wrong — not when everything works.

ArchivoArchive

Los packs anteriores no se venden sueltos

Past packs aren't sold separately

Podría venderlos y ganar algo hoy. No lo hago: el acceso al archivo completo es una razón para seguir suscrito. Es la diferencia entre cobrar una vez y construir una relación.

I could sell them and make something today. I don't: access to the full archive is a reason to stay subscribed. That's the difference between charging once and building a relationship.

Lo que no resultó

What didn't work

Esta parte es la que menos aparece en los portafolios y la que más me enseñó.

This is the part that shows up least in portfolios and taught me the most.

Error 01Mistake 01

Construí la infraestructura antes de validar cómo llegaba la gente

I built the infrastructure before validating how people arrived

Tenía el producto, la tienda y el sistema de suscripción funcionando — y todavía no sabía por qué camino llegaba alguien a comprar. Es el orden equivocado, y es exactamente el error que hoy le advierto a mis clientes.

I had the product, the store and the subscription system running — and still didn't know how anyone actually arrived to buy. That's the wrong order, and it's exactly the mistake I now warn my clients about.

Error 02Mistake 02

Mandé el tráfico frío a la portada

I sent cold traffic to the homepage

Alguien que nunca escuchó de la marca llegaba a la home y tenía que decidir suscribirse ahí mismo. Debía llegar a la muestra gratis: probar el material primero, y recién después decidir. Pedir el compromiso antes de dar la prueba es pedir demasiado.

Someone who'd never heard of the brand landed on the homepage and had to decide to subscribe right there. They should have landed on the free sample: try the material first, decide after. Asking for the commitment before giving the proof is asking too much.

La página de muestra gratis de HeyKiddo en una tablet, con el formulario de correo
La muestra gratis: cinco actividades reales antes de decidir. El error fue mandar el tráfico frío a la portada en vez de aquí.
The free sample: five real activities before deciding. The mistake was sending cold traffic to the homepage instead of here.

Lo que aprendí

What I learned

01

Primero se valida cómo llega la gente, después se construye.

First validate how people arrive, then build.

02

La retención se diseña. No pasa sola.

Retention is designed. It doesn't just happen.

03

Lo simple le gana a lo ingenioso.

Simple beats clever.

Qué significa para tu tienda

What this means for your store

Lo que probé en mi propio negocio lo aplico con mis clientes: ritmo, razones para volver, y un camino de compra que parte por conocerte.

What I tested in my own business is what I apply with my clients: rhythm, reasons to come back, and a purchase journey that starts by getting to know you.

¿Tu tienda vende una vez o construye una relación?

Does your store sell once, or build a relationship?

← Volver al inicio← Back to home

Tres formas de trabajar juntos

Three ways of working together

Todas empiezan igual: una llamada de 30 minutos, sin costo, para entender qué está pasando en tu negocio. De ahí sale la propuesta — o la recomendación de que no me necesitas todavía.

All of them start the same way: a free 30-minute call to understand what's happening in your business. The proposal comes out of that — or my honest advice that you don't need me yet.

Servicio 01Service 01

Auditoría UX de conversión

UX conversion audit

Para tiendas que ya tienen tráfico y ventas, pero saben que deberían vender más — y no tienen claro dónde se está perdiendo la gente.

For stores that already have traffic and sales but know they should be selling more — and aren't sure where people are dropping off.

La forma más común de empezar The most common way to start
Qué hagoWhat I do
  • Reviso el recorrido completo de compra: desde que llegan hasta que pagan.
  • Cruzo tu analítica con mapas de calor y grabaciones de sesión reales.
  • Testeo tu sitio con usuarios de verdad, no con opiniones internas.
  • Comparo con cómo lo resuelven las tiendas que te compiten.
Qué recibesWhat you get
  • Un informe con los problemas priorizados por impacto en venta, no por gusto.
  • Recomendaciones concretas y accionables — con cuáles partir primero.
Servicio 02Service 02

Proyecto UX completo

Full UX project

Para tiendas que van a rediseñar en serio, y para startups que necesitan diseñar un producto sin armar un equipo interno.

For stores about to seriously redesign, and for startups that need to design a product without building an internal team.

Qué hagoWhat I do
  • Investigo: entrevistas, análisis de datos y arquetipos de tus usuarios reales.
  • Ordeno la arquitectura: qué va dónde y por qué.
  • Diseño y prototipo los flujos, y los testeo antes de que se programen.
Qué recibesWhat you get
  • Diseño terminado y documentado, en el formato que tu equipo necesite.
  • Un design system base para que lo que venga después sea consistente.
Servicio 03Service 03

UX senior para agencias

Senior UX for agencies

Para agencias y consultoras que necesitan seniority UX en un proyecto puntual, sin sumar a alguien fijo al equipo.

For agencies and consultancies that need senior UX on a specific project, without adding permanent headcount.

Cómo funcionaHow it works
  • Me integro a tu equipo: puedo tomar el rol UX completo o reforzar el que ya tienes.
  • Por proyecto cerrado o por horas mensuales — como te acomode.
  • Trabajo con tus procesos y tus herramientas, no impongo los míos.
  • I join your team: I can own the UX role or reinforce the one you have.
  • Fixed project or monthly hours — whichever suits you.
  • I work with your processes and tools, I don't impose mine.
Por qué conmigoWhy me

Vengo de liderar equipos UX dentro de empresas, así que conozco el proceso desde ambos lados: fui quien contrataba y también la contratada. Y hablo el idioma de desarrollo — cuando hace falta, entrego los mockups en HTML, CSS y JS.

I've led in-house UX teams, so I know the process from both sides: I've been the one hiring and the one hired. And I speak developer — when needed, I hand over the mockups in HTML, CSS and JS.

Lo que siempre preguntan

What people always ask

¿Cuánto cuesta?

What does it cost?

Cada proyecto se cotiza según su alcance real. En la primera llamada entiendo tu caso y te mando una propuesta con precio cerrado.

Every project is quoted on its actual scope. After the first call I send a proposal with a closed price.

¿Qué necesitas de mí?

What do you need from me?

Acceso a tu analítica, un rato de tu tiempo al principio para entender el negocio, y alguien de tu equipo disponible para resolver dudas.

Access to your analytics, some of your time up front to understand the business, and someone on your team available for questions.

¿Y si además necesito tráfico?

What if I also need traffic?

Ahí entra NAVA Estudio, donde soy cofundadora: cubrimos el recorrido completo — atraer, convertir y fidelizar.

That's where NAVA Estudio comes in, where I'm co-founder: we cover the full journey.

Cuéntame qué está pasando en tu tienda.

Tell me what's happening in your store.