TACTICAL

TACTICAL

Diseño de interacciónDiseño visual

Diseño de interacciónDiseño visual

Tactical – Main image – @2x

Planteamiento

Rediseño del website de Tactical, una tienda online de bolsas, mochilas y ropa técnica ubicada en San Francisco. Con materiales de alta calidad y diseño cuidado enfocada a los riders urbanos, deportistas de montaña y aventureros a los que le gusta este tipo de equipación.

La web actual no está optimizada para dispositivos móviles, el contenido no está organizado en base a las necesidades de los usuarios y se han detectado problemas de usabilidad. El objetivo es mejorar el diseño de interacción, el diseño visual y con ello la experiencia de usuario global incrementando las ventas.

Evaluación heurística

En primer lugar y con el objetivo de destapar problemas de usabilidad, se realizó una revisión de los principios de interacción de la web para detectar oportunidades de mejora. Los hallazgos más relevantes tuvieron que ver con:

  • Ausencia clara de CTAs en los elementos promocionales como banners o sliders de los productos que se quieren destacar.
  • Problemas en la navegación (primaria y secundaria)
  • Etiquetado de contenidos (uso de nomenclaturas técnicas que el usuario desconoce)
  • Organización de contenidos
  • Consistencia y uso de patrones de interacción
  • Relacionados con el layout, el color y la tipografía.

La marca produce mucho contenido propio pero no están bien organizados y no se explican lo suficientemente bien. La web debe estar al nivel de unos productos y contenidos de calidad.

La web usaba un servicio externo para realizar las compras (checkout) y uno de los objetivos también fue integrar este proceso y pasos de forma personalizada en la web.

Auditoría de contenido

Se realizó un listado de todo el contenido existente de la web con el objetivo de detectar duplicidades y contenido que podría ser interesante añadir. Realizamos un itinerario en profundiad por toda la web indicando qué hay en cada una de las secciones de todas las páginas. Una vez realizado el listado se empezó a analizar las mejoras que se podrían implementar. Había muchas duplicidades y demasiadas maneras de llegar a los mismos lugares. A demás algunos productos no tenían la misma estructura y organización de la información. La lista sirvió de base para dearrollar el sitemap.

Optimizar la estructura: Mapa del sitio

En primer lugar se creó el sitemap de la web actual para poder visualizar con claridad el estado actual y determinar qué cambios podríamos realizar.

En esta fase se realizaron mejoras estratégicas en cuanto al contenido. Se marcaron las páginas que incluian contenido duplicado y se examinó todo el contenido (sobretodo el relacionado con los productos que era lo más importante). Debido a esto se eliminaron algunas secciones y se agruparon otras. El objetivo fue simplificar la clasificación de un catálogo de productos complejo y con la premisa de dejar muy claro al usuario qué va a encontrar en cada sección, ponernos en su lugar y perspectiva. Fue muy importante establecer nuevas jeraquías y otorgarle a cada contenido el orden de relavancia apropiado.

Con todo esto claro se desarrolló un nuevo sitemap que reflejara los cambios realizados para poder visualizar el resultado global y hacer los últimos ajustes. El resultado final fue una estructura mucho más ogranizada, sencilla y con más sentido para el usuario.

Tactical – Sitemap

Flujo de interacción del usuario

Aquí es dónde planeamos de inicio a fin la interacción del usuario consiguiendo su objetivo en la web, en este caso, la compra de un producto. Nos centraremos en el flujo del usuario al realizar esta tarea clave.

Con el user flow conseguimos:

  • Una visión de alto nivel estratégica del producto
  • Entendimiento del comportamiento del usuario dentro de nuestro sistema
  • Funcionalidad macro que será necesaria
  • Definir la interfaz (saber qué pantallas será necesarias, textos, enlaces y botones, etc.).

Para comunicar esta información de la manera más entendible posible a los stakeholders decidimos usar un tipo de diagramación propia del mundo de los negocios y huir así de lenguajes propios del mundo del diseño. Usamos la convención o modelo de procesos BPMN (Business Process Model and Notation).

Tactical – Flujo

Diseño funcional: Wireframes

Realizada la arquitectura de la información de alto nivel es el momento de prototipar el diseño funcional de la tienda mediante la creación de los wireframes de las pantallas más significativas. El criterio de selección de las pantallas a prototipar se ha basado en todo el trabajo previo realizado, como las tareas principales que el usuario debe poder realizar. Se desarrollaron prototipos responsive de la página inicial, la página de categoría y la página de detalle de producto.

Tactical – Wireframes – Home – DS

Los wireframes son como los planos de un arquitecto pero aplicados al diseño. Nos sirvien de puente entre el contenido (AI) y la superfície (diseño visual) del producto digital. Será el lenguaje común de comunicación que usaremos como diseñadores para comunicar aspectos relacionados con la estructura, el contenido, la jeraquía de la información, la funcionalidad y el comportamiento tanto del usuario como del sistema.

Tactical – Wireframes – Mockup

Diseño visual

Tras revisar, testar e iterar el prototipo pasamos a realizar el diseño visual en alta fidelidad de las pantallas más importantes del ecommerce. Se creó una guía de estilo esencial para garantizar la consistencia visual del proyecto y su escalabilidad en la que definimos la tipografía y su escala, colores, elementos clave que se van a repetir y secciones globales de la web como la cabecera, el footer y algunos módulos. Esta guía o sistema de diseñó y toda la arquitectura de símbolos se creó en sketch y se utilizó como librería para la creación de las distintas pantallas.

Design System Mockup Portfolio
Tactical – Mockup Home – Browser
Tactical – Mockup Categoría – Browser
Tactical – Mockup Producto – Browser

Works

AireProject type

TacticalProject type

MNACProject type

MetrixProject type

© David Soriano 2018. Made with ❤ in BCN.