App
¿Cuánto tiempo tarda una persona de media en hacer la compra? ¿Llegan sabiendo qué comprar y dónde están los productos?
La aplicación móvil de Lar nace para facilitar el proceso de compra presencial en la tienda, ayudando a las personas a encontrar productos de forma rápida y accesible, minimizando problemas de idioma, comprensión y orientación.
En este proyecto me he encargado del diseño completo del producto, siguiendo la metodología de design thinking: empatizar, definir, idear, prototipar, test. Este proceso incluye la investigación de usuarios, definición del problema, análisis de accesibilidad, arquitectura de la información, diseño de wireframes, prototipado y test, entre otros.
Comprar en tienda física es lento y confuso cuando no conoces bien el espacio: cuesta encontrar productos y orientarse, sobre todo si hay barreras de idioma o de comprensión.
Una app que localiza cada producto y traza la ruta más corta por pasillos. Validada en dos rondas de test con las mismas 4 personas: la base funciona bien, con margen de mejora en cómo se comunican ciertas acciones clave.
Empatizar
La primera etapa consistió en entender al usuario: ¿a quién va dirigida esta aplicación?
La investigación de usuarios se realizó a partir de perfiles ficticios proporcionados por el curso de Google UX Design. De las biografías pude extraer una serie de necesidades que me permitieron reconocer cuatro puntos de dolor claves:
Puntos de dolor detectadosLucha por equilibrar trabajo y vida personal. El diseño debe priorizar rapidez y eficiencia.
Con toda esta información, pude elaborar personas para comprender diferentes puntos de vista, personalizar el problema y diseñar desde la empatía.
Personas
“Quiero tener todo bajo control.”
- Mantener un buen balance entre su carrera legal y su vida personal.
- Dedicar más tiempo de calidad a su hijo y a su pareja.
- Cuidar su salud física y mental pese al estrés laboral.
- Jornadas de trabajo largas e imprevisibles.
- Poco tiempo para actividades personales y familiares.
- Estrés y cansancio acumulado que afectan su bienestar.
- Dificultad adicional con la lectura y la gestión de información escrita por su dislexia.
Noa es abogada en un bufete exigente. Sus días están llenos de reuniones, plazos ajustados y casos complejos. Cuando no está en la oficina, intenta pasar tiempo con su familia y desconectar practicando yoga. Sin embargo, a menudo se siente frustrada por no poder equilibrar su carrera con su vida familiar. Además, tiene dislexia, lo que le dificulta leer textos y procesar información en entornos de ritmo acelerado.
Comoabogada con un horario laboral muy exigente
Quieroencontrar rápidamente los productos que necesito en la tienda
Parano perder tiempo y poder llegar a tiempo a mis compromisos familiares
Comomadre de un niño pequeño
Quieroque la aplicación me muestre alternativas claras cuando un producto no está disponible
Paraevitar dar vueltas innecesarias por la tienda y reducir mi nivel de estrés
Comopersona con dislexia
Quieroque la aplicación tenga un diseño visual claro y fácil de leer
Paraevitar confusiones con los nombres de los productos y hacer mis compras con confianza
Preparar la compra
- Revisar qué falta en casa
- Anotar en la app los productos que necesita por categorías
- Lista inteligente con sugerencias de productos recurrentes
- Posibilidad de compartir lista con su pareja
- Accesibilidad: texto claro y tipografía sans serif para apoyar su dislexia
Preparar la compra antes de salir de casa
- Revisar con su familia qué productos necesitan.
- Crear una lista en la app (muchas veces repite lo mismo: leche, pan, arroz, fruta).
- Consultar precios y ofertas para ajustarse al presupuesto.
- Función de lista rápida con productos favoritos.
- Vista de precios estimados antes de ir.
- Accesibilidad: posibilidad de ver el texto de productos traducido o con explicaciones simples para evitar confusión con el idioma.
Definir
Para sintetizar el planteamiento del problema de cada persona me apoyé en sus historias de usuario y en los mapas de recorrido de la fase anterior. A partir de ahí, formulé una hipótesis de diseño para resolver el problema de cada una:
Noa López SánchezNoa es una abogada muy ocupada y con dislexia que necesita encontrar rápidamente los productos que hay en la tienda y conocer alternativas de forma clara y fácil, para tardar lo menos posible y evitar dificultades en la compra.
Si Noa usa la app para localizar los productos de forma clara, podrá ganar tiempo en la compra para sus compromisos familiares.
Joe ScottJoe es un estudiante extranjero que necesita hacer la compra de la forma más económica y rápida posible, para ahorrar dinero y tiempo.
Si Joe usa la app para encontrar los productos más económicos y organizar su compra por pasillos, ahorrará tiempo y dinero para sus clases y su familia.
Lista de propuestas candidatas
Partiendo de las características y beneficios de la app, hice una lista de posibles propuestas de valor:
Conexión con necesidades de usuario
Crucé esa lista con las necesidades reales de Noa y Joe, sus historias y sus recorridos, para quedarme con la propuesta que de verdad resolvía su problema.
"Lar convierte la compra presencial en algo tan rápido y claro que no importa tu idioma, cuánto conozcas la tienda o cuánto tiempo tengas: localizas el producto, sigues la ruta más corta organizada por pasillos, y sales antes."
Idear
En este momento, ¡entramos en la fase de ideación! A lo largo de esta etapa busqué generar ideas apoyándome en toda la investigación previa y en la competencia, además de en la marca y el tono, que inventé yo misma al ser Lar una tienda ficticia creada para este proyecto del curso.
El primer paso fue responder a los planteamientos del problema con una declaración de metas. Para escribirla, pensé en qué hace Lar, a quién afecta, por qué afecta positivamente y cómo se mide su éxito.
Alcance de la competenciaLo siguiente fue un estudio sobre el alcance de la competencia, comparando dos supermercados de referencia en España (Mercadona y Alcampo, competidores directos) y un competidor indirecto centrado en el diseño del hogar (IKEA), para identificar problemas de usabilidad ya resueltos o pendientes y detectar huecos reales en el mercado.
Para cada uno analicé su posicionamiento, cómo se describen a sí mismos, y evalué en detalle su experiencia digital: primeras impresiones en escritorio y móvil, accesibilidad, flujo de usuario, navegación e identidad de marca.
Supermercado líder en España, especializado en alimentación y hogar, dirigido a familias y consumidores de clase media que priorizan el ahorro, la cercanía y la confianza en la marca.
confianza y calidad a precios bajos
Supermercado líder en España, especializado en alimentación y hogar, dirigido a familias y consumidores de clase media que priorizan el ahorro, la cercanía y la confianza en la marca.
confianza y calidad a precios bajos
El estudio reveló una laguna compartida por los tres: ninguno combina precio competitivo, diseño moderno y una experiencia realmente personalizada y cercana. Mercadona gana en precio pero se queda corto en diseño digital, IKEA inspira pero es más caro, y Alcampo se queda a medio camino en ambos. Ese hueco confirma la propuesta de valor que planteé en la fase anterior: Lar no compite por precio ni por catálogo, sino por resolver, de forma visual y accesible, algo que ninguno de los tres aborda: ayudar a encontrar y organizar la compra dentro de la propia tienda.
Conclusiones de ideasA partir del enunciado del ejercicio, que ya delimitaba el concepto de la aplicación, las ideas fueron surgiendo en base a las necesidades de los arquetipos y a lo aprendido en el estudio de la competencia. De ahí nacen las ideas con las que paso a prototipar:
Localización de producto por pasillos, con la ruta más corta posible, inspirándome en la claridad de IKEA pero con la rapidez que se espera de un supermercado.
Iconos e imágenes de producto en vez de depender solo de texto, para superar barreras de idioma y facilitar la lectura a personas con dislexia.
Ofertas visibles y filtros de ordenación por precio, para encontrar fácilmente las opciones más económicas.
Lista de la compra organizada por pasillos y no por el orden en que se añaden los productos, para que el recorrido sea siempre el más corto.
Diseño visual simple y cercano, sin la sobrecarga de promociones de Alcampo ni la frialdad funcional de Mercadona.
Prototipar y testear
El prototipo no termina al construirlo: cada versión pasa por un estudio de usabilidad con usuarios y usuarias reales antes de darla por buena. Hice dos rondas de testeo con las mismas 4 personas (una sobre el prototipo de baja fidelidad y otra sobre el de alta fidelidad) y aquí las vas a encontrar intercaladas, justo en el punto en que ocurrieron entre una versión del prototipo y la siguiente.
Flujos de usuario
Antes de diseñar pantallas concretas, definí los flujos de usuario principales: la ruta completa que sigue una persona para completar una tarea de principio a fin. En Lar identifiqué dos: localizar un producto y añadirlo a la lista de la compra. Ambos comparten el mismo punto de partida, así que aquí puedes compararlos lado a lado para ver dónde se separan:
Storyboards
Una vez representados los flujos de usuario claves para la aplicación de Lar, pasé a diseñar storyboards con los que imaginarme interacciones reales para los arquetipos construidos. Aquí tenemos un storyboard de plano general pensando desde el punto de vista de Noa, y uno de primer plano, sobre cómo lograría realizar una acción dentro de la app.
Arquitectura de la información
Para estructurar el contenido de Lar apliqué los 8 principios de Arquitectura de la Información de Dan Brown: de objeto, de elección, de divulgación, de ejemplaridad, de la puerta principal, de clasificación múltiple, de navegación centrada y de crecimiento.
Al diseñar una app móvil, me enfrenté a 3 retos principales: centrarse en el contenido principal y desplazar el menos importante, tener en cuenta el tamaño y espaciado de cualquier objeto de pantalla táctil y considerar formas de texto para el móvil suficientemente grandes.
Wireframes en papel
Antes de pasar a digital, exploré varias ideas en papel. Para cada pantalla generé 5 diseños diferentes, elegí los elementos que más me gustaban de cada uno y los fusioné en un diseño final, resaltado en naranja.
Wireframes digitales y prototipo lo-fi
A partir de los wireframes en papel, pasé a wireframes digitales para definir con precisión cada elemento de la interfaz. Esto es lo que resalto de la pantalla de inicio:
- Saludo inicial. La persona se siente bienvenida a la aplicación, buscando una experiencia más personal.
- Buscador. Permite encontrar el producto deseado dentro del catálogo de la tienda, e incluye un filtro para ordenar los resultados.
- Componentes para cada producto. Cada producto tiene una imagen, nombre y precio asociados; además, se puede añadir un número concreto de productos a la lista de la compra, y guardar los favoritos mediante el icono del corazón.
Con esta disposición de elementos se busca claridad, para que los usuarios y usuarias terminen su tarea de forma rápida y sencilla. Se trata de no recargar de elementos innecesarios la pantalla, dando protagonismo a los productos de la tienda y a su información asociada. El filtro de ordenación permitirá mostrar los resultados de la búsqueda en orden ascendente o descendente, según los precios, para ayudar a localizar las opciones más económicas en menos tiempo. En el menú de navegación se sombrea el icono correspondiente a la pantalla actual, para ayudar a los usuarios y usuarias a ubicarse en la aplicación.
Con los wireframes digitales ya definidos, construí un prototipo de baja fidelidad. El prototipo incluye las diversas acciones que se pueden realizar con Lar, entre ellas:
Se construyó con la accesibilidad como base, en respuesta directa al punto de dolor "Accesibilidad y claridad" detectado en la fase de empatizar. Desde el principio, la pantalla de ajustes permite activar lector de pantalla, reducir movimiento y aumentar el tamaño de texto para toda la aplicación.
Hallazgos y cambios
Con el prototipo de baja fidelidad ya construido, hice un estudio de usabilidad remoto y no moderado con 4 personas: compradoras habituales en tiendas de barrio (más de una vez por semana), 2 hombres y 2 mujeres de entre 24 y 59 años, con distintos niveles de familiaridad con la tecnología. A partir de sus conclusiones más urgentes (P0), revisé los wireframes.
Una forma clara de encontrar el botón de favoritos
Incorporé un acceso más visible a los favoritos desde el menú de navegación.
Indicaciones sobre la utilidad del mapa
Integré el mapa como una pestaña propia dentro de mi lista, con el precio total, el tiempo estimado y el botón de finalizar compra justo ahí.
Indicaciones sobre los pasos óptimos para realizar la compra usando la aplicación
Añadí pantallas de ayuda para toda la aplicación, con instrucciones sobre cómo usarla paso a paso.
El resto de la aplicación también se actualizó con estos cambios:
El resto de conclusiones del estudio quedaron priorizadas para más adelante, en vez de abordarse en esta misma revisión:
- Forma de saber que han añadido un producto a la lista de la compra
- Forma clara de marcar los productos cogidos durante la compra
- Productos categorizados
- Compartir la lista de la compra con otras personas
Lo-fi
Con los tres cambios P0 ya aplicados, así se ven reflejados en el prototipo de baja fidelidad:
Mockups
Con los wireframes ya revisados, di el salto a alta fidelidad: apliqué la identidad visual de Lar sobre la misma estructura, y de paso afiné algunos detalles: trasladé el catálogo de productos a su propia sección, mantuve las ofertas y novedades en el inicio, añadí un botón de ayuda en la esquina superior derecha, y etiqueté los iconos del menú de navegación para aclarar su significado. En estos mockups terminé de definir el resto de la aplicación: la ficha de cada producto, la gestión de listas de la compra (creación, productos, mapa y participantes, finalizar compra), los favoritos y el perfil. Aquí puedes ver las pantallas que diseñé:
También integré la accesibilidad en el propio diseño: contraste AAA según las pautas WCAG 2.2 en toda la aplicación, las tipografías Plus Jakarta Sans y Manrope por su legibilidad en pantallas móviles, una jerarquía visual clara y lenguaje sencillo, sin tecnicismos. Además, cada persona puede activar sus propios ajustes desde el perfil: espaciado de texto, texto grande y lectura por voz.
Prototipo de alta fidelidad
Con los mockups terminados, construí el prototipo de alta fidelidad. Incluye las acciones principales que se llevarían a cabo para realizar una compra con Lar:
Hi-fi
Hallazgos y aprendizajes
Repetí el estudio con las mismas 4 personas, esta vez sobre el prototipo de alta fidelidad, ya con los cambios de la primera ronda aplicados. La experiencia general fue positiva (la mayoría completó las tareas sin dificultad), pero surgieron nuevos matices:
Añadir un producto a favoritos es fácil, pero encontrar después la lista de favoritos no siempre lo es
El mapa dentro de mi lista genera dudas: su icono cuesta de localizar y no queda claro por qué vive ahí
El paso de finalizar compra pasa desapercibido: varias personas no llegaron a pulsarlo
«Regular», como opción de tamaño de texto, no se entiende de forma intuitiva
- Organizar los productos por categorías también desde el inicio
- Mantener fijos el precio y el tiempo estimado al hacer scroll en la lista
- Un icono de carrito, y poder marcar los productos según se van cogiendo durante la compra real
El estudio confirma que la base de Lar funciona: encontrar productos, gestionar listas y consultar el mapa se sienten naturales. Lo que queda por afinar es la comunicación de ciertas acciones clave: un botón de finalizar compra más visible, aclarar por qué cada elemento está donde está, y simplificar el lenguaje de accesibilidad. Son los siguientes pasos naturales si continuara iterando sobre Lar. Algunos de ellos ya están en marcha en Lar Web.