Catevering — Diseño de producto. UI/UX Case Study

Carlos Beneyto
Productea
Published in
5 min readJan 4, 2019
Nuevo product de Catevering

🇺🇸🇬🇧 First. Do you want read this article in English? Check it here.

Catevering

Compara, elige y reserva el mejor catering para tu empresa. Catevering es un “directorio” de caterings de las principales ciudades de España, donde puedes ver y comparar precios, servicios y tipos de comida y elegir el que mejor te funcione para tu empresa o evento. Catevering es una startup española, acelerada por Demium Startups.

Reto

El reto fue hacer que Catevering destacara sobre las demás haciendo foco en la función solicitar un catering para tu evento de forma rápida y legible. 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.

Competidores

Para comenzar mi investigación, comencé a mirar a algunos competidores o plataformas similares, analizando UI, UX, flujo de usuarios, AI 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 Catevering.

El principal competidor donde nos basamos es Caterwings.

Diseño actual de Caterwings. UK. Enero 2019.

Nos encontramos con un servicio minimalista, limpio y claro, que ofrece referencia gráfica del trabajo que hace (imagen de catering central)

Muestra la principal acción en la zona “hero” del producto, la acción de “Realizar un pedido”, con los datos (KPIs) principales para los clientes como número de platos servidos, vendedores, satisfacción, etc.

Dicho esto vamos a plantear este servicio en nuestro mercado.

Proceso

Como todo proceso de UX/UI empezamos con la investigación siguiendo las cinco fases de la metodología Design Thinking: Empatizar, definir, idear, prototipar y testar.

Proceso : Design Thinking.

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 no sabe lo que quiere, pero sabe cuando lo quiere, y sabe cuanto le cuesta (o lo que se quiere gastar).

Mantenemos esta hipótesis porque creemos que es el planteamiento más acertado para el caso de Catevering Online, hay que tener en cuenta que Catevering también vende bastante vía telefónica.

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 Catevering

Diseño actual

El diseño actual de Catevering está desarrollado internamente por el equipo de Catevering.

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

  • Fuente simple, falta de personalidad.
  • Densidad de información en el menú
  • Diferentes CTAs activos
  • Tipos de menú en el 3 scroll.
Diseño de Catevering. Diciembre 2018 Previo al redesign.

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
  • ¿Qué puedo pedir?
  • Proceso más personalizado
  • Proceso de compra

Soluciones

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

Diseño wireframing del nuevo Catevering.

Prototipo

Pasamos al UI, debemos definir la personalidad e identidad del producto y la marca, sin olvidarnos de lo más importante:

El diseño tiene que ser funcional.

Lo primero será buscar inspiración. Para ello construimos un Moodboard en base a nuestros atributos de marca, donde empezamos a definir colores, formas, texturas, tipografía, iconografía…

Moodboard de Catevering. Inspiración

Nuestros atributos: Comparar, Comida, Reservar, Calidad.

Con el moodboard pasamos a montar la estructura de colores y tipografía, con los colores era algo impuesto de la empresa (Catevering) con la tipografía tuvimos más libertad.

Colores y tipografía de Catevering.

Una vez planteado escenarios, personas, wireframes, moodboard, colores y tipografía, pasamos al prototipo de alta fidelidad, manteniendo la estructura arriba citada.

Buscamos ofrecer algo más moderno, creativo y que abra el apetito.

Obviamente dentro de todo el proceso hemos tenido en cuenta el diseño creativo del apartado mobile. Así de como todas las subsecciones, módulos o diferentes páginas de todo el producto.

Podéis ver más imágenes y detalles del proyecto en nuestro Behance.

https://www.behance.net/gallery/73884465/Catevering-Online-catering-sales-platform

Os dejamos algunas imágenes más de nuevo producto.

Catevering espera lanzar su plataforma al público en general en Febrero-Marzo 2019. Estaremos atentos del nuevo producto, sus comentarios, métricas y procesos.

Puedes visitar Catevering en: www.catevering.com

--

--

Carlos Beneyto
Productea

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