Universe

El poder de la inteligencia colectiva

Imagen del proyecto

Concepto

Software de gestión de la innovación en la nube que permite crear comunidades donde uno o varios de los colectivos de una empresa (como empleados, clientes o proveedores) pueden compartir sus ideas. Cada vez que se crea una nueva cuenta se instala una instancia de dicho software, adaptando el branding al de la compañía y personalizando la configuración según el objetivo de uso.

Contexto

Cuando me encargaron el rediseño de la interfaz, me encontré un software en activo, con más de 7 años en el mercado. Funcionaba aceptablemente, pero el aspecto resultaba un poco obsoleto y ofrecía demasiadas funcionalidades, algunas de ellas con poco o ningún uso.

Reto principal

Diseñar una estructura que funcionase bien para todas las cuentas y todos los casos de uso.

Mi rol

Participar activamente en todas las etapas del rediseño: investigación, prototipado, implementación, testing con usuarios y mejora continua.

Mi mayor responsabilidad fue conseguir insights de la investigación, presentar wireframes basados en estos descubrimientos y, una vez validados, traducirlos en plantillas HTML/CSS.

El proceso

  • Empatizar

  • Definir

  • Idear

  • Prototipar

  • Testar

  • Desarrollar

  • Testar

  • Despegar

  • Investigación de datos cualitativos, entrevistas a usuarios
  • Investigación de datos cuantitativos, Google Analytics
  • Investigación y revisión de funcionalidades existentes
  • Definición de problemas existentes en la aplicación
  • Definición de las nverdadesras necesidades de usuarios
  • Ideación, fase divergencia: brainstorming y co-creación
  • Ideación, fase convergencia: toma de decisiones
  • Prototipado: Pruebas en papel/pizarra
  • Prototipado: Creación de wireframes utilizando Balsamiq
  • Testing interno
  • Testing con usuarios
  • Desarrollo de plantillas HTML/SaaS
  • Desarrollo de las vistas en Ruby on Rails
  • Testing interno
  • Testing con usuarios
  • Salida a producción

Investigación

Realizamos un exhaustivo estudio de las funcionalidades existentes y, posteriormente, un análisis de cuáles resultaban realmente útiles para el objetivo de la aplicación, que no era otro que la participación de las usuarias a través de la publicación de ideas.

Para ello, consultamos los datos de uso cuantitativos de los que disponíamos y los cotejamos con los cualitativos, recogidos en entrevistas.

Como último paso, echamos un vistazo a nuestro alrededor para realizar un estudio de la competencia.

Insights principales
  • Al tratarse de un software de innovación colectiva,la prioridad debía ser fomentar la participación.
  • Teníamos funcionalidades obsoletas que no estaban aportando nada a los/as usuarios/as.
Menos es más.
Personas

Teniendo claros los escenarios comunes, pudimos definir algunas personas tipo para representar a las/os usuarias/os de nuestras comunidades.

Persona #1 Persona #2 Persona #3
Nombre y profesión Elena. Financiera Rafael. Comercial Clara. Estudiante
Grupo de edad 35-40 40-55 18-25
Motivaciones y beneficios de la herramienta.

Le importa que se aprecie su trabajo, busca un ascenso.

Quiere mejorar sus condiciones laborales y las de sus compañeras/os.

Le motivan los premios y que su idea pueda ser llevada a cabo.

Contexto de uso

Reserva una hora de su jornada semanal para publicar nuevas ideas y comentar otras.

No tienen horario fijo para utilizar la herramienta. Aprovecha huecos entre visitas a clientes.

Participa únicamente en concursos que se publican periodicamente.

Dispositivo de uso

Visita la comunidad siempre desde el ordenador del trabajo.

Utiliza indistintamente ordenador portátil o móvil.

Suele utilizar tablet o móvil.

Camino al producto

Recomendación de un compañero de trabajo.

Intranet de la empresa.

A través de Twitter.

Alfabetización digital

Media

Media

Alta

Nuestras personas.

Nuestro objetivo era asegurarnos de que la aplicación Universe diera cobertura a estas necesidades de una forma rápida y sencilla.

Flujos de navegación

Estudiamos las diferentes rutas que podía realizar un usuario al entrar en nuestro Site. Comparamos los datos recogidos con Google Analytics para ver que estaban haciendo la mayoría de personas en ese momento y estudiar que podíamos mejorar para conseguir que llegaran a las páginas deseables.

Flujo de navegación
Flujos de navegación de usuarios
Flujo de navegación
Flujo de navegación aplicado a una de las personas
Tareas de usuario

El siguiente paso fue preparar una matriz con las tareas de usuario y su frecuencia de uso.

Persona #1 Persona #2 Persona #3
Crearme un perfil Única vez Única vez Única vez
Compartir ideas de manera espontánea Muchas veces Algunas veces Nunca
Compartir ideas dentro de un concurso

Muchas veces

Pocas veces

Muchas veces

Ver ideas

Muchas veces

Pocas veces

Algunas veces

Filtrar ideas

Muchas veces

Pocas veces

Algunas veces

Comentar ideas

Muchas veces

Pocas veces

Muchas veces

Votar ideas

Algunas veces

Nunca

Muchas veces

Compartir ideas en redes

Pocas veces

Nunca

Muchas veces

Tareas de usuarios

Diseño

Necesidades del diseño
  • Interfaz limpia y fácilmente escalable a futuro.
  • Mantener la coherencia durante la implementación y facilitar el trabajo del equipo de desarrollo.
  • Estructura que funcionase bien para todas las cuentas y todos los casos de uso.
Decisiones de diseño
  • Diseño basado en tarjetas o Card-Based Design.
  • Preparar una librería de componentes para ayudar a mantener la coherencia entre todas las vistas.
  • Facilitar dos capas de personalización: adaptación a la imagen corporativa de la compañía y al caso de uso al que se destinara la comunidad.
Prototipado

Al trabajar con plazos apurados, decidimos preparar wireframes y trabajar sobre ellos a la hora de preparar las plantillas HTML que, posteriormente, el equipo de desarrollo convertiría en vistas de Ruby on rails.

De las primeras pruebas en papel pasamos a la herramienta de prototipado; esta vez nos decantamos por Balsamiq, principalmente porque permite trabajar de manera ágil y elimina las tentaciones de añadir elementos visuales innecesarios.

Low-fi wireframe para la Home
Low-fi wireframe para la Home

Resultado final

Logros

Logramos alcanzar los dos objetivos principales: una interfaz más limpia y mayor velocidad de carga, lo cual se traduce en un mayor engagement (aumento del tiempo invertido en cada visita), fomento de la participación y aumento del ratio de conversión.

Sumando dos capas de personalización, imagen corporativa y caso de uso, conseguimos que un solo producto lograra adaptarse a los requisitos de clientes muy diferentes entre sí: grandes grupos bancarios, aseguradoras, grupos hoteleros, empresas retail, instituciones de carácter social, ayuntamientos y universidades.

Final design - home
Home de una de las comunidades
Final design - ideas
Listado de ideas de una de las comunidades
Algunos ejemplos de comunidades
  • Grupo Hotusa
  • UNLTD Spain
  • Alain Afflelou
  • Digital enterprise show
  • Womenalia
  • Ayuntamiento de Santander

Producto desarrollado por

ideas4all Innovation