Diseño de apps de servicios para el hogar: rediseño de la pantalla de inicio, antes y después

Una app de servicios para el hogar tiene un solo trabajo en su pantalla de inicio: llevar a alguien de "algo se ha roto" a un profesional reservado en el menor número de toques posible. El primer borrador de abajo tiene todo lo que necesita un propietario, pero le obliga a rebuscar. Le pide buscar "servicios, categorías, profesionales", grita 30% de descuento en un banner rojo, despliega doce categorías con etiquetas de 8 px y entierra a cada profesional en líneas de datos de 8 px.

La solución mantiene todas las funciones y cambia el orden. Primero va una pregunta clara, la oferta se encoge a una línea, tres categorías cargan con la pantalla y cada profesional muestra solo aquello en lo que la gente se fija para elegir.

La pantalla completa, antes y después

Borrador junior

Arreglada

A la izquierda, una docena de cosas piden atención con el mismo peso. El banner rojo es el objeto más ruidoso, las doce tarjetas son el bloque más grande, y las personas reales que harán el trabajo quedan al fondo con una letra tan pequeña que hay que entornar los ojos.

A la derecha, la pantalla se lee en el orden en que piensa un propietario: qué falla, hay alguna oferta, qué tipo de trabajo es, quién puede venir. El texto va de 12 a 18 px frente a los 8 a 15 px del borrador, el margen es de 20 en ambos lados y nada va dentro de una tarjeta.

Qué cambió, medido

Arreglo 1: haz una pregunta clara

Antes

Después

Un campo de búsqueda fino con contorno que dice Buscar servicios, categorías, profesionales con un micrófono, sobre una línea de búsquedas populares: Reparar fugas, Servicio de aire acondicionado, Limpieza a fondo, Ventilador de techo. Frente a un campo gris alto con una lupa, las palabras ¿Qué hay que arreglar? y un micrófono.

"Buscar servicios, categorías, profesionales" es una etiqueta de base de datos. Le pide al usuario decidir si busca un servicio, una categoría o una persona antes de escribir una palabra. Nadie llega a una app de fontanería pensando en esos términos. Llega pensando "el fregadero gotea".

"¿Qué hay que arreglar?" es la pregunta que la app existe para responder, así que el usuario puede escribir el problema con sus propias palabras. El campo crece de 32 a 48 px, así que es un objetivo de toque real, y el micrófono se queda para cuando se tienen las manos mojadas. Las búsquedas populares, Reparar fugas, Servicio de aire acondicionado, Limpieza a fondo y Ventilador de techo, se abren desde el campo al tocarlo, así que no se pierde nada y la pantalla se ahorra una línea de texto de 9 px.

Regla para reutilizar: escribe el marcador como el problema del usuario, no como tu arquitectura de la información.

Arreglo 2: convierte el banner en una línea

Antes

Después

Un banner rojo con un icono de etiqueta, 30% DE DESCUENTO EN TU PRIMERA RESERVA en mayúsculas con tres signos de exclamación, letra pequeña que dice Usa el código FIX30 al pagar, solo usuarios nuevos, se aplican condiciones, y un botón amarillo RESERVAR YA. Frente a una línea amarilla delgada que dice 30% de descuento en tu primer arreglo, FIX30, con una flecha.

El banner rojo tiene tres trabajos y no hace bien ninguno. El rojo se lee como un error o una advertencia, los signos de exclamación se leen como spam, y la letra pequeña es el único sitio donde vive el código. Además, su botón RESERVAR YA compite con los botones RESERVAR de los profesionales de abajo.

La línea arreglada dice lo mismo de un tirón: el descuento, para quién es y el código. Es amarilla, que es el único color de acción de la app, y toda la línea es el botón, así que la flecha sustituye a RESERVAR YA. No hay foto ni grito. Un usuario nuevo sigue viendo la oferta, y uno recurrente no recibe un grito cada vez que abre la app.

Regla para reutilizar: una oferta es una línea, no una valla publicitaria. Dale el código al usuario y haz que la propia línea sea tocable.

Arreglo 3: reduce doce categorías a tres y un Más

Antes

Después

Un encabezado Todas las categorías con un enlace Ver todo sobre doce tarjetas pequeñas con contorno en tres filas de cuatro, cada una con un icono de distinto color y una etiqueta de 8 px: Fontanería, Electricidad, Limpieza, Pintura, Carpintería, Aire acondicionado, Electrodomésticos, Control de plagas, Mudanzas, Jardinería, Cerrajería, Hogar inteligente. Frente a cuatro tarjetas más grandes con contorno e iconos de tinta lisa: Fontanería, Electricidad, Limpieza y Más.

Doce iconos de colores en una cuadrícula parecen ordenados, pero el usuario tiene que leer doce etiquetas para encontrar la suya. Peor aún, un propietario con una fuga a menudo no sabe a qué categoría pertenece. ¿Un techo con goteras es Fontanería, Pintura o Carpintería? Un menú ancho no ayuda a esa persona, le hace más difícil adivinar.

La solución funciona en dos niveles. El campo de búsqueda recoge el problema con palabras sencillas, así que quien no conoce la categoría nunca tiene que adivinar una. Las tres tarjetas cubren los trabajos más comunes, y Más abre las otras nueve: Pintura, Carpintería, Aire acondicionado, Electrodomésticos, Control de plagas, Mudanzas, Jardinería, Cerrajería y Hogar inteligente. Las tarjetas miden 76 por 72 con iconos de 26 px y etiquetas de 12 px, y los iconos pasan a tinta lisa, porque doce colores de icono distintos eran ruido, no información.

No se quitó nada. Las doce categorías siguen a un toque. Thumbtack adopta el mismo enfoque: primero una búsqueda del trabajo y debajo una lista corta de categorías.

Regla para reutilizar: muestra las pocas que la mayoría necesita y deja el resto detrás de un Más. Deja que la búsqueda atienda a quienes no conocen la categoría.

Arreglo 4: muestra a cada profesional como la gente lo elige

Antes

Después

Tres profesionales, cada uno con una foto de 40 px, un nombre, una línea gris de habilidades como Fontanería, Reparar fugas, Calentadores de agua, Desatascos, una línea que dice 4.9 (312), 1.240 trabajos hechos, 1,9 km, 45 dólares la hora, una línea que dice Disponible de lunes a sábado, de 8 a 18 h, y un botón RESERVAR en mayúsculas. Frente a tres profesionales con una foto de 48 px, un nombre, una estrella con 4.9, 1.240 trabajos y 45 dólares la hora, y el próximo hueco en verde, como Próximo hueco hoy, 15:00, con un botón Reservar.

El borrador lista todo lo que sabe de cada profesional: habilidades, valoración, número de reseñas, trabajos, distancia, tarifa y horario semanal. Son siete datos en letra de 8 px, y los tres profesionales parecen idénticos, así que el usuario no tiene forma de compararlos. La línea del horario es la misma para los tres, así que no aporta información.

La gente elige a un profesional por tres cosas: quién es, si otros confían en él y cuándo puede venir. Así que la solución muestra un nombre, una línea de "4.9 · 1.240 trabajos · $45/h" y el próximo hueco en verde, como "Próximo hueco hoy, 15:00". La hora es el dato nuevo, y sustituye al horario semanal genérico por el que necesita una reserva.

Las habilidades, la distancia y el horario completo pasan a la página del propio profesional. La foto crece de 40 a 48 px y el botón Reservar de 21 a 34 px de alto, así que es un objetivo de toque real.

Los números son los mismos en ambas pantallas. Minh Tran tiene 4.9, 1.240 trabajos y $45/h en las dos.

Regla para reutilizar: muestra los datos con los que la gente elige y pasa el resto a la página de detalle.

Los arreglos menores

• Se mantienen todas las funciones. La dirección larga se abre desde "24 Hayes St" y su flecha. El micrófono se queda en el campo de búsqueda. La pestaña Ofertas se integró en la línea de oferta, y el carrito se convirtió en la pestaña Reservas.
• Un solo margen. El borrador tiene 14 px a la izquierda y 12 px a la derecha. La pantalla arreglada usa 20 en ambos lados.
• Un solo acento. El amarillo es el color de acción, en la oferta y en cada botón Reservar. En el borrador compiten el rojo, el amarillo y doce colores de icono.
• Cuatro pestañas, un solo estilo de icono. Cinco pestañas con iconos rellenos y de contorno mezclados pasan a cuatro en un solo estilo, sobre una barra plana de 78 px con una línea fina.
• Un logotipo más grande, una dirección más corta. El logotipo crece a 24 px y la dirección pierde la línea de calle y la ciudad, porque el usuario sabe dónde vive.
• Escala tipográfica. El texto va de 12 a 18 px en lugar de 8 a 15 px.
• Ver todo se queda. El resto de profesionales están detrás de Ver todo, y el tercer profesional se corta al pasar la barra de pestañas para que la lista parezca más larga.

Audita tu propia pantalla de servicios para el hogar

Consigue el archivo de Figma

El archivo gratis incluye el borrador junior, la pantalla arreglada y cada parte como componente.

Archivo de Figma gratis

Rediseño de la pantalla de servicios para el hogar, antes y después

Las dos pantallas y cada parte como componente de Figma. Gratis, solo lectura, duplícalo en tus borradores.

Abrir en Figma

FAQ

¿Cómo se debe diseñar la pantalla de inicio de una app de servicios para el hogar?

Empieza con una pregunta clara como "¿Qué hay que arreglar?", luego una línea de oferta delgada, tres o cuatro tarjetas de categoría con un Más y una lista corta de profesionales. Muestra a cada profesional con nombre, valoración y próximo hueco, con un solo botón Reservar.

¿Cuántas categorías debe mostrar una app de servicios para el hogar?

Tres o cuatro en la pantalla de inicio, con un Más para el resto. Doce tarjetas obligan a todos a leer cada etiqueta, y quienes tienen un problema a menudo no saben a qué categoría pertenece.

¿Una app de servicios debe usar barra de búsqueda o categorías?

Ambas, en ese orden. Un campo de búsqueda que pregunta por el problema atiende a quienes no conocen la categoría, y unas pocas tarjetas cubren los trabajos comunes para quienes sí la conocen.

¿Qué debe mostrar la tarjeta de un profesional en un marketplace de servicios?

Un nombre, una valoración con trabajos hechos y tarifa, y la próxima hora disponible. Las habilidades, la distancia y el horario completo pertenecen a la página del propio profesional, porque no ayudan a elegir entre tres opciones.

¿Cómo se debe mostrar un descuento en una app de servicios para el hogar?

Como una línea delgada con la oferta y su código, donde toda la línea sea tocable. Un banner rojo con signos de exclamación se lee como spam, y su botón compite con los botones Reservar.

Fuentes

• Ambas pantallas son propias, diseñadas y medidas en Figma. La app, Fixly, las personas, la dirección y los precios son inventados. La oferta, 30% de descuento con el código FIX30, y los 4.9, 1.240 trabajos y $45/h de Minh Tran son los mismos en ambas pantallas.
• Patrón estudiado: Thumbtack, con una búsqueda del trabajo primero y una lista corta de categorías debajo.
• Los iconos son de Phosphor (MIT). Las fotos son de Pexels: Ivan S, Kindel Media, Son Hoa Nguyen y Mahmoud Yahyaoui.
• Publicado por primera vez como carrusel en App Brainy.