Artesanía & Diseño: UX UI Case Study
Brodie, un e-commerce alternativo
--
¿Qué es Brodie?
Brodie nace como plataforma donde artistas y creadores de productos artesanales y de diseño, pueden exponer y vender sus obras de una manera fácil y cómoda. Hay cabida para gran variedad de productos, siempre poniendo el foco en el detalle. Se trata de un e-commerce diferente, ya no sólo por el tipo de producto que se puede encontrar en él, sino por la forma en la que se quiere estructurar.
Un buscador será la espina dorsal de la página. Mediante él, los usuarios podrán encontrar cualquier producto que deseen y además podrán recomendarlos, guardarlos, o crear su propias colecciones. Se trata además de una plataforma colaborativa que sirve como trampolín tanto a artistas como a negocios desconocidos por el público en general.
El tipo de producto se enmarcará en un e-commerce dedicado a la venta de productos para regalar. Encontramos un vacío en el mercado hacia este tipo de negocio, los que hay no son muy atractivos y normalmente los productos son inservibles, feos o ridículos.
RETO
Crear un marketplace alternativo donde el usuario pueda encontrar productos originales a un precio económico y resuelva su frustración a la hora de buscar un objeto para regalar.
Timing
El tiempo estimado para la creación total del proyecto es de 2 semanas, dedicando la primera de ellas a research y la segunda a diseño. A continuación se muestra todo el proceso con detalle.
INVESTIGACIÓN
Benchmarking
Empiezo mi investigación buscando y recopilando información sobre e-commerces y sitios webs como galerías de arte, tiendas de ropa vintage, venta de productos de diseño, artistas…etc., y así poder tener una visión más clara de lo que se está haciendo a nivel global alrededor de este mundillo. Esto hará que sepa con exactitud a qué nos enfrentamos:
I Artsy
Artsy es una galería de arte ubicada en Berlín y trabaja a nivel nacional en Alemania. “Somos una plataforma para coleccionar y descubrir arte”. Funciona a modo de escaparate, y además el usuario puede comprar obras directamente desde la web.
Puntos clave:
Hay dos tipos de usuarios, el artista que quiere promocionar su trabajo y el amante del arte que busca coleccionar obras.
Permite el registro a ambas partes y el usuario puede encontrar funcionalidades como: crear su propia colección de arte de forma virtual, consultar perfiles y obras de los socios registrados, ponerse en contacto directo con la galería, información de actualidad en Alemania y posibilidad de compra.
Debilidades:
El precio de la mayoría de las obras gira en torno a los 200.000€ y 500.000€, llegando a alcanzar el millón de euros. La venta sólo es posible con las obras más económicas, estas están en torno a los 1500€. Por otro lado, sólo trabajan a nivel nacional.
II Society6
Society6 es una plataforma digital donde artistas de todo el mundo pueden implementar sus obras sobre 30 productos diferentes ya definidos por la plataforma y venderlos bajo comisión.
Puntos clave:
Society pone a disposición de los artistas 30 productos diferentes sobre los que imprimir sus diseños (tazas, mochilas, relojes de pared, cojines,…).
Son productos en blanco esperando a ser customizados. Cada diseño que el artista decida subir a la plataforma, debe tener unas características predeterminadas para poder adaptarse de manera automática al producto.
Debilidades:
Society6 vende creatividad, pero sin embargo estandariza los diseños. Los modelos están sujetos a unas dimensiones, cantidades de tinta, colores,… por lo que el artista tiene poco margen para desarrollar su imaginación. En cuanto a la visualización en la web, se repiten constantemente los mismos objetos, la navegación puede llegar a ser monótona y no aportar nada al usuario.
III Tictail
Tictail es un marketplace enfocado a pequeños negocios situados principalmente en Europa y EEUU. Se les ofrece la posibilidad de aumentar las ventas, ganar visibilidad y mostrar sus productos a una audiencia global muy amplia. El usuario puede encontrar productos relacionados con la moda, el arte y la decoración a un precio bastante asequible.
Puntos clave:
Basa su modelo de negocio en la ayuda a pequeños empresarios que quizá no tengan la posibilidad de desarrollar su propio e-commerce. Funciona como un “centro comercial digital”. El empresario abre su tienda online, vende sus productos y paga un tanto por ciento a Tictail por estar ahí. Permite interactuar a los shoppers, creando sus propios perfiles y valorando los productos que encuentran. Además de la web, puedes descargar su app para Iphone y Android.
Debilidades:
Arquitectura de la información deficiente. Abusan de los mega-menús y se hace bastante complicado encontrar un producto concreto. La home tiene un scroll infinito a modo de “mercadillo” donde puedes encontrar de todo pero sin ninguna categorización. Ocurre lo mismo al buscar algún producto en especial. Información mal facetada.
¿Qué sacamos en claro de nuestro Benchmark?
Existen multitud de plataformas dedicadas a la visualización y venta de productos hechos por artistas y diseñadores independientes tanto a nivel nacional como internacional. Vemos como Artsy está enfocado hacia un público con un nivel adquisitivo alto y muestra obras de arte contemporáneas, el e-commerce en su web pasa a un segundo plano. No ocurre lo mismo con Society6 que trabaja a modo de imprenta sobre 30 productos predefinidos por la propia plataforma. Y finalmente Tictail es la que más se acerca a lo que quiero desarrollar, con dos tipos de usuarios, los seller y los shoppers, la interacción de ambos sobre la web es continua. El problema viene a la hora de categorizar la información, los scroll infinitos no son una buena práctica y dejan al usuario confundido. Las facetación tampoco es óptima y en definitiva, tiene bastantes puntos a mejorar.
Encuestas
Nuestro proyecto ya va tomando forma, pero no podemos continuar sin saber qué opinan de verdad nuestros usuarios. Para asentar mejor toda la información recabada en el Benchmark, decido lanzar una serie de preguntas mediante una encuesta en Google Forms que voy promocionando a través de RRSS. Obtengo una participación media de 62 personas y los resultados son los siguientes:
- La mayor participación ha sido entre personas con edades de 40–60 años (32,3%) y 18–25 años (29%).
- El 45,2% suele hacer algún tipo de regalo más de 5 veces al año.
- Los productos que más se suelen regalar son ropa, zapatos y accesorios de belleza.
- Un 62,8% intenta ser original a la hora de buscar qué regalar pero no encuentran inspiración fácilmente, por lo que siempre acaban recurriendo a los mismos productos.
- Al 78% le parece buena idea regalar productos handmade y de diseño y a más del 85% le gustaría recibir como regalo algún producto de este tipo.
- La mayoría realiza sus compras a través de desktop y suelen gastar en torno a los 20–40€.
Entrevistas personales
¿Qué quiero saber?
- Descripción del proceso de compra de un regalo, desde la ideación hasta la entrega final a terceros.
- Lugares donde compran esos productos.
- Inconvenientes que encuentran y cómo los resuelven.
- Tipo de productos que compran vs productos que quisieran comprar.
- Opiniones, sugerencias y experiencias personales en celebraciones personales.
Personas entrevistadas
Samuel Álvarez, 27 años, arquitecto / Sergio Pérez, 36 años, arqueólogo
Datos obtenidos
Ambas personas coinciden con que el proceso de compra es bastante tedioso, principalmente por la falta de originalidad en los productos, falta de tiempo y falta de ganas. Ambos suelen comprar acompañados cuando se trata de un regalo a una persona cercana, sin embargo si hablamos de pareja, padre o madre, prefieren hacerlo solos, siendo el producto en sí mucho más especial y por tanto, el sentimiento mucho más frustrante por no poder cumplir las expectativas.
Los dos compran en grandes superficies como galerías o centros comerciales ya que la inversión en tiempo es mucho menor. Suelen regalar casi siempre lo mismo, ropa y accesorios. Gastan una media de 20–40€ y lo suelen hacer entre 5 y 6 veces al año, casi siempre cumpleaños y Navidad. Cuando compran por internet, prefieren mirar el producto a través del teléfono móvil y comprar después en desktop.
Tanto Pedro como Samuel conocen los productos handmade y de diseño pero no están familiarizados con plataformas al uso. Les parece interesante el poder decantarse por ese tipo de regalo y además les gustaría recibir alguno con esta temática.
¿Cómo podemos resumir todos estos datos?
Obtengo muchísimos datos durante el proceso de investigación y necesito resumirlos. Para ello, realizo un mapa de afinidad en el que expongo todos los insights y así me ayudo a tener presente toda esta información en las siguientes fases del proyecto.
Una vez que tengo claros los datos obtenidos, las necesidades de nuestros usuarios y los pain points, paso a definir cuales serán mis objetivos:
- Consolidar nuestra plataforma como el nuevo e-commerce de referencia para el mundo de los regalos.
- Crear audiencias a nivel nacional y en las principales zonas de europa. En un futuro ampliaríamos el alcance.
- Innovar, iterar y seguir innovando. Crear un equipo consistente que mantenga la plataforma activa y añadiendo las últimas novedades del sector.
- Interacción entre los usuarios, generar perfiles, grupos y avanzar en las formas de pago.
- Dar presencia global a aquellas personas que no tienen los medios necesarios para hacerlo, apostando por la creatividad y el desarrollo.
Realizo además un Model Business Canvas en el que analizo cómo será nuestro modelo de negocio y la viabilidad del mismo. Contaremos con la colaboración de artistas, diseñadores, pequeñas y grandes tiendas tanto a nivel nacional como internacional y no sólo a nivel freelance, sino que podremos llegar a acuerdos con agencias y estudios en los que trabajen más de una persona.
Nuestra plataforma irá orientada a la venta de productos handmade destinados a regalos. Como hemos visto en la investigación previa, la mayoría de la sociedad no compra estos productos de una manera asidua, y por el contrario cuando están obligados a comprar un producto para regalar, ya sea porque el usuario de verdad quiere hacer ese regalo o simplemente por compromiso, la mayoría intenta ser original pero acaba recurriendo a lo mismo de siempre. Queremos solucionar ese problema. El fin de nuestros productos irá destinado al regalo. Añadimos valor y creamos una plataforma colaborativa.
Propuesta de valor
Tenemos que ser diferentes, cada problema es una oportunidad. Crearemos un buscador. En él el shopper podrá encontrar el producto idóneo para regalar, y este se le mostrará mediante una arquitectura muy bien definida, un flujo muy bien pensado y mediante un método de búsqueda fácil, ágil, rápido y sencillo.
Users personas
Una vez recabada la información y con el modelo de negocio en mente, paso a poner cara a mis usuarios.
Anto, publicista residente en Madrid centro. Tiene 32 años y nació y estudió en Sevilla. Después de un período de prácticas encontró por fin su trabajo ideal en la capital española. Está rodeado de creatividad tanto en su trabajo como en su grupo de amigos, estos son como su familia. El pisito que Anto tiene en el corazón de Malasaña nada tiene que envidiar a las grandes casas que salen en prensa y televisión y es que en cada rincón podemos encontrar algún detalle. En dos semanas es el cumpleaños de Alfred, su mejor amigo y está a la búsqueda de un regalo muy especial, un detalle que le haga brillar.
Lorena, 26 años, ilustradora made in Barcelona. Desde pequeña le ha encantado pasar horas y horas delante del papel dando rienda suelta a su imaginación. Actualmente es la directora de su propio estudio de ilustración, le encantan las cosas bonitas y cuando tiene un evento por delante siempre intenta sorprender en todos los aspectos. Al ser una persona creativa siempre busca regalar productos originales y novedosos ¡Qué necesaria es la creatividad!
Proto Journey
Anto Pulido
¿Cómo ayudaría Brodie en la búsqueda de un regalo para Alfred? Para Anto y sus amigos la frustración viene cuando tienen que pensar lo que van a regalar. Quieren sorprender, ser originales, pero ya lo han visto todo. Gracias a la cartera de productos que se muestra en nuestra plataforma, el éxito está asegurado. Vemos cómo al final del proceso, la satisfacción es máxima.
DEFINIR
Empieza la fase en la que decido qué contenido quiero que forme parte de mi diseño y cómo organizarlo. Brodie es un proyecto que abarca muchísimas opciones, por lo que he priorizado las funciones más importantes. En un futuro, tal y cómo se especifica al final de este artículo se podrá desarrollar con total integridad. Para ello creo el siguiente MoSCow:
Finalmente decido centrarme en las opciones de búsqueda y categorización de contenido. Crearé una plataforma e-commerce que cumpla los objetivos planteados en la fase de research. Un marketplace colaborativo entre sellers y shoppers que permita la interacción y comunicación entre ambos usuarios, que sea viable a nivel de negocio y que ofrezca las mayores facilidades posibles. La accesibilidad será clave y quedará vigente la propuesta de valor.
Para poner en orden todos los elementos realizo un Card Sorting con varias personas. Dentro de cada categoría se muestran las opciones que se incluirán. La mayor parte de las personas han coincidido en el resultado, resultando esta la opción con mayor valoración:
Cabe destacar que las opciones más confusas han sido las relacionadas con el buscador y el listado. Algunas personas incluían “categorías” dentro de buscador, también ocurría lo mismo con “productos”. El buscador mostrará opciones por producto exacto buscado, por producto relacionado o por etiqueta, pudiendo ver todos los productos que pertenezcan a esa categoría.
Así nace Brodie
El naming está creado a partir de la palabra hermano, brother en inglés, con un diminutivo cariñoso, Brodie, refiriéndose a ese hermano mayor que te ayuda en los momentos de decisión. Ayudamos a la gente a encontrar su regalo perfecto. Somos como un hermano mayor.
Se trata de un imagotipo creado a partir de la tipografía Helvética Neue, enfocada a su visualización en digital y la acompaña un bloque de color amarillo que hace referencia a la caja del regalo. A partir de aquí desarrollaremos más adelante la Style Guide.
DISEÑO DEL SITIO
Sitemap
Es hora de poner en marcha nuestro prototipo. Para ello, lo primero que realizo es un mapa de sitio y en él se pueden observar todas páginas y funciones que tendrá la plataforma. Todo nace en la homepage, ahí encontramos un gran buscador que nos permiten encontrar productos mediante producto exacto, productos relacionados o productos de una misma categoría. Tenemos la opción de registrarnos y crear nuestro perfil como shopper o como sheller. Dentro de nuestro perfil encontraremos nuestra lista de deseos y productos que nos interesan. Habrá un menú vertical con opciones como colaboradores, nosotros, shop,… Podremos elegir la lengua y tendremos acceso a promociones.
Userflow
Una vez creado el sitemap, realizo el userflow a través de la herramienta Whimsical. Esto me ayuda a pensar el camino de ida y de vuelta que el usuario puede encontrar y la interacción que tendrá sobre todas las pantallas. Todos estos caminos se engloban en secciones, es el primer paso para generar la experiencia de nuestros usuarios.
MoodBoard
Analizo webs con buena usabilidad, para ello tengo en cuenta los 10 principios heurísticos de usabilidad de Jacob Nielsen, entre los que destaco:
- El control y la libertad del usuario
- La consistencia y los estándares
- La flexibilidad y eficiencia en el uso
Wireframes
Style Guide
Con toda la estructura definida es hora de concretar nuestro estilo visual. Usamos colores como el amarillo ya que según las teorías de Psicología del color en el entorno digital, este color proporciona sensaciones de felicidad, animan a seguir en la web e incentiva la visita. Tendremos cuidado para no usarlo en exceso ya que si esto se produce, las sensaciones pueden ser totalmente diferentes y cargar demasiado la vista del usuario.
Para toda la web usaremos la tipografía Open Sans, sabemos, gracias a Google Fonts, que actualmente es una de las más usadas en las plataformas web. Tiene varios pesos, está ligeramente alargada y permite una lectura muy cómoda.
Los iconos irán acorde con todo el diseño minimalista y funcional de la página.
Prototipo
¡Ahora sí que sí! Presento el diseño final de nuestra web. Todos los wireframes se han creado con la herramienta Figma, diseñando en grid de 12 a un tamaño de 1200px para desktop, utilizando imágenes en svg, jpg y añadiendo gifs para intentar que sea lo más realista posible. He trabajado con símbolos anidados, cuidando la estructura de capas para facilitar en lo máximo posible el trabajo a la siguiente parte del equipo, nuestros compañeros los desarrolladores.
La página de inicio se caracteriza por tener un gran buscador, sin duda es el gran diferencial con la competencia. En este elemento tendremos en cuenta acciones cómo indicar los términos por los que se ha buscado, destacar las coincidencias, permitir refinar la búsqueda,… Desde ahí el usuario tiene acceso a cualquier contenido de la página.
En la parte superior se encuentra nuestra marca, y un menú horizontal con opciones cómo accesibilidad, registro, perfil o elección de la lengua. Ambos elementos formarán una barra sticky que permanecerá fija en la parte superior de la pantalla cuando el usuario haga scroll hacia abajo.
El lateral izquierdo tiene un sidebar con opciones más concretas como shop, artistas, colecciones y nosotros. En la parte inferior encontramos el acceso a las RRSS y la opción de hablar con nuestro bot en caso de necesitar ayuda.
Se ha priorizado el concepto de Findability categorizando la información mediante taxonomías planas. Tenemos un sistema de navegación local y lo alternamos en las listas de productos con una navegación contextual gracias a los chips que permiten buscar contenido relacionado.
A futuro
Una vez lanzada la web se testearía y se llevarían a cabo todas las propuestas de mejora necesarias, gracias a los datos que nos facilitara el uso de la plataforma por los usuarios. Se actualizarían continuamente los flujos y se revisaría la arquitectura tanto en su versión desktop cómo móvil.
Se desarrollarían con calma todas las opciones mostradas en el MoSCoW para la puesta en marcha de los elementos que no han dado tiempo a implementar. En definitiva, un trabajo de empatizar, iterar, idear y desarrollar que avanza en el tiempo y mejora el producto poco a poco.
Conclusiones
Este proyecto se ha desarrollado en tan solo 2 semanas y ha sido una etapa de trabajo muy intenso en la que he disfrutado como un niño. Creo que es muy importante disfrutar con lo que se hace, y sin duda, lo he conseguido. Me ha servido para asentar los conocimientos aprendidos en clase y pelearme con herramientas como Trello, Figma, Marvel, Whimsical… Hay mucho por mejorar, pero es sólo el principio 🙌
