Oh oh! You need the password...
Enter the password to continue.
GOOGLE - UXI SPACES
Designed an internal Airbnb for Googlers...
Designed an internal Airbnb for Googlers...
...kind of. It was actually a platform where Googlers could book spaces and resources for innovation, research, and creative work.
...kind of. It was actually a platform where Googlers could book spaces and resources for innovation, research, and creative work.
SKILLS
Information architecture
User flows
Prototyping
Design Systems
TOOLS
Figma
Miro
UXI Spaces gives Googlers access to rooms and resources they need to research, experiment, and build the next generation of products.
Booking them should be the last thing they have to worry about. That's where we stepped in: To reframe the experience so Googlers could focus on innovation instead of logistics.
UXI Spaces gives Googlers access to rooms and resources they need to research, experiment, and build the next generation of products.
Booking them should be the last thing they have to worry about. That's where we stepped in: To reframe the experience so Googlers could focus on innovation instead of logistics.
The spreadsheet era.
The spreadsheet era.
Google’s UXI Spaces team managed the rooms using a spreadsheet embedded in an internal site.
Everything was done manually, not only by admins but by users as well. Updating the spaces availability by marking each space status for specific dates, directly in the spreadsheet.
Google’s UXI Spaces team managed the rooms using a spreadsheet embedded in an internal site.
Everything was done manually, not only by admins but by users as well. Updating the spaces availability by marking each space status for specific dates, directly in the spreadsheet.
“This approach requires constant and time-consuming adjustments and leaves room for potential inconsistencies and errors.
The process is tedious, inefficient, and prone to mistakes, it creates challenges in maintaining accurate and up-to-date information.”
“This approach requires constant and time-consuming adjustments and leaves room for potential inconsistencies and errors.
The process is tedious, inefficient, and prone to mistakes, it creates challenges in maintaining accurate and up-to-date information.”
First things first.
First things first.
Before moving a single pixel I created user flows to help us identify key moments in the experience and understand how users needed to interact with the platform to successfully book a space.
The user flows also became a shared reference between design and engineering. They helped shape the platform's data model and architecture while defining the feedback users needed throughout the booking process.
Before moving a single pixel I created user flows to help us identify key moments in the experience and understand how users needed to interact with the platform to successfully book a space.
The user flows also became a shared reference between design and engineering. They helped shape the platform's data model and architecture while defining the feedback users needed throughout the booking process.
Wireframing with “LEGO bricks”.
Wireframing with “LEGO bricks”.
Once user flows were validated with the team and stakeholders, we moved on to high fidelity wireframes to define the layout and structure of each section.
Because the product ran on an internal CMS based on Material Design, we built it within an existing set of constraints.
Existing Material Design components became our LEGO bricks. Recreating them in a Figma library allowed us to assemble, combine, and customize components to fit the experience, instead of reinventing the whole thing from scratch.
Once user flows were validated with the team and stakeholders, we moved on to high fidelity wireframes to define the layout and structure of each section.
Because the product ran on an internal CMS based on Material Design, we built it within an existing set of constraints.
Existing Material Design components became our LEGO bricks. Recreating them in a Figma library allowed us to assemble, combine, and customize components to fit the experience, instead of reinventing the whole thing from scratch.
Wireframe – Homepage
Wireframe – Homepage
HERO
Module’s goal:
Welcome, and give users a quick start to search for spaces.
Module’s anatomy:
H1 – Headline to welcome and invite users to start searching spaces.
H2 – A CTA subtitle to callout the search functionality.
Location dropdown – Default option set, based on user’s location.
Space Type dropdown.
Hero image – Featured UXI space, fixed, not gallery nor carousel.
CTA Button – Takes users to search results page, based on their inputs.
FIT FOR PURPOSE
Module’s goal:
Encourage exploration and learning about different UXI spaces
Module’s anatomy:
Eyebrow.
H3 – Overview about the existence of different kinds of spaces and their features.
P – Describes the existence of different spaces, while inviting to explore.
CTA Button – Will take user to the Spaces page for them to explore the different categories.
Wireframe – Search Results
Wireframe – Search Results
FILTERS ON SEARCH RESULTS
Module’s goal:
Allow users to define their search, by:
Typing a specific space name
Changing the location
Changing the type of the space
*Filters should stay fixed on the screen, while users scroll down on search results
RESULTS AREA
List of cards components.
Each card is designed to represent a room and surface its most important details at a glance.
The card itself also acts as a call to action, allowing users to start the booking process with a single click.
Room card anatomy
One of the most important components of the search results page was the room card.
We needed to communicate each room's key features and essential details within a small UI component, to ensure users could understand whether the space was right for their project.
Breaking down the anatomy of the card, helped us a lot to iterate and shape up the components final version.
Room category and type – Communicates to user to what category and type the room belongs.
Room name – One of the main elements in the card is the room’s name, allowing users to identify instantly.
Userplex tag – Identifies rooms located within a Userplex, Google's dedicated user research facilities.
Alert icon – Indicates that the room has a callout, such as “Room under maintenance”. Messages displayed in a tooltip.
Room’s capacity – Amount of people that can fit in the room.
Card CTA’s – Primary CTA to go right away to the Booking process, and Secondary CTA to se more details about the room.
Location specs – Displays in a simplified way the location, including building, floor and room’s number.
Thumbnail – Gives users a quick glimpse of the room's interior.
A few more wireframes
A few more wireframes
Bringing it all together.
Bringing it all together.
After validating the wireframes, we glued the LEGO bricks together and started to apply final design (which, honestly, wasn’t so far way from the wireframes, since we were using Material Design, and we followed Google’s minimal visual language...).
The addition of rooms imagery, however, became the visual accent that gave the interface warmth and personality, elevating the overall experience.
Even at this stage, the design continued to evolve. Thanks to the UI library we built and a well-structured Figma framework, we were able to iterate quickly and make updates with ease.
Homepage
Homepage
BALANCING ACTION, EXPLORATION, AND SUPPORT.
The final homepage structure is designed to support users at every stage of their journey.
Users who already know what they need can immediately start searching for the right space for their project.
Those who are still exploring are encouraged to learn more about the UXI Spaces before making a booking.
And finally, a dedicated support section at the bottom provides answers to common questions and helpful guidance for first-time users.
Search Results
Search Results
EASY TO SCAN RESULTS.
The search results are presented as cards that highlight key information users need to evaluate each room option.
While scrolling the results list, users will have the filters visible and at hand all the time, for them to refine the results even further.
The “Show more” was a technical decision to improve performance, but at the same time, gave us the opportunity to reduce cognitive load and prevent users from being overwhelmed with a long, continuous list of results.
Booking step
Booking step
A CONFIDENT FINAL STEP.
The final booking step gives users everything they need to book with confidence.
A prominent calendar, powered by the booking system API, makes it easy to find an available time slot.
A concise summary of the room's key features, along with access to more detailed information, helps users confirm that the space meets their session needs.
And experience is further enhanced with personalization options, allowing users to name and describe their event, as well as invite participants directly from their contact list.
Booking confirmation
Booking confirmation
TIMELY FEEDBACK ALWAYS.
The cheery on top, users are presented with a confirmation modal that summarizes the event they just created, providing reassurance that their booking was completed successfully.
The message also guides them to next steps, such as viewing the event in their calendar, confirming room access, or booking another space.
What about documentation?
What about documentation?
The design work for this project went far beyond creating polished UI screens. Every user action had to be mapped to the appropriate screen or interface state, ensuring a complete UI flow that the dev team could implement with confidence. This process also included defining micro-interactions, documenting new components, and detailed handoff specs.
Making prototypes played a key role in communicating transitions and animations that static designs couldn't capture, and a well-organized Figma workspace, combined with detailed documentation for components, assets, and content, made collaboration and implementation significantly smoother.
The design work for this project went far beyond creating polished UI screens. Every user action had to be mapped to the appropriate screen or interface state, ensuring a complete UI flow that the dev team could implement with confidence. This process also included defining micro-interactions, documenting new components, and detailed handoff specs.
Making prototypes played a key role in communicating transitions and animations that static designs couldn't capture, and a well-organized Figma workspace, combined with detailed documentation for components, assets, and content, made collaboration and implementation significantly smoother.
Animated prototypes
Animated prototypes
Prototypes like the ones above, helped us to communicate micro-interactions that static screens couldn’t capture. Subtle, but they document and communicate the movement and timing of elements such as carousels, as well as how the support button transitions into an icon-only button while users scrolled on mobile.
Documentation sample
Documentation sample
This is a sample of the documentation created for the project, where every interaction was mapped in Figma, for example, we documented how input fields depended on one another and how the underlying data model changed based on user input.
The file also included dotted badges that linked developers to the resources they needed, such as component documentation, copy documents, and folders containing imagery, illustrations, and other design assets.
They said it, not me.
They said it, not me.
Since this was a project within the constraints of a 6 months contract, once the product was launched, we weren’t able to track user sessions and metrics, but we got a really nice piece of feedback from the stakeholders:
Since this was a project within the constraints of a 6 months contract, once the product was launched, we weren’t able to track user sessions and metrics, but we got a really nice piece of feedback from the stakeholders:
“Last week, our UXI Spaces stakeholders participated in a UXI summit in NYC.
This summit consisted of updates from Google's UX leadership, workshops and a view into the work happening around UXI. As a part of the summit, John and Jane presented our work and it was extremely well received!
Jane noted that multiple people turned around to her and remarked 'that's what you've been working on? It looks amazing!.
Moreover, the head of UXI gave her own 'ohs and ahs. She also noted that our work is very professional and well-thought out, leagues above many other sites Google is launching internally.
I've said this a lot but everyone should be really proud of this work — it demonstrates the best of Beyond and why we're a preferred”
– Google partner.
“Last week, our UXI Spaces stakeholders participated in a UXI summit in NYC.
This summit consisted of updates from Google's UX leadership, workshops and a view into the work happening around UXI. As a part of the summit, John and Jane presented our work and it was extremely well received!
Jane noted that multiple people turned around to her and remarked 'that's what you've been working on? It looks amazing!.
Moreover, the head of UXI gave her own 'ohs and ahs. She also noted that our work is very professional and well-thought out, leagues above many other sites Google is launching internally.
I've said this a lot but everyone should be really proud of this work — it demonstrates the best of Beyond and why we're a preferred”
– Google partner.
