2015–2016 · SaaS / Survey Platform

Suonper

Unificando una plataforma web y mobile para crear, distribuir y analizar encuestas.

Suonper era una plataforma multicanal para crear encuestas, recolectar respuestas a través de web y dispositivos móviles —incluyendo relevamiento offline— y analizar resultados desde una plataforma central.

Rediseñé y reimplementé la experiencia web de forma responsive, llevando hacia el resto del producto el lenguaje visual y de interacción que se estaba desarrollando para la aplicación de iPad.

  • Product Design
  • Interaction Design
  • Information Architecture
  • Responsive Web
  • UI Design
  • Front-end implementation
Rol
UX/UI Designer
Período
2015–2016
Scope
Web responsive · Create / Launch / Manage / Analyze

Más que un creador de formularios

Suonper cubría un ciclo completo: diseñar la encuesta, elegir cómo distribuirla, recolectar respuestas —incluso offline—, sincronizarlas y analizar resultados desde un mismo producto.

Dashboard

Centro de control del ciclo de vida de la encuesta

  1. Create

    Diseñar y configurar la encuesta.

  2. Launch

    Elegir cómo distribuirla.

  3. Collect

    Recolectar respuestas por múltiples canales.

    • Web
    • Email
    • Social
    • Embedded
    • Mobile
    • Offline

  4. Sync

    Sincronizar información recolectada offline.

  5. Analyze

    Resultados, segmentación, geografía y participación.

A capable product, fragmented across many surfaces.

Un producto que había evolucionado en direcciones diferentes

Cuando me incorporé, Suonper ya no era un creador de formularios: era un sistema amplio y ramificado. El mapa de flujo histórico documenta esa arquitectura completa —antes del rediseño— con cuatro áreas que ya convivían en el producto.

Mapa de flujo histórico de Suonper, con las áreas Manage, Create, Launch y Analyze.
Mapa de flujo histórico de Suonper. Documenta la arquitectura del producto antes del rediseño; no es un diagrama reconstruido.

  • Manage

    Dashboard, participantes y estados: el centro de control al que se volvía después de crear, lanzar o analizar.

  • Create

    New → Bienvenida → Datos requeridos → Preguntas → Panel → Vista previa.

  • Launch

    El Launcher conectaba la encuesta con mail, mobile, Facebook, Twitter, blog y otros canales.

  • Analyze

    Informes y resultados distintos según el tipo de pregunta: de síntesis y escalas a mapas y opiniones.

Detalle del mapa histórico

Create

Detalle del mapa histórico: flujo Create de Suonper.
Detalle del mapa histórico — Create

Launcher

Detalle del mapa histórico: Launcher y canales de distribución.
Detalle del mapa histórico — Launcher

Reports

Detalle del mapa histórico: informes y resultados por tipo de pregunta.
Detalle del mapa histórico — Reports

Una experiencia web de otra etapa

La capa web pertenecía a una etapa anterior del producto. Esta captura muestra la home pública de entonces —una landing extensa, con varios mensajes compitiendo—; no es Dashboard ni Create.

Home pública de Suonper antes de simplificar la propuesta de valor, con varios mensajes y llamados a la acción.
Home pública de Suonper antes de simplificar la propuesta. Evidencia de la capa web/marketing, no de Dashboard o Create.

El iPad como dirección emergente

Al mismo tiempo, la aplicación más reciente para iPad ya empezaba a definir una dirección visual y de interacción diferente. El trabajo no era cambiar la apariencia de la web: era acercar esas superficies y construir una experiencia coherente a medida que la plataforma crecía.

iPad direction — asset pending

  1. 01

    Complex legacy system

  2. 02

    Fragmented visual experience

  3. 03

    iPad as emerging direction

  4. 04

    Unified responsive product

Entender dónde aparecía la fricción

Proto-personas

Las proto-personas se armaron a partir del conocimiento interno acumulado por el equipo. No fueron personas resultantes de entrevistas formales.

Clientes principales

  • Consultoras
  • Consultoras de Recursos Humanos
  • Organizaciones que trabajaban para empresas grandes

Segmentos explorados También se exploraban segmentos potenciales como profesionales independientes.

  • Victoria Gianone

    Recursos Humanos

    Consultora de RR. HH.

  • Andrés Ricciardi

    Diseñador Freelance

    Profesional independiente

  • María Daniela

    Directora de Comunicaciones

    Organización / consultora

Journey

  1. Home

  2. Registro

    Demasiada fricción antes de entrar al producto.

  3. Dashboard

    Muchos elementos competían por la atención.

  4. New Survey

    La creación podía percibirse como un proceso largo.

  5. Launcher

    No resultaba claro cómo activar la encuesta y obtener el link.

Del iPad hacia un lenguaje compartido

La aplicación para iPad funcionó como una referencia importante para el rediseño.

El trabajo consistió en traducir esa dirección hacia una experiencia web responsive y extender progresivamente patrones visuales e interactivos al resto de la plataforma.

Lenguaje compartido de producto

  • Tipografía liviana y jerarquía de información
  • Cards y módulos
  • Azul como lenguaje principal de acción e información
  • Iconografía circular
  • Onboarding contextual
  • Navegación más orientada a tareas

iPad

iPad direction — asset pending

Web responsive

Editor de cuestionario de Suonper con tooltip de onboarding sobre consultas.

Convertir configuración en un proceso guiado

Crear una encuesta implicaba combinar distintos tipos de preguntas, configuración, información requerida y decisiones de presentación.

En lugar de exponer todas las opciones simultáneamente, la experiencia se organizó como una secuencia explícita de etapas.

La configuración disponible también cambiaba según el tipo de pregunta seleccionada.

  1. Define

  2. Welcome

  3. Required data

  4. Questionnaire

  5. Review

Pantalla Define tu encuesta en Suonper: nombre, categoría y fechas.
Define tu encuesta
Bienvenidos
Datos requeridos
Editor de cuestionario de Suonper con tooltip de onboarding sobre consultas.
Cuestionario
Cuestionario Suonper con Multi Slider y panel de configuración.
Cuestionario · Multi slider
Revisión de pantallas de una encuesta en Suonper, con onboarding contextual.
Revisión

Una encuesta, múltiples formas de llegar a las personas

Crear el cuestionario era solo una parte del proceso.

El Launcher conectaba la encuesta con los diferentes canales disponibles para recolectar respuestas.

El Launcher aparecía como uno de los principales puntos de fricción porque no siempre quedaba claro cómo habilitar una encuesta o recuperar el link para compartirla.

Survey

Launcher

  • Web
  • Email
  • Mobile
  • Social
  • Embedded
  • Offline
Launcher — asset pending

El Dashboard como centro de control

El Dashboard reunía las encuestas creadas por el usuario, su estado y los accesos hacia las siguientes acciones del ciclo.

Era el punto de retorno del producto: desde allí se podía crear una encuesta nueva, continuar trabajando sobre una existente, lanzarla o acceder a sus resultados.

Modelo del producto, dentro de la interfaz

  1. Visita tu dashboard

  2. Crea una encuesta

  3. Elige cómo lanzarla

  4. Ve los informes

Dashboard — asset pending

Transformar respuestas en información

El reporting se leía en capas. Los filtros globales recortaban el universo; el overview mostraba el estado general; desde ahí se bajaba a categorías, a preguntas individuales y a la segmentación por perfil.

  1. Global filters

  2. Overview

  3. Category

  4. Question

  5. Segmentation

Global filters

Demografía, ciudad, fecha, horario y duración definían el recorte antes de leer cualquier gráfico. El datepicker permitía elegir un rango.

Filtros globales de informes Suonper con el datepicker de agosto 2015 abierto.

Overview

El Dashboard de Informes Generales reunía participación, resúmenes cualitativos y cuantitativos en un mismo tablero.

Overview del Dashboard de Informes Generales de Suonper.

Category

Los informes cualitativos agregaban resultados por categoría, con barras que comparaban el conjunto.

Informes cualitativos de Suonper: resultados por categoría.

Question

Cada pregunta podía abrirse para ver las opciones. La configuración visual cambiaba entre el total y el detalle.

Informes cualitativos de Suonper: resultados por pregunta con detalle de opciones.

Segmentation

Los mismos resultados se cruzaban por sexo, estado civil y rango de edad.

Segmentación de resultados por sexo, estado civil y rango de edad.

Diseñando dentro del equipo de producto

El trabajo no terminaba en producir pantallas.

Trabajé junto al equipo de desarrollo mientras el producto evolucionaba: iterando workflows existentes, definiendo nuevas funcionalidades e implementando una parte importante de la interfaz responsive.

Public-facing experience

Llevar el modelo del producto hacia la web

El rediseño no terminó dentro de la aplicación. También reconstruimos la presencia pública de Suonper para que explicara el producto con la misma lógica con la que se usaba.

La web anterior presentaba muchas capacidades de manera relativamente independiente. La nueva versión simplificó esa historia alrededor de cuatro momentos: crear, lanzar, recolectar y analizar.

Así, marketing y producto comenzaron a compartir un mismo modelo mental.

Before

Una landing extensa, con múltiples features y mensajes compitiendo por atención.

Home pública de Suonper antes de simplificar la propuesta de valor, con varios mensajes y llamados a la acción.

After

Una historia de producto organizada alrededor del flujo principal.

Web comercial de Suonper: paso Create, diseñar la encuesta.

Un mismo producto, una historia más simple

Hacia afuera: Create → Launch → Collect → Analyze. Dentro del producto: Manage → Create → Launch → Analyze.

  1. CREATE

    Diseñar la encuesta.

    Web comercial de Suonper: 1. Crea — diseñar la encuesta.

  2. LAUNCH

    Elegir cómo distribuirla.

    Web comercial de Suonper: 2. Lanza — elegir cómo distribuirla.

  3. COLLECT

    Recolectar respuestas por web, mobile y offline.

    Web comercial de Suonper: 3. Recoge — recolectar respuestas.

  4. ANALYZE

    Convertir respuestas en información.

    Web comercial de Suonper: 4. Analiza — entender los resultados.
Grabación histórica de la web comercial de Suonper, navegada en Chrome.

Lo que aprendí diseñando Suonper

Discoverability is contextual

Una función no tiene que vivir solo en el menú

En aquel momento fui entendiendo que una funcionalidad no debía existir únicamente como opción de navegación. Mostrar “actualizar plan” junto a información sobre el uso o la cuenta podía tener mucho más sentido que limitarse a tener “Pricing” en el menú principal.

Visual simplicity ≠ cognitive simplicity

Menos elementos no siempre es menos ambigüedad

En esa etapa teníamos una influencia fuerte de iOS y asumíamos que reemplazar acciones por iconos simplificaba la interfaz. Hoy lo abordaría de otra manera: reducir elementos visuales no significa necesariamente reducir ambigüedad o carga cognitiva.

Construir coherencia mientras el producto crecía

Suonper fue uno de los proyectos donde empecé a pensar una interfaz como sistema y no como una colección de pantallas.

El trabajo conectó creación, distribución, gestión y análisis mediante una experiencia web responsive y un lenguaje más coherente entre web y mobile. Ese mismo modelo terminó extendiéndose también hacia la presencia pública del producto, alineando la experiencia de uso con la forma en que Suonper se explicaba hacia afuera.

Revisión de pantallas de una encuesta en Suonper, con onboarding contextual.
Cuestionario Suonper con Multi Slider y panel de configuración.

Siguiente proyecto

Discoin

Diseño de una billetera digital de recompensas y pagos para comercio local.

Seguir