2015–2016 · SaaS / Survey Platform

Suonper

Unifying a web & mobile platform for creating, distributing and analyzing surveys.

Suonper was a multi-channel platform for creating surveys, collecting responses through the web and mobile devices —including offline fieldwork— and analyzing results from a central platform.

I redesigned and reimplemented the web experience as a responsive interface, carrying the visual and interaction language that was taking shape in the iPad app across the rest of the product.

  • Product Design
  • Interaction Design
  • Information Architecture
  • Responsive Web
  • UI Design
  • Front-end implementation
Role
UX/UI Designer
Period
2015–2016
Scope
Responsive web · Create / Launch / Manage / Analyze

More than a form builder

Suonper covered a full cycle: design the survey, choose how to distribute it, collect responses —including offline—, sync them, and analyze results from a single product.

Dashboard

Control center for the survey lifecycle

  1. Create

    Design and configure the survey.

  2. Launch

    Choose how to distribute it.

  3. Collect

    Collect responses across multiple channels.

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

  4. Sync

    Sync information collected offline.

  5. Analyze

    Results, segmentation, geography and participation.

A capable product, fragmented across many surfaces.

A product that had evolved in different directions

When I joined, Suonper was no longer a form builder: it was a wide, branched system. The historical flow map documents that full architecture —before the redesign— with four areas that already coexisted in the product.

Mapa de flujo histórico de Suonper, con las áreas Manage, Create, Launch y Analyze.
Historical Suonper flow map. It documents the product architecture before the redesign; it is not a reconstructed diagram.

  • Manage

    Dashboard, participants and statuses: the control center you returned to after creating, launching or analyzing.

  • Create

    New → Welcome → Required data → Questions → Panel → Preview.

  • Launch

    The Launcher connected the survey to mail, mobile, Facebook, Twitter, blog and other channels.

  • Analyze

    Reports and different results by question type: from summaries and scales to maps and open answers.

Detail from the historical map

Create

Detalle del mapa histórico: flujo Create de Suonper.
Detail from the historical map — Create

Launcher

Detalle del mapa histórico: Launcher y canales de distribución.
Detail from the historical map — Launcher

Reports

Detalle del mapa histórico: informes y resultados por tipo de pregunta.
Detail from the historical map — Reports

A web experience from an earlier stage

The web layer belonged to an earlier stage of the product. This capture shows the public homepage of that moment —a long landing, with several messages competing—; it is not Dashboard or Create.

Home pública de Suonper antes de simplificar la propuesta de valor, con varios mensajes y llamados a la acción.
Suonper public homepage before the value proposition was simplified. Evidence of the web/marketing layer, not of Dashboard or Create.

iPad as an emerging direction

At the same time, the more recent iPad app was already starting to define a different visual and interaction direction. The work was not to change how the web looked: it was to bring those surfaces closer together and build a coherent experience as the platform grew.

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

Understanding where friction showed up

Proto-personas

The proto-personas were built from internal knowledge accumulated by the team. They were not personas resulting from formal interviews.

Main clients

  • Consultancies
  • HR consultancies
  • Organizations working for large companies

Explored segments Potential segments such as independent professionals were also explored.

  • Victoria Gianone

    Human Resources

    HR consultancy

  • Andrés Ricciardi

    Freelance designer

    Independent professional

  • María Daniela

    Communications Director

    Organization / consultancy

Journey

  1. Home

  2. Registration

    Too much friction before entering the product.

  3. Dashboard

    Too many elements competed for attention.

  4. New Survey

    Creation could feel like a long process.

  5. Launcher

    It was not always clear how to activate the survey and get the link.

From iPad toward a shared product language

The iPad app was an important reference for the redesign.

The work was to translate that direction into a responsive web experience and progressively extend visual and interaction patterns across the rest of the platform.

Shared product language

  • Light typography and information hierarchy
  • Cards and modules
  • Blue as the main language for action and information
  • Circular iconography
  • Contextual onboarding
  • More task-oriented navigation

iPad

iPad direction — asset pending

Responsive web

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

Turning configuration into a guided process

Creating a survey meant combining question types, configuration, required information and presentation decisions.

Instead of exposing every option at once, the experience was organized as an explicit sequence of stages.

Available configuration also changed according to the selected question type.

  1. Define

  2. Welcome

  3. Required data

  4. Questionnaire

  5. Review

Pantalla Define tu encuesta en Suonper: nombre, categoría y fechas.
Define your survey
Welcome
Required data
Editor de cuestionario de Suonper con tooltip de onboarding sobre consultas.
Questionnaire
Cuestionario Suonper con Multi Slider y panel de configuración.
Questionnaire · Multi slider
Revisión de pantallas de una encuesta en Suonper, con onboarding contextual.
Review

One survey, many ways to reach people

Building the questionnaire was only one part of the process.

The Launcher connected the survey with the different channels available to collect responses.

The Launcher showed up as one of the main friction points because it was not always clear how to enable a survey or recover the link to share it.

Survey

Launcher

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

The Dashboard as a control center

The Dashboard brought together the surveys created by the user, their status, and access to the next actions in the cycle.

It was the product’s return point: from there you could create a new survey, keep working on an existing one, launch it, or open its results.

The product model, taught inside the interface

  1. Visit your dashboard

  2. Create a survey

  3. Choose how to launch it

  4. See the reports

Dashboard — asset pending

Turning responses into information

Reporting was read in layers. Global filters narrowed the set; the overview showed the overall state; from there you could drop into categories, individual questions and profile segmentation.

  1. Global filters

  2. Overview

  3. Category

  4. Question

  5. Segmentation

Global filters

Demographics, city, date, time and duration defined the cut before any chart was read. The datepicker let you choose a range.

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

Overview

The General Reports Dashboard brought together participation, qualitative and quantitative summaries in a single board.

Overview del Dashboard de Informes Generales de Suonper.

Category

Qualitative reports aggregated results by category, with bars comparing the set.

Informes cualitativos de Suonper: resultados por categoría.

Question

Each question could be opened to see its options. The visual treatment changed between the total and the detail.

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

Segmentation

The same results were crossed by sex, marital status and age range.

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

Designing inside the product team

The work did not stop at producing screens.

I worked alongside the development team as the product evolved: iterating existing workflows, defining new functionality, and implementing a substantial part of the responsive interface.

Public-facing experience

Taking the product model to the website

The redesign did not end inside the application. We also rebuilt Suonper’s public presence so it explained the product with the same logic with which it was used.

The previous website presented many capabilities in a relatively independent way. The new version simplified that story around four moments: create, launch, collect and analyze.

Marketing and product began to share the same mental model.

Before

A long landing page, with multiple features and messages competing for attention.

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

After

A product story organized around the main flow.

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

One product, a simpler story

Outward-facing: Create → Launch → Collect → Analyze. Inside the product: Manage → Create → Launch → Analyze.

  1. CREATE

    Design the survey.

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

  2. LAUNCH

    Choose how to distribute it.

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

  3. COLLECT

    Collect responses on web, mobile and offline.

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

  4. ANALYZE

    Turn responses into information.

    Web comercial de Suonper: 4. Analiza — entender los resultados.
Historical recording of Suonper’s commercial website, browsed in Chrome.

What I learned designing Suonper

Discoverability is contextual

A feature does not have to live only in the menu

At the time I was starting to understand that a capability should not exist only as a navigation option. Showing “update plan” next to usage or account information could make much more sense than only having “Pricing” in the main menu.

Visual simplicity ≠ cognitive simplicity

Fewer elements are not always less ambiguity

At that stage we had a strong iOS influence and assumed that replacing actions with icons simplified the interface. I would approach it differently today: reducing visual elements does not necessarily reduce ambiguity or cognitive load.

Building coherence while the product grew

Suonper was one of the projects where I started thinking of an interface as a system rather than a collection of screens.

The work connected creation, distribution, management and analysis through a responsive web experience and a more coherent language between web and mobile. That same model then extended to the product’s public presence, aligning the experience of use with the way Suonper was explained to the outside.

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

Next project

Discoin

Designing a digital rewards and payments wallet for local commerce.

Continue