Cubicup — UX Case study

Carlos Beneyto
Productea
Published in
5 min readOct 30, 2018

Cubicup es un portal de reformas inmobiliarias online, el objetivo de dicho portal es ofrecer la soluciones de reformas en el modelo “llave en mano”.

Cubicup actua como intermediario de principales empresas de reformas de las ciudades donde está disponible.

Reto

El reto fue hacer que Cubicup destacara sobre las demás haciendo foco en la función solicitar presupuesto y su planteamiento. Mostrando la capacidad creativa y digital de un sector tradicional y analógico.

Herramientas:

  • ✐ Papel y lápiz > Ideas, palabras, wireframes de baja densidad.
  • 💠 Overflow > Creación de flujo de pantallas.
  • 💎 Sketch > Wireframes de alta fidelidad y mockups
  • 🖥 Flinto > Prototipado animado.
  • 📂 Zeplin > Entrega a desarrollo.

Propuesta de valor

Cubicup te encuentra el mejor profesional para tu reforma, donde te acompañamos de principio a fin.

Proceso de trabajo

Proceso de trabajo de Productea con Cubicup.

Competidores

Para comenzar mi investigación, comencé a mirar a algunos competidores o plataformas similares, analizando UI, UX, flujo de usuarios, IA y características clave. No voy a entrar en detalles sin embargo, ya que quiero mantener el foco en la investigación que se ha hecho en Cubicup.

El principal competidor donde nos basamos (pues Cubicup es un copycat de este) es Travauxlib.

Este es el diseño y planteamiento de producto del competidor.

Diseño de Travauixlib en Agosto 2018

Nos encontramos con un servicio minimalista, que no ofrece referencia gráfica del trabajo que hace (imágenes, vídeos, gráficos, etc…)

Sin embargo si muestra las principales acciones en la zona “hero” del producto, además muestran imágenes de referencia (logos) de los principales medios. Buscan ofrecer seriedad.

Dicho esto vamos a plantear este servicio en nuestro mercado.

Escenarios

Dentro de los múltiples escenarios que podríamos manejar en la creación del nuevo producto, existen 3 casos clave que deberíamos tener en cuenta para su proceso de creación.

En este caso planteamos que el caso más acertado para desarrollar el nuevo producto es el escenario dos.

El cliente sabe lo que quiere, y sabe cuando lo quiere, pero no tiene tan claro lo que le cuesta, y su proceso de creación.

Mantenemos esta hipótesis porque creemos que es el planteamiento más acertado, la búsqueda online tiende a ser el principal principio para comparar precios. Cubicup, es ese player.

Los otros escenarios no debemos de obviarlos, simplemente trasladar el mejor escenario en el producto.

Personas

Sacando ese escenario, obtenemos una serie de perfiles (personas) como potenciales clientes del servicio de Cubicup.

Diseño actual

El diseño actual de Cubicup está basado en un template de Wordpress, pues esta es la base principal de la plataforma.

Este diseño tiene diferentes problemas a nivel producto y UX, tales como:

  • Tipología de fuentes
  • Densidad de menu
  • Diferentes CTAs activos
  • Proyectos realizados no tienen vida
Diseño de la plataforma actual. Agosto 2018.

Problemas

He recibido buenos consejos de los comentarios de los usuarios que no han puesto de relieve cuestiones relevantes sobre la usabilidad o las funcionalidades.

He clasificado las quejas en 4 categorías:

  • Propuesta valor
  • Ver referencias de trabajos realizados
  • Mostrar mayor creatividad
  • Proceso más personalizado
  • Mejorar proceso selección de compañía

Soluciones

Empezamos a contemplar diferentes opciones y soluciones para estos problemas, empezamos con el proceso de wireframing.

Creación de wireframing de Cubicup

Planteamos el wireframe con la siguiente estructura.

  • Menú (sin acción principal)
  • Propuesta valor con imagen > Ver valor
  • Selección de opciones (acción principal) > Acción
  • Funcionamiento de la plataforma > Proceso
  • Referencias / valoraciones de cubicup > Confianza
  • Nuestros trabajos > Inspiración
  • Trabajar con cubicup > Profesionalidad
  • Footer > Ayuda

Es la estructura más optima.

Prototipo

Una vez planteado este wireframe pasamos al prototipo de alta fidelidad, manteniendo la estructura arriba citada.

El planteamiento que se ofrece es de algo moderno, creativo y vivo. Con firmas no perfectas, fuente curva, y alto contraste (blanco > negro).

Detalles del prototipo

Una propuesta de valor rápida y directa, con las 3 acciones principales (al menos las acciones actuales) directamente a un clic de distancia.

Los detalles de como funciona el proceso de Cubicup, desde un punto de vista claro y rápido. Haciendo foco en cada etapa.

El sistema de valoración ofreciendo un claim claro, con diferentes valoraciones en formato slide, pero que se muestre más de una opción.

El área de destaque, es el area de inspiración, donde se mostrará el potencial y capacidad de Cubicup.

Debe de demostrar capacidad creativa, por eso se muestra a pantalla completa, con un filtro visual de acciones.

El objetivo es que cuando se mueva el slide, se actualice los filtros inferiores a nivel diseño.

Confianza, mostramos las marcas (importantes y reconocidas) con las que trabaja Cubicup.

Por una parte al cliente de demostramos que solo aceptamos lo mejor de lo mejor en Cubicup. Además ofrecemos un enlace para los profesionales que deseen trabajar con Cubicup.

Footer de las acciones principales, difusores de contenidos y ayuda a clientes.

Todos marcados en diferentes categorías, además perfecto para el potencial SEO que pueda ofrecer la plataforma.

Resultado final

Dribble Cubicup animation. © Productea.

Cubicup ha lanzado su plataforma al público en general en Octubre 2018, mejorando su proceso de captación

En cuanto tengamos datos de Google Analytics y primeras impresiones actualizaré el post.

--

--

Carlos Beneyto
Productea

💼 Product guy @ Idealista / Inmovilla. Entrepreneur. Digital problem solver. Father (x1), rugbier and fall in love with #nocode. #startup #product #ai