Design Challenge: Mango

Laura Cagüe
Jun 23, 2019 · 10 min read

Rediseño Intranet

El problema

Rediseño de la página de inicio y el sistema de navegación de la intranet actual de Mango, en base a una solución responsive para Desktop, Tablet y Mobile.

Metodología del Doble Diamante

Para abordar este reto he decidido utilizar el modelo del Doble Diamante, que básicamente es un mapa visual simple del proceso de diseño dividido en cuatro fases (Descubrimiento, Definición, Contrucción y Entrega ) y centrado en el usuario, con el que a través de un pensamiento primero divergente para idear, y luego un pensamiento convergente para crear, conseguimos dar una definición de nuestro problema y hallar una solución consistente y centrada en las necesidades del nuestro usuario, que luego podremos testar y mejorar iterando sobre el mismo proceso.

Metodología del Doble Diamante

Descubrir: Investigación sobre el problema

Brief

Ya puestos en contexto y con una visión de la marca a la que vamos a ayudar en este reto y el tipo de producto que demanda, elaboro un documento que nos pondrá en contexto durante el proceso y marque los límites y defina los objetivos del proyecto.

Brief

5 ¿Por qué?

He creído conveniente utilizar la herramienta de los 5 Porqués para hacerme una idea de la causa originaria del problema al que nos estamos enfrentando de una manera breve y rápida, ya que teniendo en cuenta la limitación de tiempo que tenemos será de gran ayuda.

5 ¿Por qué?

Persona

He creado dos arquetipos persona diferentes para tener una visión de dos modelos de usuario con roles distintos dentro de la compañía. Por un lado un role comercial, centrado en el perfil de una dependienta de tienda y por otro lado un role de marketing centrado en el perfil de una empleada de las oficinas. Para crear estos dos avatares, Linkedin ha sido una herramienta muy útil para obtener información sobre sus características, motivaciones, necesidades, objetivos y metas.

Personas

User Journey

Por la limitación de tiempo, voy a construir un solo user journey centrándome en la persona 1: Dependienta de tienda. He elegido este perfil debido al volumen de empleados que hay dentro de la compañía desempeñando esta función.

En este user journey se representa la historia de un día en el trabajo de un dependiente de tienda de Mango, en este caso un día de trabajo con Covadonga, nuestro arquetipo. A lo largo del journey señalaremos las acciones principales que lleva a cabo el usuario y hallaremos los momentos en los que la intranet con sus diferentes herramientas podría servir de ayuda para mejorar o facilitar el trabajo de Covadonga.

Journey

Definir: Análisis del problema

Análisis del diseño actual

Observación y análisis previo

Basándome en las anteriores premisas, he realizado un primer análisis fundado en la observación del screenshot que se ha facilitado de la intranet actual, valorando los siguientes conceptos:

Estructura y Navegación — Contenido — Diseño de interfaz

Estructura y navegación

La estructura de una web establece como se organizan y jerarquizan todas la páginas, categorías y contenidos del sitio, por lo que es fundamental que la estructura sea clara y sólida.

Observando la captura de la página de inicio de esta intranet, podemos notar que en este caso no existe una estructura consistente, ya que no queda clara ni la navegación, ni la arquitectura de la información.

La navegación se distribuye por la página sin un orden claro a través de enlaces que intuimos, dirigen a diferentes páginas del sitio, sin una categorización ordenada del contenido y sin un menú principal claro.

Contenido

El contenido es el elemento más valioso de un sitio web, y como hemos visto anteriormente es fundamental que una intranet cuente con un contenido accesible y útil, que facilite y haga más eficaz y productivo el trabajo de sus usuarios, cubriendo sus necesidades y aumentando así su participación y finalmente su satisfacción.

En este ejemplo, una vez más el contenido no es claro, pero echamos de menos algunos elementos que anteriormente hemos visto que pueden ser de gran importancia, como son los enlaces a los medios sociales de la compañía (Facebook, Instagram…), acceso a las tareas, plataforma de aprendizaje, grupos de trabajo, chats internos, directorio de empleados, herramientas de colaboración, correo integrado, videoconferencia, Información de perfil…, es posible que este contenido exista, pero no esta claro y al ser una imagen y no poder navegar por los diferentes enlaces no podemos saber con certeza con qué información cuenta.

A continuación analizamos la vista previa de la página de inicio para tratar de examinar el contenido con el que cuenta la intranet, pero para conocer realmente el contenido real y sus funcionalidades actuales tendríamos que poder navegar por el sitio y hacer las preguntas correspondientes para saber que hay y que falta.

Diseño de interfaz

A nivel de diseño, como se puede observar a primera vista el look & feel de la intranet revela que se trata de un diseño poco actual y si comparamos con la web oficial de la compañía, percibimos que no sigue las líneas de estilo corporativas actuales de la marca.

Por otro lado, el diseño de la interfaz no ayuda a identificar la estructura de la página, lo que hace aún menos intuitiva la navegación.

Análisis heurístico

Es un método que permite identificar los problemas en la interfaz del usuario, basado en los principios de usabilidad.

Para la realización de este análisis, he tenido en cuenta la limitación de no poder navegar por el sitio al tratarse de una imagen, por lo que habrá ciertos aspectos que no podremos analizar.

El análisis tiene 10 bloques de usabilidad de los que el informe recoge:

Tabla de valoración análisis heurístico

Los resultados del análisis han sido los siguientes:

Resultados

La valoración final del análisis es que esta intranet cumple con un nivel de usabilidad medio, por lo que aunque el usuario puede navegar con cierta facilidad, hay muchas cosas que se pueden mejorar, de las cuales vamos hacer la siguiente selección:

Gráfico de araña

Finalmente he representado los resultados en un gráfico de araña que nos ayuda a tener una visión general del estado de usabilidad de la intranet y hace un mapeo de la puntuación de los diferentes bloques indicando en cuales de ellos falla más la intranet.

Características clave

Voy a realizar una priorización de las diferentes tareas que hemos identificado para el rediseño de la intranet de MANGO.

Primero hacemos una recopilación de las diferentes ideas:

A continuación creamos una matriz 2x2 dónde mediremos el esfuerzo / impacto para determinar que tareas realizar lo antes posible y cuales pueden esperar para más tarde.

Estás son las tareas que priorizamos en relación al impacto/tiempo:

CONSTRUIR: Planteamiento de reto

Arquitectura de la Información

Card Sorting

Voy a utilizar la técnica de Card Sorting para hacer una evaluación de la organización de los contenidos y mejorar la estructura de la información de la intranet. Para ello vamos a categorizar los distintos contenidos lo que nos va a ayudar a construir un menú de navegación más óptimo.

Para realizar esta técnica con éxito, también supone una gran limitación el no poder interactuar y navegar por la página, pero realizaré el ejercicio con la información de la que dispongo.

En este caso he llevado a cabo un Card Sorting Cerrado, ya que ya había creado las categorías antes de la realización del ejercicio, de manera que solo había que ordenar los contenidos en las diferentes categorías.

Resultado del Card Sorting:

Mapa de sitio

Es la estructura de navegación de la web, formado por las diferentes páginas que ésta contenga.

Propuesta conceptual

Diseño responsivo para móvil, tablet y desktop de la página de inicio.

Moodboard (Inspiración visual).

Crazy 8

Crazy 8 es un ejercicio de ideación en el que tienes 8 minutos para pintar 8 ideas. Es muy útil para pensar rápidamente en posibles soluciones.

Este es el resultado de mi Crazy 8 para rediseño de la intranet de Mango, en el que he bocetado distintas vistas del diseño responsivo, comenzando por la vista de móvil y después tablet y desktop.

Wireframings

ENTREGAR: Solución

Prototipo con Sketch

Línea de estilo

Evaluación

Finalmente hemos conseguido un diseño actualizado, acorde con la línea de estilo de la marca y que cumple con las características que debe tener una intranet según marca la tendencia, aportando a los usuarios un lugar de trabajo que les ofrezca nuevas herramientas que potencien su labor y aprendizaje, obteniendo empleados más motivados y comprometidos, así como impulsando la colaboración de los equipos, para un mayor conocimiento y sentido de pertenencia a la compañía.

Se ha tratado que el producto satisfaga las necesidades del usuario atendiendo a su perfil y también las necesidades de la marca en base a sus valores y objetivos, pero teniendo en cuenta las limitaciones de tiempo y acceso al producto original a rediseñar, se debería hacer una investigación de usuarios más exhaustiva que incluya entrevistas y cuestionarios, utilizar herramientas que nos permitan conocer cómo interactúa el usuario con la intranet, como el shadowing y obtener información de primera mano de los responsables del producto para conocer sus objetivos y necesidades reales.

Así mismo, en cuanto al diseño, en próximos pasos se podría avanzar en la definición y construcción de las diferentes páginas con las que cuenta la navegación, así como nuevas funcionalidades que enriquezcan la experiencia.

Herramientas: Sketch (wireframings + prototipo).

Laura Cagüe

Written by

UX/UI Designer at Microsoft

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade