Concepto independiente · Área de cliente, reservas

UMBRAL

Un coworking con dos salas y un área de cliente. Lo difícil es reservar una reunión larga cuando ninguna sala está libre todo el rato, sin pedir nada que el espacio no pueda dar.

UMBRAL, vista de escritorio
UMBRAL, vista móvil
Tipo
Área de cliente, reservas
Mi papel
Diseño de producto, interfaz y desarrollo
Alcance
Web de presentación y área de reservas
Estado
Concepto independiente · marca y datos ficticios

El reto

Qué problema intenta resolver.

Sala Luz (8 personas) y Sala Patio (4) no siempre tienen un hueco continuo. Si la interfaz solo muestra «no disponible», la persona abandona o prueba a ciegas hora por hora.

La pregunta de diseño: ¿cómo ayudar a construir una reserva con varias piezas sin que se pierda el control de lo que se ha elegido ni de lo que cuesta?

Decisiones de diseño

Cuatro decisiones, a la vista.

Cada una se puede comprobar en la demo.

Las dos salas

Presentar el espacio con ritmo

La web enseña el plan, las dos salas y el ritmo del día (09:00, 12:00, 16:00) antes de pedir nada.

Resultados con disponibilidad por sala

Solo se puede pedir lo posible

El buscador desactiva las horas fuera del horario (L–V 08–20, S 09–14) y las duraciones que acabarían después del cierre, avisa de que los domingos cierra y limita el grupo a 8 personas, la capacidad real.

Panel «Tu selección» con el total

Ver siempre lo elegido, y su precio

«Tu selección» muestra horas, bloques, sala, fecha, personas y el total de ejemplo (Sala Luz 30 €/h, Sala Patio 18 €/h), con «Confirmar reserva» y «Vaciar selección».

Reserva guardada con «Añadir al calendario»

La reserva sale de la web

En «Mis reservas» cada reserva se puede modificar, cancelar o añadir al calendario con un archivo .ics. Las reservas se guardan solo en el navegador.

Qué puedes probar

Un recorrido de cuatro pasos.

Para ver las decisiones funcionando, en este orden.

  1. Elige un sábado a las 13:00 y mira qué duraciones quedan.

  2. Combina horas de las dos salas en una misma selección.

  3. Confirma y abre «Mis reservas».

  4. Añade la reserva a tu calendario.

Detrás de la interfaz

Datos en el navegador

Las reservas viven solo en el navegador de quien prueba la demo. No hay cuentas ni servidor, y no se recogen datos personales. Los precios son de ejemplo.

  • HTML, CSS y JavaScript, sin dependencias externas.
  • Revisado sin errores de consola ni desbordes horizontales a 1440 y 390 px.
  • Marca, imágenes y datos ficticios. Ninguna cifra procede de usuarios reales.

Con más tiempo

Qué comprobaría con personas.

Son hipótesis para una prueba que aún no he hecho, no resultados.

  • ¿Consiguen reservar una reunión que necesita dos salas?
  • ¿Dónde dudan: en la cuadrícula o en el panel de selección?

¿Hablamos del puesto?

Puedo explicarte cómo llegué a cada decisión de este concepto.