Diseño eCommerce: Proceso de diseño de una tienda online

Diseño ecommerce

Hoy te traemos un post diferente. Vamos a dejarte entrar un poco en las puertas de Trilogi, para que conozcas cómo trabajamos los diseños de las tiendas online. Resumidamente explicaremos qué aspectos tenemos en cuenta para conseguir un buen diseño eCommerce. Verás las diferentes fases por las cuales procedemos hasta llegar al resultado final.

 

¡No queremos aburrirte! Así que serán solo unas pinceladas para que te ayuden a comprender cómo, en consecuencia, tomamos las distintas decisiones de diseño. ¿Empezamos?

Diseño ecommerce

01 – Introducción

El diseño eCommerce o el diseño de tiendas online, tiene la finalidad de solucionar los diferentes problemas que pueda tener un particular entorno a la funcionalidad del producto, especialmente en el comercio electrónico. Y como diseñador@s, vamos a ofrecer todas las opciones posibles que te ayuden a alcanzar tus objetivos. El resultado final será la unión entre la estética y la funcionalidad. Una experiencia visual atractiva, coherente y práctica.

Cada proyecto de diseño web empezará con un proceso de diseño. Nos ayudará a detallar los pasos a seguir y nos guiará hasta el resultado final. ¡Veamos cómo se crea una tienda online!

02 – Investigación y documentación

Para empezar, es muy importante realizar una investigación inicial que nos ofrezca suficiente conocimiento sobre la empresa, sobre nuestro cliente directo y el usuario final, conocer los objetivos que se quieren alcanzar e investigar el mercado profesional donde se encuentra.

Investigación y documentación

 Puntos clave para iniciar el diseño eCommerce:

  • Empresa
    Es muy importante conocer cómo piensas, cómo quieres mostrar tu producto y cómo quieres que se te reconozca.
  • Objetivos
    Para focalizar bien nuestra estrategia de diseño debemos saber qué quieres conseguir, qué mensaje quieres transmitir, si será un B2B o un B2C… En cualquier caso, tratándose de un eCommerce, el principal objetivo será aumentar la tasa de conversión (es decir, ¡Vender!).
  • El usuario
    Casi más importante que el empresario, sobre todo debemos conocer las necesidades del usuario que navegará por la tienda. Ten en cuenta que será quién generará los beneficios.
  • La competencia
    Otro punto importante, es analizar la competencia: qué hacen, qué no y, especialmente, cómo se muestran al mercado para destacar respecto a las demás. Visualmente, cada sector tiene unos colores atribuidos y una forma más o menos agresiva de destacar (sí, ¡los colores influyen en nuestro estado emocional y en la sensibilidad de comprar un producto!).

… Si se trata de una tienda online, su principal objetivo será aumentar la tasa de conversión.

03 – Definir conceptos

Una vez que hemos profundizado en la investigación, puntualizamos los aspectos más importantes y actuales que debemos tener en cuenta. Para las tiendas online, no hay ninguna excepción.

Definir conceptos

Debido a que las nuevas tecnologías ejercen más impacto en nuestra cultura,  hay que trabajar nuevas estrategias y directrices para mantenerlas actualizadas y preparadas para todo tipo de dispositivos.

El concepto de diseño responsive o diseño adaptativo, las bases específicas del framework Bootstrap (con el que trabajamos en Trilogi), la filosofía Mobile first, la Usabilidad y Experiencia de Usuario (UX), la aplicación de técnicas relacionadas con el SEO On Page

Así que, se puede decir que todas ellas son prácticas must have. Elementos imprescindibles que debemos incorporar correctamente en todos nuestros diseños eCommerce, ya sean nuevos o rediseños.

04 – Idear y plantear primeras ideas

Es hora de plantear las primeras ideas de diseño y crear los esbozos o wireframes. Estos dibujos nos ayudarán a comprender y recordar todas las ideas que vayan surgiendo en este proceso

Idear y plantear primeras ideas

 Resumidamente, qué tenemos en cuenta:

  • Imagen corporativa de la marca: Definimos cómo se aplican las tipografías, colores y estilos gráficos. Lo haremos a través del Manual Corporativo de la empresa o bien, según nuestra propuesta de diseño.
  • Definimos las funcionalidades más importantes según los objetivos marcados.
  • Determinamos qué elementos de contenido aparecerán y cuáles serán los más importantes.
  • La Arquitectura de la Información (IA). Trata de organizar y priorizar el contenido mencionado anteriormente de manera descendente, para que sea lo más comprensible posible. Es decir, de más a menos relevancia.
  • Pensamos en cómo se adaptarán todos los elementos a las diferentes pantallas (mobile, tablet y desktop). La tecnología responsive o adaptative.
  • Usabilidad y Experiencia de Usuario (UX). Se traduce, a grandes rasgos, en el conjunto de técnicas y conocimientos que permiten que el usuario tenga una buena experiencia del producto tanto a nivel físico como emocional. Que sea fácil e intuitiva.

Ej. Saber cómo piensan, si consiguen leer y encontrar todo lo que están buscando, que una página tenga buena accesibilidad, que la velocidad de carga de una página sea óptima, tener un buscador eficiente para los productos, ubicación clara del menú de categorías, tener un aspecto visual claro y atractivo…

Por lo general, son muchos los aspectos que tenemos en cuenta a la hora de realizar un diseño eCommerce. Pero, lo que parece especialmente importante es que: Cuanto más feliz (o menos estresado) resulte un usuario, más probabilidades habrá de que vuelva a entrar en la tienda online. En consecuencia, aumentarán las posibilidades de compra y la tasa de conversión ascenderá (se traducirá en ¡más ventas!).

05 – Propuestas de diseño: Mock-up’s

Es hora de ponernos a trabajar en serio (en realidad, se llama la fase de experimentación más creativa.  Nos rompemos la cabeza – nos retamos – a buscar soluciones nuevas e innovadoras. Para los más técnicos, la llamarán la fase: ¡A producir!).

Propuestas de diseño Mock-up

Proyectamos todas nuestras ideas en un archivo de imagen (.jpg) que muestra la propuesta de diseño. También representamos cómo actuará la página en respuesta a las acciones de los usuarios (hacia qué color cambiará un botón cuando pasemos sobre el mismo, cómo se mostrará el desplegable de categorías, como se visualizarán los enlaces, etc.).

Este tipo de documento se llama Mock’up porque es una representación más avanzada del diseño gráfico (casi como el diseño final), pero sin contener interacción ni navegación real.

Qué se plantea:

  • Imágenes y contenidos. Las imágenes pueden ser ejemplos y el texto puede ser “texto falso” (el famoso texto Lorem ipsum ).
  • La paleta de colores
  • Las tipografías
  • La iconografía
  • Las dimensiones de los contenidos y servicios
  • Añadimos nuestra creatividad, ¡sin olvidarnos de la funcionalidad!

Este proceso puede ser más o menos largo según la complejidad del proyecto. Enviamos todas los archivos necesarios para que se entienda como procede todo el diseño eCommerce. Esperamos a recibir el feedback y se analizan todas las impresiones que hayan surgido sobre él.

Por lo general, esta fase se comprende de un continuo “tu-a-tu” entre diseñador y cliente.  A través del Project Manager, se gestionará el proyecto para facilitar el acuerdo. Como resultado, cada diseño de cada página y versión que presentemos, deberán ser aprobados y aceptados. Finalmente y llegados a este punto, cerramos la fase propiamente de diseño.

06 – Validar y verificar la funcionalidad de la tienda

¡Pero no termina aquí! Casi hemos acabado…

También generamos y facilitamos todo el material que pueda necesitar el técnico para empezar su tarea. Nos gusta cuidar de los proyectos con mucho cariño y queremos colaborar en cualquiera de los problemas que puedan surgir.

Validar y verificar

Por esta razón, hacemos un seguimiento del proceso para plantear soluciones y/o resolver todas las dudas. Es posible que puedan surgir situaciones que no se hayan contemplado inicialmente (por desgracia, ¡estas cosas suelen pasar más de lo que nos gustaría!).

Una vez que la tienda está “terminada” y se ha subido la mayoría o la totalidad del contenido real, hacemos un último paso: Revisión de Usabilidad (UX), errores y análisis de efectos y transiciones (un esperado documento que se puede extender tanto o tan poco, que por ello nos temen/aman a la vez ).

Tan pronto como se apliquen todos los ajustes necesarios, ¡solo queda esperar! Llega la fecha de apertura, empezamos a navegar y ¡disfrutamos de nuestro lindo trabajo!

07 – Trilogi, trabajamos en equipo

Pero no todo ha podido ser gracias al diseño (evidentemente). Abrir una tienda online requiere de mucha participación y organización. La colaboración es fundamental entre todos los departamentos. Sin ninguno de ellos, ¡no seríamos capaces de ver nuestro esfuerzo en vivo!

Equipo TLG

Espero que te haya gustado conocer nuestro día a día y que te anime a indagar un poquito más en este mundo creativo. Desde el departamento de Diseño nos encanta que los clientes disfruten de nuestro trabajo y que permanezcan con una sonrisa de oreja a oreja. Por eso, si quieres más información, no dudes en contactar con nosotros. Te asesoraremos con mucho gusto.

Fuente de las imágenes: Pexels y Unsplash.

Related Posts

Háblanos
de tu proyecto
Estaremos encantados de ayudarte
Suscríbete
a nuestro newsletter

He leído y acepto la política de privacidad
INFORMACIÓN PROTECCIÓN DE DATOS DE SOLUTIONS TRILOGI, S.L.
Finalidades: Responder a sus solicitudes y remitirle información comercial de nuestros productos y servicios, incluso por correo electrónico. Legitimación: Consentimiento del interesado. Destinatarios: No están previstas cesiones de datos. Derechos: Puede retirar su consentimiento en cualquier momento, así como acceder, rectificar, suprimir sus datos y demás derechos en hola@tlgcommerce.com. Información Adicional: Puede ampliar la información en el enlace de Avisos Legales.
igualada
Milà i Fontanals, 3 · 08700 Igualada
barcelona
Passeig de Gracia, 54 3ro. · 08007 Barcelona
hong kong
Room 3, Smart-Space 3C, Cyberport 3
100 Cyberport Road · Hong Kong
shanghai
Room 216, 555 Wu Ding Road, Jing’an District · Shanghai
上海市静安区武定路555号216室 中国