Propuesta de rediseño EcommerceModa y accesorios Manila
Propuesta de rediseño para Not So Mundane Studios, una marca de totes y gorras de Manila. El caso enseña el proceso completo: siete etapas, qué se descartó en cada una y por qué la versión final se parece a la marca y no a una plantilla.
El objetivo
Not So Mundane Studios vende totes y gorras desde Manila con una idea muy clara: highlighting the ordinary things in life. Esa idea vive en su Instagram, en sus fotos de clientes y en los nombres de sus colecciones, pero su tienda la resuelve con una plantilla estándar. El objetivo era una tienda que su dueña prefiriera a la suya: reconocible como su marca a primera vista y preparada para elegir una pieza y pedirla.
Dirección visual
La dirección sale de la propia marca: recados, cafés y tardes lentas. Courier Prime remite a los tiques y a las listas de la compra; VT323, a las pantallas de los 90 de su colección más conocida. Las fotos son las suyas, con un mismo tratamiento de color. Los textos van sobre las imágenes y nunca quedan cortados por ellas, y se eliminaron las etiquetas que no aportaban nada.
Cómo evolucionó
Cada etapa se descartó por un motivo concreto. Estas son las capturas reales de cada una.
01 Primera portada
Un aro 3D de fotos bajo una cursiva gruesa. Seguía tendencias, no a la marca. La descartamos con una pregunta: ¿la dueña la preferiría a su web actual? La respuesta era no.
02 Conceptos de marca
Extrajimos seis principios de su Instagram y probamos conceptos de estado de ánimo, como «what's your status today?» o «sunset at six». Tenían intención, pero no eran una tienda: botones sin destino y frases que había que descifrar.
03 Tienda completa
Portada, tienda con filtros, ficha, bolsa y pago con sus condiciones reales: GCash, Maya, transferencia y J&T. Una revisión independiente le dio un 7 sobre 10 frente a las referencias: correcta y genérica.
04 Bocetos generados
Tres portadas generadas con IA sobre sus productos reales demostraron la composición que faltaba. Pero una marca que se llama estudio y defiende lo auténtico no puede vender con escenas fabricadas. Nos quedamos con la composición y descartamos las imágenes.
05 Solo fotos reales
Rehicimos la portada solo con sus fotos y un tratamiento de color común. La frase con fotos dentro del texto funcionaba una vez; repetida por toda la página, dejaba de decir nada.
06 El tablero
Un tablero con 35 secciones de siete plantillas editoriales y cinco tipografías, cada una con su razón de marca. La elección fue concreta: Courier Prime, VT323 y ocho secciones.
07 Versión final
La Courier ordena toda la web como un tique y la VT323 marca los números. La tienda es una guía de colecciones, la ficha se presenta como una tira de fotos y la bolsa se rellena como un recibo.
Decisiones de diseño
La portada empieza con una foto pequeña bajo el nombre de la marca y la amplía hasta ocupar la pantalla al hacer scroll: lo ordinario, visto de cerca.
Las colecciones llevan una sola palabra sobre cada foto. El texto ordena y la imagen acompaña.
La tienda es una guía de colecciones en papel cuadriculado; cuando una fila tiene un número impar de piezas, queda centrada.
La bolsa funciona como un recibo: cantidades, pago y envío escritos a máquina y un único botón negro para cerrar el pedido. Todos los botones de acción pertenecen a esa misma familia.
Comportamiento móvil
En el móvil, la cinta de ciudades (from manila to tokyo, taipei and denmark) se recompone con otros tamaños y alturas para que las fotos se vean bien y no queden como miniaturas. La navegación ocupa una sola línea centrada y la cabecera cambia de color según el fondo que tiene debajo.
Interacción al servicio del objetivo
Las fotos de la frase de portada se amplían al tocarlas y se cierran con la X, con la tecla Escape o tocando fuera. Los pasos para pedir se escriben como un tique al entrar en pantalla. En la bolsa, sumar o quitar piezas actualiza el total del botón de pedido. Al confirmar, la web lo dice con claridad: es un concepto, y el pedido real se hace por mensaje a @notsomundanestudios.
Comprobable