Web redesign: Optimising the user experience

Web redesign: Optimising the user experience

Web redesign: Optimising the user experience

Case study for redesign the Web App

Caso de estudio para rediseñar la Web App

Case study for redesign the Web App

Caso de estudio para rediseñar la Web App

Case study for redesign the Web App

Caso de estudio para rediseñar la Web App

DICE

DICE

DICE

UX | UI Design,

Case Study

UX | UI Design,

Case Study

Overview
Contexto

Overview
Contexto

Overview
Contexto

The DICE ticket sales platform faces significant challenges in its web design that negatively impact the user experience. These challenges manifest themselves in a complex interface, poor visibility of events, and a lack of mobile optimisation.

In response to these challenges, we have proposed the study presented below.

La plataforma de venta de entradas DICE enfrenta desafíos significativos en su diseño web que perjudican la experiencia del usuario. Estos se manifiestan en una interfaz compleja y poca visibilidad de los eventos.

En respuesta a estos desafíos, hemos propuesto el estudio que se presenta a continuación.

The DICE ticket sales platform faces significant challenges in its web design that negatively impact the user experience. These challenges manifest themselves in a complex interface, poor visibility of events, and a lack of mobile optimisation.

In response to these challenges, we have proposed the study presented below.

La plataforma de venta de entradas DICE enfrenta desafíos significativos en su diseño web que perjudican la experiencia del usuario. Estos se manifiestan en una interfaz compleja y poca visibilidad de los eventos.

En respuesta a estos desafíos, hemos propuesto el estudio que se presenta a continuación.

Year

2024

Year

2024

Year

2024

Company

DICE

Company

DICE

Company

DICE

Project

Personal

Project

Personal

Project

Personal

Methodology
Metodología

Methodology
Metodología

Methodology
Metodología

UX Research

Benchmark

UX Research

Benchmark

UX Research

Benchmark

Design System and UI Design

UI Kit Fundations and components, prototipe and mockups

Design System and UI Design

UI Kit Fundations and components, prototipe and mockups

Design System and UI Design

UI Kit Fundations and components, prototipe and mockups

Objetives
Objetivos

Objetives
Objetivos

Objetives
Objetivos

Improve interface functionality: Simplify navigation and web design to reduce user confusion and make it easier to find information

Mejorar la funcionalidad de la interfaz: Simplificar la navegación y el diseño de la web para reducir la confusión del usuario y facilitar la búsqueda de información

Improve interface functionality: Simplify navigation and web design to reduce user confusion and make it easier to find information

Mejorar la funcionalidad de la interfaz: Simplificar la navegación y el diseño de la web para reducir la confusión del usuario y facilitar la búsqueda de información

Improve interface functionality: Simplify navigation and web design to reduce user confusion and make it easier to find information

Mejorar la funcionalidad de la interfaz: Simplificar la navegación y el diseño de la web para reducir la confusión del usuario y facilitar la búsqueda de información

Highlight key events and offers more effectively so that users can easily discover them

Destacar de manera más efectiva los eventos clave y las ofertas para que los usuarios los descubran fácilmente

Highlight key events and offers more effectively so that users can easily discover them

Destacar de manera más efectiva los eventos clave y las ofertas para que los usuarios los descubran fácilmente

Highlight key events and offers more effectively so that users can easily discover them

Destacar de manera más efectiva los eventos clave y las ofertas para que los usuarios los descubran fácilmente

Optimise the website design for mobile devices to increase conversion rates and sales

Optimizar el diseño del sitio web para dispositivos móviles y así aumentar la tasa de conversión y las ventas

Optimise the website design for mobile devices to increase conversion rates and sales

Optimizar el diseño del sitio web para dispositivos móviles y así aumentar la tasa de conversión y las ventas

Optimise the website design for mobile devices to increase conversion rates and sales

Optimizar el diseño del sitio web para dispositivos móviles y así aumentar la tasa de conversión y las ventas

Tools
Herramientas

Tools
Herramientas

Tools
Herramientas

Figma

Figma

Figma

FigJam

FigJam

FigJam

Product Detail Page (PDP) Design
Product Detail Page (PDP) Design
Product Detail Page (PDP) Design

UX Research

UX Research

UX Research

Benchmark | Findings | Conclusions
Análisis de competidores | Hallazgos | Conclusiones

Benchmark | Findings | Conclusions
Análisis de competidores | Hallazgos | Conclusiones

Benchmark | Findings | Conclusions
Análisis de competidores | Hallazgos | Conclusiones

Analysis
Análisis

With the aim of restructuring DICE's web design while maintaining its aesthetics and personality, we have focused our research on a comparative analysis. To do this, we have focused on the DICE platform and those of its competitors, both direct and indirect.

Con el objetivo de reestructurar el diseño web de DICE manteniendo su estética y personalidad, hemos centrado nuestra investigación en un análisis comparativo. Para ello, hemos hecho foco en la plataforma de DICE y la de sus competidores, tanto directos como indirectos.

Direct and indirect competitors
Competidores directos e indirectos

Findings
Hallazgos

  • Improve the design and usability of the homepage: unify the layout for a cleaner look and highlight the main section, including a search engine to facilitate navigation.

  • Increase the size of the ticket sales selection and highlight the selected artist more.

  • Purchase process: simplify the journey and improve the breadcrumb to help users to find each step.

  • It is proposed to eliminate the requirement to download the app to purchase tickets, which will streamline the process and reduce barriers for users.

  • Mejorar el diseño y la usabilidad de la homepage: unificar las medidas para un aspecto más limpio y destacar la sección principal, incluyendo un buscador para facilitar la navegación.

  • Aumentar el tamaño de la selección de venta de entradas y resaltar más al artista seleccionado.

  • Proceso de compra: simplificar el recorrido y mejorar el breadcrumb para ayudar al usuario a situarse en cada paso.

  • Se propone eliminar la obligación de descargar la aplicación para comprar entradas, lo que agilizará el proceso y reducirá las barreras para el usuario.

Product Detail Page (PDP) Design
Product Detail Page (PDP) Design
Product Detail Page (PDP) Design

Conclusions
Conclusiones

Our redesign offers a simplified user experience and an improved purchasing process, with an responsive design approach that guarantees access from any device.

Nuestro rediseño propone una experiencia de usuario simplificada y un proceso de compra mejorado, con un enfoque en responsive design que garantiza el acceso desde cualquier dispositivo.


Product Detail Page (PDP) Design
Product Detail Page (PDP) Design
Product Detail Page (PDP) Design

Design sistem and UI design

Design sistem and UI design

Design sistem and UI design

UI Kit foundations and components | Prototipe
UI Kit fundamentos y componentes I Prototipo

UI Kit foundations and components | Prototipe
UI Kit fundamentos y componentes I Prototipo

UI Kit foundations and components | Prototipe
UI Kit fundamentos y componentes I Prototipo

UI design
Diseño de interfaz

Homepage

• Highlight important events so they are easy to find I Destacar eventos importantes para que sean fáciles de encontrar

• Highlight important events so they are easy to find I Destacar eventos importantes para que sean fáciles de encontrar

• Highlight important events so they are easy to find I Destacar eventos importantes para que sean fáciles de encontrar

• Use the search bar in the main section as a shortcut I Usar la barra de búsqueda en la sección principal como un acceso directo

• Use the search bar in the main section as a shortcut I Usar la barra de búsqueda en la sección principal como un acceso directo

• Use the search bar in the main section as a shortcut I Usar la barra de búsqueda en la sección principal como un acceso directo

Product Detail Page (PDP) Design
Product Detail Page (PDP) Design
Product Detail Page (PDP) Design

Artist's Gallery Proceso de compra

• Simplify the purchasing process for a better experience I Simplificar el proceso de compra para una mejor experiencia

• Simplify the purchasing process for a better experience I Simplificar el proceso de compra para una mejor experiencia

• Simplify the purchasing process for a better experience I Simplificar el proceso de compra para una mejor experiencia

• Add a breadcrumb that syncs with each step of the purchase process I Añadir un "breadcrumb" que se sincronice con cada paso del proceso de compra

• Add a breadcrumb that syncs with each step of the purchase process I Añadir un "breadcrumb" que se sincronice con cada paso del proceso de compra

• Add a breadcrumb that syncs with each step of the purchase process I Añadir un "breadcrumb" que se sincronice con cada paso del proceso de compra

Next Steps
Próximos pasos

Next Steps
Próximos pasos

Next Steps
Próximos pasos

Group proyect I Proyecto grupal: Karen, Claudia, Berta, Javier y Laura. (Uxer School) 2024

Group proyect I Proyecto grupal: Karen, Claudia, Berta, Javier y Laura. (Uxer School) 2024

Group proyect I Proyecto grupal: Karen, Claudia, Berta, Javier y Laura. (Uxer School) 2024