Back to works

Streamlining space scheduling with a $0 in-house booking system

A complaint about 1-hour booking blocks kicked off a complete room management ecosystem, designed and built across two years of iteration.

My RoleUX Designer & Developer
TechnologiesGoogle Apps Script, HTML/CSS/JS
TeamSolo project with stakeholder input
Users1400 startups, D3 staff, and guests
window conference room digital signage

The Story

This project began in the summer of 2022, during my residency as an Alan Shepard Resident Consultant at District 3. Post-pandemic, many innovation hubs were struggling with hybrid work patterns, and D3 was no exception.

"We need better tech solutions to get people back in the office," was the brief. The existing room booking system, built by a D3 startup that had since pivoted away from facilities management, was abandoned and broken. People were booking rooms by Slack messages, emails, and sticky notes. My first fix was small: a Google Calendar appointment page behind a short URL, so anyone could claim a room without messaging a person.

That simple fix grew over two years into a complete room management ecosystem. No grand vision drove it; I fixed each frustration as it surfaced, and the fixes compounded.

district 3 hub

The Journey

The Spark

Summer 2022

During my Alan Shepard Resident Consultant residency, I proposed better tech solutions to encourage return-to-office. The existing booking system from a D3 startup had been abandoned when they pivoted.

Market Research

Fall 2022

After joining D3 as a Systems, Data & Automations Coordinator I evaluated six commercial platforms (Deskfound, Envoy, Robin, etc.) - all failed due to cost constraints or feature limitations for our non-profit budget and specific needs.

Version 1: The Hack

Winter 2023

After growing beyond the capabilities of our previous platform, I built an MVP using Google Apps Script, Google Calendar Appointment Schedules, a URL redirect, and Notion pages. Functional as a stopgap but flawed.

New Opportunities

Fall 2023

Seeing opportunities where I could improve D3's digital user experience, my manager and I increased my responsibilities under a new role as D3's User Experience & Systems Designer.

The Breaking Point

Summer 2024

Charlie Gedeon, former D3 employee and cofounder of Pragmatics Studio, expressed frustration with 1-hour-only slots. This critique, combined with my Paris design education, sparked the complete V2 redesign.

Version 2: The System

Fall 2024

Complete UX overhaul with user research, cohesive design system, and three integrated interfaces.

Version 1: Problematic User Flow

v1 broken flow

The Catalyst

"I just want to book a 15-minute call slot. Why do I have to reserve an entire hour?"

- Charlie Gedeon, former D3er and cofounder of Pragmatics Studio

That complaint in summer 2024 set off the redesign. Charlie wanted a 15-minute slot for a 15-minute call, and the system had no concept of one; how people used the space had drifted away from what V1 assumed.

Fresh from studying interaction design in Paris, I could see that V1's problems ran deeper than its technical limitations. The whole flow needed a rethink, from booking to check-in.

Design Process & Research

Understanding the Problem

I conducted interviews with D3's space team (Ivona Bossert and Andrea Betts) and multiple startup founders to understand their booking behaviors and pain points.

Flexibility Issues

Users needed 15-30 minute meetings; the system only offered 1-hour blocks

Feedback Failures

Delayed email denials created confusion and no-shows

Visibility Gaps

No way to see real-time availability without opening the app

Design Philosophy

The challenge was balancing D3's "brash and busy" visual identity with functional interface needs. My solution: feature the brand graphics prominently while keeping UI interactions minimal, fast, and inspired by Bauhaus principles - form follows function.

I drew inspiration from Dieter Rams' design philosophy and the biophilic interior design work being done by Andrea Betts and Ivona Bossert.

design principles

Interface Design Decisions

Strategic Color Usage

Color in the system does one job: status. The traffic light indicators (green/orange/red) need zero training; people read them on sight.

traffic light system

Green - Available

Room free for booking

Orange - Check-in Period

10 mins before booking starts

Red - Booked

Currently in use

Familiar Interaction Patterns

Click-and-drag selection leverages existing mental models from calendar applications, allowing precise start/end time selection - directly addressing Charlie's original frustration with fixed time blocks.

After beta testing showed some users struggling with precise dragging, I added time dropdown selectors as a second path to the same action.

booking interaction

Biophilic Micro-interactions

goldfinches

The American Goldfinch (Montreal's official bird) appears only during check-in/out moments, creating a delightful micro-interaction that connects users to the local environment - supporting the interior design team's biophilia philosophy.

The goldfinch has become D3's pseudo-mascot, but it's used sparingly - only appearing to say thank you at key interaction moments, with an accompanying chirp sound plucked from 10 hours of Goldfinch audio by electroacoustics engineer and former D3er Connor Cook.

The prompt I gave him was "I wanted it to sound like a checkmark". I think he nailed it!

The Three-Interface System

Version 2 is three interfaces working as one system: room tablets, a booking web app, and an entryway dashboard. Each serves a specific context while keeping visual and functional consistency.

system overview

Room Tablets

free state
check in state
booked state

Key Features

  • • Large, high-contrast typography for quick status scanning from a distance
  • • Current booking details with precise timing and user identification
  • • Single-action check-in/out buttons that appear contextually
  • • QR code for mobile booking access without app downloads
  • • D3 brand graphics occupy 80% of screen real estate while UI stays minimal

Booking Web App

calendar view
booking modal
feedback toasts

User Experience Improvements

  • • Instant feedback system - no more booking confirmations followed by rejection emails
  • • Real-time quota tracking with visual feedback on remaining daily bookings
  • • Click-and-drag time selection with dropdown backup for precision
  • • Room details and amenities clearly displayed before booking
  • • Calendar integration showing existing bookings and conflicts

Entryway Dashboard

dashboard overview
office map

Information Architecture

  • • Message of the day: a scrolling marquee message, usually a seasonal greeting
  • • Birds-eye office map with realtime room status indicators
  • • Startup showcase rotating through member database
  • • Essential visitor information (WiFi, events, contact details)
  • • Fully admin-configurable content via Google Sheets backend
  • • Anti-burn-in rotation that swaps layout positions every 15 minutes
  • • Fun easter eggs: dancing staff gifs that bounce around the screen like a classic DVD screensaver

Cohesive System Design

While each interface serves different contexts, they share consistent design principles that create a unified experience across the entire room management ecosystem.

design system

Visual Consistency

  • • Typography: Geist Sans/Mono (open-source, supporting D3's "high-tech and open" philosophy)
  • • Color Strategy: Minimal black/white palette with strategic orange (#ff420B) accents
  • • Brand Integration: D3 graphics occupy prominent real estate while UI stays functional

Functional Consistency

  • • Shared Data: All interfaces powered by the same real-time dataset
  • • Status Synchronization: Changes in one interface immediately reflect across all others
  • • Interaction Patterns: Similar actions behave consistently across contexts

Technical Architecture

  • • Google Apps Script: Web app frontend and backend logic
  • • Google Calendar API: Real-time booking synchronization
  • • Google Sheets: User management and content database
  • • HTML/CSS/JavaScript: Custom responsive interfaces
  • • Admin Configuration: Non-technical content management via spreadsheet
admin backend

Complete User Journey

The redesigned system supports multiple user paths while maintaining consistency. A typical booking journey moves through the three interfaces in four steps:

1

Discovery & Booking

User visits district3.co/dibs, sees real-time availability, and books using click-and-drag or dropdown selectors. Instant feedback shows quota usage and confirmation.

2

Arrival & Orientation

Upon entering D3, the entryway dashboard provides office overview, WiFi info, and current events. The birds-eye map shows their booked room location.

3

Check-in & Use

At their room, the tablet shows booking details and check-in button (available 10 minutes before start). The goldfinch animation confirms check-in with a chirp.

4

Completion

User can check out early via tablet "Meeting Complete" button, freeing the room for others. No-shows are automatically cancelled after 20 minutes.

Impact & Validation

Quantitative Results

~$10,000
Avoided yearly cost of the commercial platforms the team had priced out
0
Training time required for new users

Qualitative Improvements

  • • Eliminated booking confusion through instant feedback system
  • • Reduced no-shows with clear check-in requirements and timing
  • • Improved space utilization through flexible time slots and real-time status
  • • Enhanced brand experience matching D3's visual identity
  • • Simplified administration with Google Sheets-based content management

Post-Launch Iteration

After launching the beta, I conducted live user testing sessions. The most significant finding was that some users struggled with precise click-and-drag, leading me to add time dropdown selectors in the booking modal. This dual-interaction approach accommodates different user preferences and motor abilities.

Reflection

This project rewarded small fixes over grand plans. The booking hack became a room management ecosystem because I kept listening to user feedback and kept iterating.

The tension between D3's vibrant brand identity and functional interface needs improved the final design: brand graphics got the prominent real estate, interactions stayed minimal, and the screens feel like D3 without costing usability.

A custom build beat the commercial alternatives here because I designed it around D3's specific constraints: a nonprofit budget, a Google-stack backend, and 1400+ startup members. None of the six platforms I evaluated could satisfy all three.

D3 still runs the system, and it keeps absorbing small changes as new needs surface. That was the hope when I built it.

thanks for reading!
Back to works