ABC COMPANY

Hacia el diseño de un e-commerce de alta calidad

Soledad Abad
4 min readJun 18, 2018

Ya introduje la primera fase de este proyecto grupal en esta historia, por lo que resumiré muy brevemente el punto de partida: nuestro cliente, ABC Company, deseaba crear una plataforma de venta online de sus productos que mantuviera la esencia de su tienda física.

Los participantes del grupo 3 decidimos primar dos cuestiones por encima de todas:

  • mostrar especial cuidado en la calidad y la información sobre nuestros productos.
  • proporcionar información detallada sobre el proceso de envío.

Tras haber realizado los wireframes de media fidelidad basándonos en los procesos de investigación vinculados al UX comenzamos a trabajar en la toma de decisiones con respecto a la parte visual.

Comenzamos definiendo los atributos de marca, clave para poder avanzar en el proceso de inspiración:

A partir de ahí teníamos una base para construir nuestro moodboard:

En este primer paso definimos colores sobrios, basados en la tipología de imágenes que habíamos elegido para construirlo. Entre ellos estaba el verde, el azul y el granate. También hicimos una primera aproximación a la iconografía y a las imágenes que queríamos mostrar en nuestra plataforma, en la que buscábamos reflejar naturalidad, para así transmitir confianza.

El siguiente paso era elegir los colores definitivos y la tipografía. Para los primeros fuimos iterando sobre los que habíamos definido inicialmente y, para la tipografía, recurrimos de nuevo a los atributos, pues necesitábamos que nuestra marca se comunicase en sintonía con ellos. Exploramos mucho, aunque partíamos de la convicción de que necesitábamos que fuese una sans serif.

Elegimos estas dos tipografías. Rubik para el cuerpo de los textos porque es redondeada y de fácil lectura. Le aportaba, además, una apariencia cuidada y cercana a nuestra plataforma. Magra la elegimos para los títulos, también tenía formas redondeadas pero aplicaba un toque más serio, por lo que se acercaba más a los atributos de respetuosos y responsables, creando entre ellas un buen contraste.

Style tile

En base a todo lo aprendido, confeccionamos nuestro Style tile, la primera aproximación a la apariencia de nuestra plataforma. Como se puede apreciar los colores se hicieron más brillantes, pues daban una apariencia más fresca. En este proceso elegimos también una iconografía lineal pero detallada, que encajara así con la primera de nuestras prioridades.

Nueva paleta de color

Con todos estos elementos preparados nos dispusimos a definir cuestiones como cards o botones, empezando a crear wireframes de alta fidelidad e iterar sobre los mismos en base al feedback que íbamos recibiendo.

Desarrollo de nuestro Atomic Design

¿Cuál fue el resultado final? Una web que ofrecía un servicio cuidado y con atención al detalle.

¿Cómo trabajamos en nuestras prioridades? A través de fichas de producto muy detalladas, que indicaban la procedencia, los beneficios de cada alimento, recetas, etc.

Ficha de detalle del producto

¿Y el proceso de entrega? Era otra de las cuestiones fundamentales a las que queríamos atender, por ello decidimos añadir una valoración de los repartidores y mantener al usuario informado del proceso en el que se encontraba su compra.

Detalle Seguimiento del pedido

Además, añadimos una sección a la que denominamos Mis pedidos desde la que era posible acceder a los últimos pedidos realizados —permitiendo, entre otras cosas, personalizar el nombre del mismo—, consultar el estado de pedidos en tránsito o visualizar los productos comprados habitualmente.

Detalle sección Mis pedidos

Gracias a estas características cumplimos con los principales requerimientos de nuestro cliente y le ofrecimos soluciones óptimas para los problemas que detectamos durante la investigación como inseguridad con los procesos de entrega o desconfianza en la calidad ofrecida en los productos.

Miembros del equipo 3. De izquierda a derecha: Diego M. Molina, Ernesto Sánchez, Alba Balbás y yo misma.

Puedes leer más sobre este proyecto en los perfiles de mis compañeros Ernesto Sánchez y Diego Molina. Y no puedo dejar de mencionar a Alba Balbás, también compañera de proyecto.

Saluditos =D

--

--

Soledad Abad

Diseñadora de contenido y doctoranda en Teoría de la Literatura.