Publicado por

PEC 2. DISEÑO Y SISTEMATIZACIÓN DE UNA INTERFAZ

PEC 2. DISEÑO Y SISTEMATIZACIÓN DE UNA INTERFAZ
Publicado por

PEC 2. DISEÑO Y SISTEMATIZACIÓN DE UNA INTERFAZ

Hola a tod@s! Primero de todo, disculpad la demora. Aquí os dejo mi propuesta para la interfaz web dentro del universo BIKI que…
Hola a tod@s! Primero de todo, disculpad la demora. Aquí os dejo mi propuesta para la interfaz web dentro…

Hola a tod@s! Primero de todo, disculpad la demora. Aquí os dejo mi propuesta para la interfaz web dentro del universo BIKI que debíamos llevar a cabo en esta segunda PEC. En mi caso he decidido prototipar una app ya que considero que al estar presente de forma continua y visible en el smartphone del usuario,  la presencia de la marca estará siempre en la mente del cliente.  Además de que es mucho más fácil e instantáneo acceder a la misma. También permite más personalización y, en definitiva, una mejor experiencia de usuario.

Nuestro objetivo era representar los siguientes dos flujos:

Deberemos diseñar dos flujos:

1. Localizar un aparcamiento, saber si hay plazas libres y reservar en el día y horas de preferencia del usuario.

2. Desbloquear la puerta de acceso al parking para introducir la bicicleta y desbloquearla de nuevo, más tarde, para poder dejar el servicio operativo para un nueva bicicleta.

En mi caso, además de estos flujos he querido añadir una barra de navegación con un hamburguer menu que muestre parte de la información que puedes encontrar en su web, como tarifas, faqs o contacto. También he añadido algunas opciones de personalización como favoritos o la opción de filtrado.

He querido añadir algunos detalles como un buscador con una microinteracción, con la idea de que conforme el usuario vaya rellenando el mapa se vaya actualizando y centrando en el lugar buscado.

También, me parecía importante que el usuario visualizase el lugar donde va a dejar su bici por lo que a la hora de reservar el parking he añadido la imagen de la estación de aparcamiento, así como unos iconos que muestran las puertas ocupadas y las disponibles, pudiendo seleccionar la disposición que prefiera.

En el segundo flujo quería jugar con el tema del candado en la barra de navegación inferior, diferenciando a través de los colores de la marca el estado de nuestra reserva, es decir: en gris si no hay ninguna reserva activa, en el color acento con el candado abierto cuando hay una reserva pero aún no se ha utilizado, y en el color primario con el candado ya cerrado cuando nuestra bicicleta ya se encuentra a resguardo en el aparcamiento. Estos colores también se muestran en las pantallas cuando se desbloquea y bloquea la puerta.

También le he añadido una opción en la que cuando tenemos nuestra bici aparcada se pueda mirar una cuenta regresiva del tiempo que nos queda, dando la opción de extenderlo, a este reloj se puede acceder dando click en el candado (en este caso, solo funcionaría cuando se mostrase naranja y cerrado), o desde «Mis parkings», donde se podrá finalizar el aparcamiento, pudiendo acceder tanto desde un sitio como de otro al código QR.

Aquí os dejo el prototipo:

Prototipo

Y aquí el vídeo de los flujos:

Vídeo

Espero que os guste!

Un saludo :)

Debate0en PEC 2. DISEÑO Y SISTEMATIZACIÓN DE UNA INTERFAZ

No hay comentarios.

Publicado por

Diseño y sistematización de una interfaz gráfica

Diseño y sistematización de una interfaz gráfica
Publicado por

Diseño y sistematización de una interfaz gráfica

En la segunda entrega de la asignatura de prototipado, hemos continuado nuestro trabajo en el ámbito de BIKI. Hemos diseñado una app…
En la segunda entrega de la asignatura de prototipado, hemos continuado nuestro trabajo en el ámbito de BIKI. Hemos…

En la segunda entrega de la asignatura de prototipado, hemos continuado nuestro trabajo en el ámbito de BIKI. Hemos diseñado una app móvil que brinda al usuario la posibilidad de reservar y utilizar un espacio de estacionamiento en distintos puntos estratégicos de la ciudad para asegurar su bicicleta. El usuario tiene la libertad de seleccionar la ubicación, el horario y la fecha que prefiera.

El usuario cuenta con varias opciones y funcionalidades en nuestra aplicación. Puede seleccionar un aparcamiento tanto para uso inmediato como programado para un momento posterior. Además, tiene la opción de guardar sus aparcamientos preferidos como favoritos para acceder a ellos fácilmente en el futuro. También puede visualizar una lista o un mapa con los aparcamientos cercanos a su ubicación actual. En caso de necesitar más tiempo en un aparcamiento en uso, puede ampliar su duración activa directamente desde la app. Además, si desea repetir una reserva previa, la aplicación le permite realizar fácilmente una nueva reserva basada en sus preferencias anteriores.

El video a continuación muestra una introducción a la app. Además, es posible consultar el prototipo en este link.

Debate0en Diseño y sistematización de una interfaz gráfica

No hay comentarios.