Login

Cada día aumenta más la presencia de marcas y negocios online; miles de transacciones al día son generadas a través de la web y aplicaciones móviles. Y también sabemos que nuestro actor principal en todas estas transacciones es el usuario. Por lo que, descuidar la experiencia del usuario quien realiza estas transacciones, sería un error.

Estuve buscando la manera de unir los dos mundos a los cuales pertenezco (la informática y el diseño) y encontré a la experiencia de usuario como un nuevo camino en donde la innovación, junto con la creatividad y la tecnología se juntan y generan una experiencia positiva para el usuario.

En este ejemplo tuve en cuenta dos factores que considero muy importantes: la  simplicidad y el logro de una interfaz intuitiva.

Luego de semanas de haber investigado y puesto en práctica, logré este sencillo ejemplo que les muestro a continuación acerca de una venta online de productos de una confitería ficticia (la llamé Cremosa). La herramienta que utilicé para el Mockup es Adobe XD.

Vivimos en mundo en donde está permitido la prueba y el error, por lo que, comentarios para seguir mejorando son siempre bienvenidos.

  1. Empecé definiendo los componentes como: tipografía y paleta de colores

    Componentes
    Componentes

2. En la ventana de login tenemos los campos de dirección de correo, contraseña y la opción de registro y recuperar contraseña

Login
Login

3. Para el registro de usuario se necesita ingresar la dirección de correo junto con la contraseña y confirmación de la misma. Más detalles sobre los datos del usuario pueden ser completados luego en el perfil del usuario.

Registro de usuario
Registro de usuario

4. Bajo un estilo minimalista y clean,  tenemos la ventana del Home principal, en donde mostramos algunas imágenes de los productos y breve descripción del negocio.

Home
Home

5. En la ventana de pedidos online mostramos todos los productos y filtrados por categorías. Cada producto llega el costo, una breve descripción y las opciones de cantidad para comprar. Una vez confirmado el pedido, el usuario debe ir al carrito de compra para confirmar el pedido.

Pedidos online
Pedidos online

6. Al confirmar un pedido, tenemos una ventana que nos muestra el listado del pedido. Tenemos todos los detalles del pedido, junto con la opción de eliminar todos los pedidos y un campo de indica el monto total del pedido. Para continuar con el proceso, clic en el botón siguiente.

Confirmar pedido
Confirmar pedido

7. Una vez confirmado el pedido, debemos indicar el método de pago y facturación. Tenemos la opción de pagarlo con tarjeta de crédito o en efectivo y también indicar los datos de la facturación.

Método de pago
Método de pago

8. Si elegimos Tarjeta como método de pago, nos despliega el siguiente formulario, donde tenemos la opción de elegir una tarjeta ya existente (y editar los datos de la  misma) o agregar una nueva.

Método de pago > Tarjeta
Método de pago > Tarjeta

9. Si elegimos efectivo como medio de pago, nos muestra el formulario donde podemos indicar si abonaremos con el monto exacto o necesitaremos vuelto de un monto el cual se puede especificar en un campo de texto.

Metodo de pago > Efectivo
Metodo de pago > Efectivo

10. Si desea factura, se despliega el siguiente form donde el usuario puede indicar los datos (si ya fueron guardados anteriormente) o en todo caso agregar nuevos datos para la facturación.

Método de pago > Facturación
Método de pago > Facturación

11. Habiendo indicado la forma de pago, se habilitan de continuar para poder indicar la ubicación a donde el pedido debe ser enviado.

Método de pago > Continuar
Método de pago > Continuar

12. Seguidamente indicamos la ubicación de envío marcando en el mapa.

Pedidos online > Ubicación
Pedidos online > Ubicación

13. Una vez que le damos clic a «Enviar Aqui» confirmamos la dirección y los datos de la persona quien recibirá el envío.

Pedidos online > Confirmar dirección
Pedidos online > Confirmar dirección

14. Habiendo confirmado todos estos datos, terminamos con el estado del pedido. El cual indica al usuario si el pedido ya fue recibido, si está en preparación, si ya fue enviado o finalizado. También indica el tiempo estimado de espera al usuario.

Pedido online : Estado del pedido
Pedido online : Estado del pedido

Si te gustaría ver mi proyecto en behance, haz clic aquí.

¡A seguir practicando!

Comments

comments


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *