Rediseños web

DICE.fm

DICE.fm es una plataforma innovadora que se especializa en la venta de entradas para eventos en vivo, ofreciendo una experiencia de usuario fluida y segura. Su enfoque principal es conectar a los aficionados con eventos musicales, culturales y de entretenimiento que se ajusten a sus intereses. La plataforma utiliza tecnología avanzada para proporcionar recomendaciones personalizadas y garantizar que los usuarios tengan acceso a entradas sin sobreprecios. Además, DICE.fm se compromete con la inclusión y accesibilidad, asegurando que los eventos sean disfrutables para todos.

Imagen de la página web que posee actualmente Dice.fm

Briefing

  • Una landing para un concierto respetando el diseño actual de la plataforma.
  • El rediseño y mejora del proceso de compra de la entrada, ya que el actual muestra problemas en la conversión ya que te solicita el teléfono y requiere la instalación de la app. Hay que implementar un proceso más sencillo, intuitivo y adaptado a los patrones más habituales.

Objetivos

¡Comencemos en solo unos simples pasos!

1

Diseñar la landing del concierto manteniendo la estética actual.

2

Rediseñar el proceso de compra para hacerlo más adaptado a patrones de interacción más comunes.

3

Debido al tráfico de la web de Dice se diseñará en desktop y mobile (Web Responsive) .

Roadmap

Primer sprint

  • Benchmark de competidores directos
  • Wireflow

Segundo sprint

  • UI Kit (Grids, tipografías y colores)
  • Plantillas y componentes

Tercer sprint

  • Prototipado
  • Presentación

Primer sprint

Benchmark de los principales competidores.
  • Todas las páginas disponen de confirmación de pago.
  • Se da la posibilidad de acceder y comprar como invitado sin necesidad de ningún tipo de registro.
  • Se accede al proceso de pago generalmente en 2 pasos si dispones de registro y 4 si es como invitado.
  • Las páginas que no se dedican exclusivamente al tipo de negocio por lo general dan menos opciones de pago.
  • Todas disponen como método de pago la tarjeta bancaria.
  • Por lo general en todas se puede acceder a los detalles de la compra en la misma pantalla.
  • En la competencia directa utilizan un «timer» para saber de cuanto tiempo disponen para finalizar la compra.

Wireflow

Imagen del wireflow representando el Incio/Landing

Inicio / Landing

Imagen del wireflow representando el inicio de sesión

Inicio de sesión

Imagen del wireflow representando la pasarela de pagos

Datos de pago

Imagen del wireflow representando el Resumen del pago y finalización del proceso

Resumen y pago

Imagen del wireflow representando la confirmación del pago

Confirmación

Segundo sprint

UI Kit

Imagen de UI Kit : Iconos

Iconos

Imagen de UI Kit : Grids

Grids

Imagen de UI Kit : Tipografía desktop

Tipografía desktop

Imagen de UI Kit : Tipografía mobile

Tipografía mobile

Imagen de UI Kit : Colores

Colores

Plantillas y componentes

Imagen de plantillas y componentes

Tercer sprint

Prototipo desktop

Imagen de las distintas capturas que conforman el prototipo desktop

Prototipo mobile

Imagen de las distintas capturas que conforman el prototipo mobile

Tema moDesign por Juan José Martínez

Impulsado por WordPress