Brodie 2018-10-25T11:11:45+00:00

UX/UI DESIGN

Brodie - Un e-commerce alternativo

31 agosto, 2018

Marca

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.

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

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ónde 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.

bordie1

II Society6

brodie2

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

Puntos clave:

Basa su modelo de negocio en la ayuda a pequeños empresariosque 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.

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.

Brodie3

¿Qué sacamos en claro de nuestro Benchmarking?

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.

 
Getting Started@1.5x

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:

 
encuestas

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 acabanrecurriendo 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.

Datos obtenidos

Ambas personas coinciden con que el proceso de compra es bastante tediosoprincipalmente 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ñopero 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.

brodie5

¿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.

analisis1
analisis2

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.

DAFO

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 handmadedestinados 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.

CANVAS

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.

Anto
Lorena

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.

Proto Journey

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:

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.

 
IN-OUT

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:

 
Card Sorting

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.

Estructura

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.

Mapa del Sitio

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.

Flujo del Sitio2

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

mood1
mood2

Wireframes

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.

Style Guide

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.

 
1_1EYtpL5dUt5vwNG7muMafg

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.

 
GIF

© Abel Pérez Espinosa. Hecho con ♥ en Madrid, 2018.