Conrad Connect
Página web corporativa para una innovadora plataforma IoT que permite a sus usuarios desbloquear todo el potencial de sus dispositivos inteligentes.
UX RESEARCH, UX/UI DESIGN
Año
2018-2019
Rol
UX/UI & Visual Design
Introducción

Conrad Connect es una plataforma IoT del grupo Conrad Electronic SE, un importante minorista de productos electrónicos en Alemania. La plataforma permite sacar el mayor provecho a mas de 3.000 dispositivos inteligentes, aplicaciones y servicios como Google Home, Garmin o Spotify. Los dispositivos pueden comunicarse entre sí a través del cloud computing, multiplicando así sus posibilidades y su utilidad integral.

Problema

El problema principal era la baja performance de la página web corporativa, siendo ésta importante como canal principal para dar a conocer la plataforma a los usuarios. No había una estructura clara y la interfaz no era intuitiva ni fácil de usar. Todos los gráficos y elementos visuales eran imágenes de Shutterstock. Además, no era responsive y no se adaptaba a los diferentes dispositivos con los que el usuario accedía y esto provocaba un problema realmente importante, ya que el 65% de los usuarios tenían acceso a la página web desde sus dispositivos móviles.

Objetivos de diseño

  • Definir una navegación clara para mejorar la experiencia del usuario
  • Responsiveness: una nueva versión móvil de la página web
  • Diseño de nuevos elementos intuitivos UI
  • Crear desde cero ilustraciones e iconos conceptuales

Objetivos de negocio

  • Aumentar el número de inscripciones
  • Mejorar la conversion rate
  • Mejorar el SEO ranking
Benchmarking

Comencé haciendo un estudio y análisis exhaustivo de nuestros principales competidores. En la primera fase, realicé un análisis general para entender cuáles son los principales criterios en los que se basaban nuestros competidores para convencer a un gran número de posibles usuarios potenciales para que se registrasen y utilizasen sus plataformas. La segunda fase consistió en un análisis específico para entender de qué manera nuestros competidores resolvían ciertos problemas de diseño. En este análisis específico, me centré principalmente en el diseño en términos generales: las interfaces de usuario, los elementos UI y la navegación.

El análisis y el benchmarking me ayudaron a familiarizarme mejor con el mercado actual de las plataformas IoT dedicadas a dispositivos inteligentes, descubrir las oportunidades de negocio y la diferenciación con la competencia. También fue muy útil en términos de diseño de interfaces porque pude descubrir cómo se han resuelto funcionalidades similares a nivel de interacción y diseño y cómo el mercado de las plataformas IoT sigue patrones similares.

Entender nuestros usuarios

Una vez sacadas las conclusiones del análisis, las compartí con mis compañerxs. Junto con el equipo de marketing, pasamos una semana entrevistando a cinco usuarios activos que cumplían con los requisitos de nuestro target. El equipo de marketing tenía acceso a datos cruciales que proporcionaban el rango de edad, género y ubicación de nuestros usuarios. Estos datos nos ayudaron a elegir a 5 de nuestros usuarios para entrevistarlos. Las preguntas se centraron en: qué esperaban de la página web, en qué contexto sentían la necesidad de abrirla, qué pasos seguían mientras la utilizaban y el nivel de conocimiento tecnológico. Gracias a las entrevistas que realizamos pudimos obtener una imagen general de nuestros usuarios y entender sus intereses, motivaciones y expectativas al utilizar Conrad Connect.

A partir de las entrevistas, desarrollamos cuatro personas que representaban las características que encontramos en nuestros usuarios durante las entrevistas. Estas personas me sirvieron de guía durante mi proceso de trabajo mientras tomaba decisiones de diseño.

Una de las personas que elaboramos fue Matthias, un varón de 38 años que representa a un grupo de usuarios que utiliza la plataforma para conectar sus dispositivos inteligentes a la plataforma y controlarlos a todos desde el mismo lugar.

Con la creación de personas, pude profundizar y entender las necesidades, actitudes y comportamientos de los potenciales usuarios y lo que éstos pueden esperar de la página web. Además, pude entender sus patrones de comportamiento y esto me ayudó a definir flujos de interacción dependiendo del contexto de cada persona y mapear sus user journeys mientras utilizan el sitio web.

Solución

En primer lugar, decidimos sobre el contenido y las secciones que la página web debía mostrar para cumplir con nuestros objetivos. Una vez que el equipo de marketing decidió el contenido final, comencé a definir la navegación. Para ello, construí este site map.

Una vez vi cómo encajaría el contenido en cada página y definida la estructura del sitio web, elaboré los diferentes user flows con la ayuda de las personas que desarrollamos anteriormente. Los user flows que mapeé me ayudaron a entender el comportamiento de los usuarios al usar la página web y cómo ésta puede satisfacer sus necesidades dependiendo del contexto.

Ejecución del diseño

Después de definir la estructura final, empecé a dibujar los primeros wireframes. Como el 65% de los usuarios tenían acceso a la página web desde sus dispositivos móviles, empecé a dibujar la versión móvil. El siguiente paso fue proceder al diseño de la versión de escritorio. Trabajando primero en la versión móvil, me aseguré de que el sitio web se adaptaría a cualquier dispositivo sin ningún problema.

Una vez terminados los primeros wireframes de baja fidelidad y validados con el equipo de marketing a través de prototipos clickeables, comencé a diseñar una interfaz de usuario optimizada. Concreté las características visuales esenciales de la página web: la tipografía, los colores corporativos, los iconos y los elementos UI. También diseñé todas las ilustraciones conceptuales para evitar imágenes de Shutterstock y hacer el sitio web más visual y entendedor.

Evaluación

Debido a nuestros límites de tiempo, no pudimos testear la nueva página web con usuarios reales. Nuestro equipo de Soporte al Cliente testeó el sitio web durante media semana bajo nuestra supervisión. Les dimos un conjunto de tareas para evaluar si la página web podía satisfacer las necesidades de los usuarios y completar los objetivos de negocio. La tarea principal era registrarse en la plataforma, ya que el objetivo era aumentar el número de inscripciones. Pude ver cómo el equipo de Soporte al Cliente podía resolver eficazmente la tarea que se le había encomendado. El primer input que tuvieron era registrarse en la plataforma.

Una vez finalizado este proceso de validación, nos aseguramos de que la conversion rate/performance del nuevo sitio web sería mucho mejor y de que el número de registros aumentaría.

Producto final

Después del proceso de validación, ajusté e hice algunos cambios hasta que llegué al producto final. El nuevo sitio web cuenta con una navegación clara e intuitiva, que permite a los usuarios tener una experiencia satisfactoria. Además, la nueva interfaz y los visuales ayudan a los usuarios a entender mejor de qué se trata la plataforma y, en consecuencia, a registrarse si no lo han hecho antes.

Resultados

La nueva página web tuvo un impacto positivo en la forma en que los usuarios la utilizan y se reflejó en los resultados del negocio.

66.72%
aumento el número de usuarios
69.98%
son nuevos usuarios
60011%
sesiones más largas
2.88%
menos tasa de rebote
59.69%
aumentan los registros
Equipo
UX/UI & Visual Design
Digital Marketing Specialist
Product Marketing Strategist
Back-end & Front-end Development
Mercedes EQC
Aplicación móvil que muestra a los usuarios cómo el nuevo vehículo electrónico Mercedes EQC puede adaptarse a sus hábitos y rutinas de la vida diaria.
UX RESEARCH, UX DESIGN