Peerspace x Google Site

Role

Lead designer & Webflow developer.

background

Peerspace is the largest online marketplace for meeting space and venue rentals. With remote work becoming the norm, the demand for flexible work solutions is higher than ever. Our aim for this project was to strengthen our relationship with Google and discover potential new ways we can provide value to corporate partners.

challenge

I was tasked to create a custom portal for Google employees to discover and book pre-approved meeting spaces, providing a streamlined and seamless experience specific to the needs of these users.

project Objectives

Why are we doing this?

Increase bookings.

Increase bookings from Google employees by designing solutions to accommodate their unique needs.
‍

Strengthen partnership.

Provide meaningful value to individuals working for Google as well as the organization as a whole.

Pilot program.

Design and build partnership pilot program that can be replicated and customized for future collaborations.

Ideation

Getting started.

Site Structure.

As a starting point, I mapped out the different pages, actions, and routes users would need to find what they're looking for and accomplish their goals. This flow served as a broad outline for me to reference throughout the design process.

V1 Sketches.

Next, I created some rough wireframe sketches to conceptualize the layout of the different pages. These low fidelity designs allowed me to communicate my ideas and gather feedback without getting too lost in the details.

Feedback & iterations.

Based on feedback gathered from the product team and other stakeholders, I updated my sketches with more detail. The site was planned to consist of a homepage and 8 region specific sub-pages as well as navigation that links to listings and other company resources.

Usability testing.

Since refining the conceptual experience of the site was the most important aspect of this project, I built a clickable wireframe prototype in Figma to validate my designs before moving on to visual details. After a few rounds of iterations guided by stakeholder feedback, we were ready to move on to designing higher fidelity versions of the site.

interface design

Functional meets pretty.

Webflow design system.

To remain consist with Peerspace's brand identity, I created a design system within Webflow to reflect Peerspace's official style guide with some additional subtle indicators that it was a separate platform specific to the Google partnership.

Responsive design.

While desktop was the main priority for this project, it was essential that the site was responsive on all devices. This ensured content would flow well across all screen resolutions/sizes and make the site look great on any mobile phone, tablet, and desktop.

dynamic content

Managing moving pieces.

The challenge

Managing dynamic content.

Since Peerspace is a marketplace with thousands of listings that are changing constantly, it was a challenge to figure out how to ensure the microsite was accurately reflecting the appropriate spaces and correct space information. Since the microsite is independent from the main Peerspace site, it was not able to be connected to the main product's admin database. Manually updating the displayed listings and the space details was not a realistic or sustainable option for maintaining the microsite.

The Solution

CMS collections.

The solution to this issue was utilizing Webflow's CMS (content management system). This allowed me to store and maintain all of the dynamic listing information in collections which acted as a database that could be easily referenced throughout the site. Not only did this make it possible to keep listings and space information up to date in an efficient and effective way, it also made it possible to conveniently filter visible content based on specific conditions. These conditions included region, use type, capacity, hourly rate, and host discounts.

final product

Peerspace x Google.

Retrospective

Final thoughts.

Designing this portal for Google employees to easily discover and book pre-approved meeting spaces based on their specific needs led to a significant increase in bookings from Google employees, proving the mutual value of collaboration sites and establishing the framework for future partnership programs.

Although having limited resources during this pilot project provided many challenges, it opened the opportunity to uncover creative solutions and unlock the infinite possibilities that didn't seem possible prior.

PROJECT GOALS

Who, what, why?

Stakeholders

Create inclusive designs that seniors can use, regardless of functional limitations.

REMOTE WORK

Design to improve the lives of users by creating a tool to help them regain independence and freedom.

INCREASE BOOKINGS

Streamline the process of accessing and coordinating adequate transportation for seniors and caregivers.

STRENGTHEN PARTNERSHIP BETWEEN GOOGLE & PEERSPACE

Design a smooth, efficient, and consistent experience that users can rely on.

The build

Development and Implementation

Webflow Platform.

To share the progress and discuss designs with collaborators and stakeholders, we showed created, showed, and gathered feedback via Figma.

Webflow Platform.

Our goal was to develop and release the Homepage independently from other pages of the website. Such a situation is quite typical: it allows the Sales team to use the website as soon as possible.

If the website has blocks or layout elements that are used on different pages (navigation bar in the header, footer, pop-up windows), they can be created once as Symbols, and then their copies can be used on different pages. This sticks to the same principle as in any graphic editor. If anything is changed in a Symbol, the changes will be implemented on all pages.

Style Guide & Design System.

Our goal was to develop and release the Homepage independently from other pages of the website. Such a situation is quite typical: it allows the Sales team to use the website as soon as possible.

If the website has blocks or layout elements that are used on different pages (navigation bar in the header, footer, pop-up windows), they can be created once as Symbols, and then their copies can be used on different pages. This sticks to the same principle as in any graphic editor. If anything is changed in a Symbol, the changes will be implemented on all pages.

Dynamic Content.

Webflow has its own system of content management. It is mostly used for the pages where the design stays the same but the content has to be changed from time to time, like for example a page of a team member, blog posts, product pages on the ecommerce store, etc. For this project, we used Webflow CMS to make the pages for Insights and Terms & Policies.

Animations.

Webflow has its own system of content management. It is mostly used for the pages where the design stays the same but the content has to be changed from time to time, like for example a page of a team member, blog posts, product pages on the ecommerce store, etc. For this project, we used Webflow CMS to make the pages for Insights and Terms & Policies.