Diseño UX/UI para aplicaciones de software integradas para minoristas

La experiencia de una gasolinera totalmente integrada

Gasolineras

Aplicaciones integradas

Switzerland

Gasolinera de Zúrich (Suiza) donde se realizó la investigación de usuarios
LOCATIONSwitzerland
EQUIPODirector creativo, investigador de UX, diseñador de UX, diseñador de interacción, diseñador de UI, gestor de proyectos, gestor de entregas, arquitecto de software, propietario del producto

Como una de las principales redes de gasolineras de Suiza, ofrecen todo un mundo de comercios, incluidos supermercados, cafeterías y servicios para el automóvil.

El objetivo es mejorar la experiencia del cliente reduciendo las fricciones. Esto implica una revisión de la usabilidad del software de punto de venta utilizado por los cajeros y la introducción de una pantalla para el cliente en la caja. Yendo más allá de la experiencia clásica del punto de venta (TPV), querían diseñar una máquina de pago fuera de la tienda, una aplicación móvil y una app para carplay.

Contrataron a nuestra agencia de diseño UX/UI para apoyar este proyecto de diseño estratégico. Comenzamos con un exhaustivo trabajo de investigación de usuarios in situ en Suiza. A continuación, elaboramos un nuevo mapa de experiencia del cliente de extremo a extremo y diseñamos la UX y la UI de cada aplicación de punto de venta, una por una.

NUESTRAS CONTRIBUCIONES

Investigación de usuarios

UX design

Pruebas de usuarios

Creación de prototipos

UI Design - Design System

Arquitectura de la información

Garantía de calidad

La investigación se llevó a cabo en la gasolinera de Kloten, cerca de Zúrich.

ON SITE USER RESEARCH IN SWITZERLAND

El equipo de investigación de nuestra agencia de UX pasó una semana en Suiza para realizar una investigación de usuarios en gasolineras de los alrededores de Zúrich. Nos reunimos con supervisores de turno experimentados, jefes de estación y personas en formación.

Aplicamos una combinación de métodos de investigación de usuarios, tanto cuantitativos como cualitativos, para crear una imagen completa de lo que hay que cambiar. La investigación de UX se llevó a cabo en alemán, uno de los idiomas que domina la agencia de diseño de UX.

Gasolinera donde se llevó a cabo la investigación de usuarios para el proyecto de diseño de un punto de venta
Se filma a un usuario de TPV en la caja registradora de una gasolinera para un estudio de observación de investigación de usuarios.
Entrevistador sentado a la mesa en una gasolinera de Zúrich hablando con un usuario de la aplicación de punto de venta al por menor

BECOME A CLERK TO KNOW A CLERK

El objetivo de la investigación de usuarios era descubrir las complejidades y los puntos débiles que experimentan los cajeros al utilizar la aplicación POS.

Las entrevistas a los usuarios nos dieron un punto de partida, pero la observación sistemática de cómo utilizan la aplicación de punto de venta para atender a los clientes nos dio una visión cuantitativa de los cuellos de botella de la usabilidad. Para profundizar un poco más, nuestros diseñadores de UX/UI trabajaron junto a los cajeros en un diseño de investigación participativa. Mientras almorzábamos con ellos aprendimos los retos a los que se enfrentan más allá de la usabilidad del TPV.

User persona of retail POS application shwoing pain points and task breakdown
Presentación de un cajero que utiliza habitualmente el software de punto de venta

HOW UX PAIN POINTS EMERGE IN RETAIL POS APPS

Las aplicaciones de punto de venta gestionan cientos de tipos de transacciones. Al trazar los datos de la investigación de UX, creamos un inventario de escenarios que generan problemas.

Existen patrones en la forma en que surgen los puntos de dolor de UX. Suele haber pequeñas complejidades de UX/UI que se acumulan en la vida real y comprometen una transacción que lleva demasiado tiempo. Estos problemas de diseño de UX solo pueden descubrirse en la vida real, no pueden anticiparse en el proceso de diseño.

Diagrama de experiencia de usuario que muestra los puntos débiles en el uso del software de punto de venta

UX CHALLENGES ARE AMPLIFIED BY THE CONTEXT

En la vida real, las aplicaciones de TPV funcionan en un contexto complejo. Gracias a la investigación sobre el terreno y a la participación directa de los usuarios, identificamos los factores contextuales que distorsionan la usabilidad de los TPV.

Descubrimos docenas de factores de UX contextuales, como el deslumbramiento en la pantalla del punto de venta producido por la iluminación superior o cómo la disposición del mostrador dificulta tocar algunas zonas de la pantalla táctil del punto de venta.

Sistema de punto de venta en gasolinera con aspectos destacados que muestran los factores que influyen en la experiencia del usuario

COMPARATIVE ANALYSIS OF POS USER FLOWS

Hemos comparado la experiencia de usuario de otros sistemas de punto de venta. En este análisis detallado comparamos y contrastamos soluciones a la luz de los escenarios que descubrimos en la investigación de usuarios.

Esta revisión sistemática de los diseños de experiencia de usuario de la competencia reveló una serie de recomendaciones aplicables al proyecto. Nos ayudó a delimitar el enfoque de diseño de la experiencia de usuario.

Análisis comparativo de los flujos de usuarios de la aplicación POS

PROTOTYPING AND TESTING SOLUTIONS FOR POS DESIGN

Creamos prototipos para diferentes enfoques de la experiencia del usuario. Cada uno era una combinación de diseños de interfaz combinados con un tratamiento de los flujos de usuario.

Se presentó al equipo de proyecto del cliente una comparación sistemática de las ventajas y desventajas de cada enfoque y juntos elegimos los que se probarían con los usuarios. Este proceso iterativo de diseño de la experiencia del usuario nos permitió centrarnos y agilizar la entrega. En sólo 6 semanas habíamos completado la solución de UX para la aplicación de punto de venta y comenzó el desarrollo.

Prototipo de wireframe de alta fidelidad para un sistema de punto de venta integrado en una gasolinera.
Dos gasolineras, una al lado de la otra, que muestran la operación de venta al por menor en el estudio de caso de diseño UX.

SELF CHECKOUT EXPERIENCE FOR GAS STATIONS

El terminal de pago exterior es el inicio de la experiencia de autopago en la gasolinera. Está disponible 24 horas al día, 7 días a la semana, en cuatro idiomas y dos divisas. La experiencia de autopago en gasolineras es única en el mundo del comercio minorista porque las transacciones de gasolina implican el sistema de surtidores.

La interfaz de usuario del terminal se diseñó para funcionar en distintas condiciones. Por ejemplo, el frío extremo en invierno influye y por la noche los colores de la interfaz de usuario se adaptan para ser más acogedores.

Interfaz de usuario que muestra la experiencia de uso de un terminal de autopago para gasolineras

ITERATIONS LEAD TO A SIMPLE USER EXPERIENCE

En un enfoque iterativo con 6 sprints de diseño, hemos creado múltiples wire-flows y los hemos probado. Hemos refinado la interfaz de usuario de cada pantalla, eliminando componentes de la interfaz para reducir la complejidad. Cada vez probábamos los diseños para asegurarnos de que no habíamos ido demasiado lejos.

La investigación de usuarios realizada en las fases anteriores fue útil para que la interfaz de usuario de la autofacturación fuera sencilla. Por ejemplo, los extractos breves contextualizan los datos de la transacción y los usuarios experimentan claridad.

Ilustraciones para guiar a los usuarios del terminal de autopago para gasolineras

SUPPORT FOR DEVELOPMENT

Los sistemas integrados cuentan con capacidades de hardware específicas que se tuvieron en cuenta en el proceso de diseño de la interfaz de usuario. El diseño de la interfaz refleja el aspecto de la máquina y tiene en cuenta las especificaciones de la pantalla.

Facilitamos a los desarrolladores la implantación del diseño de la interfaz de usuario del terminal de autopago preparando un sistema de diseño. Ahora utilizan el sistema de diseño para mantener y actualizar el sistema de forma independiente.

Diseño de interfaz de usuario para un sistema integrado en el que los usuarios seleccionan el método de pago en la experiencia de autopago.
Detalle de la experiencia de usuario cuando los usuarios envían los datos de la tarjeta en la interfaz de autopago.
Design systm showing the UI components of the self checkout for petrol retail including buttons, graphics and states

THE CAR PLAY APP COMPLETES THE USER EXPERIENCE

Para redondear la experiencia del cliente hemos diseñado una aplicación Car Play. Es una aplicación nativa para coches y detecta automáticamente cuándo entras en una gasolinera. También sabe en qué surtidor has parado. Todo lo que tienes que hacer es repostar y marcharte.

La aplicación Car Play integra la búsqueda de gasolineras, la navegación y el repostaje. Reduce la carga del sistema de punto de venta de la tienda y facilita el repostaje a los usuarios.

Salpicadero de coche con interfaz de usuario de aplicación Car Play para cadena de gasolineras

CAR PLAY APP CREATED IN TWO DESIGN SPRINTS

Las aplicaciones Car Play funcionan tanto con la voz como con el control táctil, y el diseño UX/UI debe adaptarse a un escenario de conducción. Cuando se diseña correctamente, Car Play facilita y hace más seguro el uso de una aplicación.

La experiencia de usuario de car play se diseñó de acuerdo con los estándares de las aplicaciones de car play y la normativa de automoción. Teníamos experiencia previa con software de diseño de IU como Kanzi, así que pudimos entregar la aplicación en solo dos sprints de diseño.

Icono de la aplicación Car play en el salpicadero
User interface options for selecting fueling details in car play app
Car play UI design while user is fueling at petrol station
Diseño Ui para pantalla de éxito de transacción en aplicación car play para gasolinera
Diseño de experiencia de usuario de aplicación móvil para gasolinera minorista con salpicadero de coche de fondo

MOBILE APP CONCEPT DESIGN

Basándonos en todo el trabajo de diseño anterior, realizamos dos sprints más de diseño UX/UI para proponer una experiencia de usuario con visión de futuro para una aplicación móvil de venta al por menor. Reúne todos los elementos del recorrido del cliente.

La aplicación móvil es un componente esencial en los programas de fidelización y en el modelo de datos del comercio minorista. Para el cliente abre nuevas vías para sacar el máximo partido de su uso repetido de las gasolineras. El diseño de la interfaz de usuario refleja la naturaleza visionaria de la aplicación.

Cinco diseños de interfaz de usuario para una aplicación móvil de venta de gasolina en Suiza
Elementos del diseño

A COMPLETE CUSTOMER EXPRIENCE FOR GAS STATIONS

Todas las aplicaciones que diseñamos funcionan juntas para crear una experiencia coherente de principio a fin para el cliente en las gasolineras. Las aplicaciones de autopago reducen la carga de trabajo de los cajeros de la tienda, que así pueden ofrecer un mejor servicio a los compradores.

La experiencia del usuario es coherente de una aplicación a otra, pero hemos adaptado cada una de ellas para reflejar las limitaciones de los sistemas integrados o la normativa aplicable a las aplicaciones Car Play. El diseño de la interfaz de usuario realza la marca y posiciona al cliente como un actor innovador en el comercio minorista de gasolina.

Nuestra agencia de diseño UX aportó la experiencia que faltaba en diseño de experiencia de usuario para la creación de toda la gama de productos digitales. Para ofrecer un servicio completo, viajamos a Suiza para realizar una investigación de usuarios y comprender el contexto único.

RESULTADOS

Cobertura completa de la experiencia del cliente

UX/UI para 5 aplicaciones entregadas en 10 meses

Asistencia en tiempo real a los desarrolladores durante la implantación