Hands On II: Rediseñando la página MónUB

Nuestro trabajo consiste en realizar una propuesta de rediseño de la página de MónUB de la Universitat de Barcelona (http://www.ub.edu/monub/) a través de una auditoría de contenidos y card sorting.

web monUB
image-6231

Lo haremos en 4 fases: primero un vaciado de los contenidos de la página, en segundo lugar una agrupación de los contenidos a través del método de card sorting, en tercer lugar un análisis de los resultados del test de card sorting y finalmente un wireframe, dos propuestas de rediseño de la página principal.

1.- Auditoría de contenidos

En esta primera fase, navegamos por la página para identificar las tipologías de contenidos que hay. Se trata de hacer un vaciado de todos los contenidos hasta el nivel más bajo posible, listando todas las unidades de contenidos y tipificando las URLs.

El vaciado de contenidos lo realizamos en dos fases:

En un primer momento, realizamos un primer vaciado de manera individual durante unos 10-15 minutos, para testear el procedimiento.

Una vez definido el sistema que vamos a utilizar, nos repartimos los bloques de contenidos – columna derecha, central e izquierda – entre todo el grupo para volcar las unidades en un documento común (Google Sheets).

Ejemplo columna izquierda:

Columna izquierda
image-6232

Ejemplo columna central:

columna central
image-6233

Ejemplo columna izquierda:

columna izquierda
image-6234

2.- Card Sorting

Para consensuar cuál es la mejor agrupación de contenidos de la manera más objetiva, trasladamos el contenido extraído de la web a un card sorting.

Lo más importante es empezar desde la base, por este motivo creamos un listado de tarjetas con todas las unidades de contenido, obviando las agrupaciones de contenidos de la página original, para no estar contaminados y no dejarnos influenciar por los grupos hechos por la UB.

Proceso: después del vaciado inicial, volcamos las unidades de contenidos en Optimal Workshop, una herramienta virtual para card sorting (https://www.optimalworkshop.com).

Al no tener acceso a una cuenta premium por el alto coste (99$), hemos tenido que reducir el número de tarjetas a tan sólo 30 para realizar el test.

card-sorting
image-6235

En este test dejamos fuera los contenidos abstractos y nos centramos en el contenido susceptible de ser consultado por un estudiante (hacemos una limpieza del contenido, de los links externos, etc.).
Por parejas, realizamos el card sorting. Uno de los miembros del grupo realiza el test, el otro lo conduce.

card-sorting-cards
image-6236

Lo primero que debemos hacer es explicar al usuario lo que vamos hacer. A través de la herramienta le damos unos temas en forma de tarjetas, y el usuario los tiene que clasificar.

card sorting vista 1
image-6237

El conductor del test tiene que estar seguros del criterio que está siguiendo el usuario, y debe recoger el feedback y asegurarse de por qué el usuario toma una decisión editorial u otra, al tiempo que identifica los problemas que puede haber, ya que el contexto del test es importante.

Notas: no hay límite de grupos por crear pero se debe evitar usar agrupaciones con nombres como “otros”, “más servicios”, etc. (en estos casos se pueden poner ejemplos del contenido para nombrar el grupo, por ejemplo “Ayudas y ventajas”, si hay un grupo con estos contenidos).

Conclusiones: dejando de lado el contenido relacionado con los estudios, los sujetos se enfrentan a temas muy diferentes. Hay muchos contenidos difíciles de agrupar, por la gran variedad de temas que tratan. Además, debemos tener en cuenta que los grupos deben responder a las necesidades de los estudiantes.

Las tarjetas más difíciles de agrupar en un primer momento han sido: “seguros”, “órgano de gobierno”, “consejo de estudiantes”, “aulas para séniors” y “premios”.

3.- Análisis de resultados

Después de este proceso, analizamos el resultado de los tests para llegar a un consenso sobre la mejor agrupación posible.

La herramienta ofrece diferentes tipos de análisis de resultados:

similarity-matrix
image-6238

dendograma1
image-6239

dendograma2
image-6240

Para analizar los resultados nos hemos basado en las agrupaciones hechas por los usuarios.

resultados-card-sorting
image-6241

Con los resultados del card sorting, entre todos consensuamos la mejor agrupación para cada unidad de contenido según los grupos que más se repiten para cada unidad de contenido.

Consulta las agrupaciones realizadas a través de los resultados del test:

file:///C:/Users/Mariana%20Aceves/Documents/M%C3%A1ster%20UAB/Marketing%20Online/Hands%20On%202/Card%20Sorting%20nueva%20propuesta.pdf

4.- Wireframe

Después de analizar los resultados del test de card sorting, procedemos a realizar dos propuestas de rediseño de la página principal con la aplicación web Marvelapp (https://marvelapp.com/).

La página principal de una empresa y organismo debe contener los siguientes elementos:

  • Acceso rápido a los productos
  • Contenido de branding, que dé credibilidad a la marca

Primero de todo, realizamos un boceto sobre papel para consensuar la arquitectura y estructura de la web. Para ello, navegamos por otras webs de contenidos para ver cómo están estructuradas (pueden ser webs de noticias, organizaciones, etc.).
Una vez hemos decidido la estructura para cada propuesta, procedemos a crear los wireframes en Marvelapp.

Propuesta 1

Home

Home
image-6242

Admisiones

Admisiones
image-6243

Estudios

Estudios
image-6244

 

Propuesta 2

Home

Home 2
image-6245

 

Trabajo completo 

Trabajo realizado por: Mariana Aceves, Georgina Guitart, Laura Llop, Laura Raventós, Beatrice Rossi, Karina Urbina y Kimi Yamada

IMG_0663
image-6246

 

¡Deja el primer comentario, no seas tímido!

Únete a la discusión

Puedes utilizar los siguientes HTML tags y atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>