La experiencia interactiva no pudo iniciarse. Recarga la página o explora los proyectos abajo. Recargar ↻

Case 017Diseño de app móvil

Helps On

Una app en portugués para pedir servicios del hogar, como una persona de limpieza o un electricista, con billetera, cupones y un plan PRO. Los nombres y los montos en pantalla son datos de ejemplo.

Mi papel: Flujos de producto y diseño de interfaz
Estado del proyecto: Diseño de interfaz · archivo de Figma

Portada de presentación de Helps On, del archivo de diseño original. — Portada de presentación del archivo original.

Mi contribución

Helps On es una app en portugués para pedir servicios, desde una persona de limpieza hasta un electricista o el cambio de una ducha. Alrededor de cada solicitud está lo que hace falta para pagarla: una billetera, tarjetas guardadas, cupones y un plan PRO.

El archivo de Figma tiene 58 frames de celular, rondas de wireframes y un flujo de usuario, y también cubre el registro, la captura de documento y de rostro, y los estados de pago. Aquí muestro la pantalla de inicio, la billetera y los cupones.

Un recorrido por las pantallas del diseño, no una grabación: la pantalla de inicio, la billetera y los cupones. La pantalla de inicio combina las solicitudes recientes con tarjetas grandes de atajos. La billetera reúne el saldo, las tarjetas y los cupones en una sola pantalla.

Pantalla de inicio con una lista de tres solicitudes, el título Meus atalhos y una tarjeta grande y oscura para Minhas solicitações con la etiqueta Novas atualizações. — Un recorrido por las pantallas del diseño, no una grabación: la pantalla de inicio, la billetera y los cupones. La pantalla de inicio combina las solicitudes recientes con tarjetas grandes de atajos. La billetera reúne el saldo, las tarjetas y los cupones en una sola pantalla.

Atajos que informan su propio estado

La pantalla de inicio combina una lista corta de solicitudes con una fila de tarjetas grandes bajo Meus atalhos. Cada tarjeta nombra un destino y lleva una pequeña etiqueta de estado, como Novas atualizações o la cantidad de tarjetas activas, para que se vea qué cambió antes de abrir nada. La siguiente tarjeta asoma por el borde derecho, y eso deja ver que la fila continúa.

Pantalla Meus cupons con las pestañas Ativos y Expirados y dos tarjetas de cupón con foto, descuento, fecha de validez y código. — Cupones divididos en activos y vencidos, cada uno con su código.

Cupones divididos en activos y vencidos, cada uno con su código.

Primero el saldo, luego todo lo que lo rodea

La billetera abre con el saldo y un botón relleno, Adicionar saldo, con el estado de cuenta al lado como opción más discreta. Después vienen, en ese orden, las tarjetas guardadas, los cupones y los movimientos recientes, así que el dinero disponible queda arriba y el historial a un scroll de distancia.

Los cupones tienen su propia pantalla, dividida en Ativos y Expirados. Cada tarjeta pone una foto sobre el servicio, el descuento, la fecha de validez y un código, y cierra con Detalhes do cupom.