UI/UX Design, Interaction Design
Quadreal Spaces
Creating awareness for an innovative office seat reservation system
Role
UI/UX Designer
Client
Quadreal
Industry
Real Estate Investment
Year
2023
Project Overview
QuadReal Property Group is a global real estate company specializing in investment, operations, and development.
In 2023, they sought to raise awareness for their latest product, Spaces—a program that enables tenants to monitor available office space in real time and easily reserve a spot.
Lacking in-house designers and facing limited bandwidth, stakeholders turned to my team at Ceros for support in creating an engaging, interactive experience and also requested that we include a booking demo that acts as a preview to how Spaces work.
QuadReal Property Group is a global real estate company specializing in investment, operations, and development.
In 2023, they sought to raise awareness for their latest product, Spaces—a program that enables tenants to monitor available office space in real time and easily reserve a spot.
Lacking in-house designers and facing limited bandwidth, stakeholders turned to my team at Ceros for support in creating an engaging, interactive experience and also requested that we include a booking demo that acts as a preview to how Spaces work.
Utilizing their brand
QuadReal's team provided an extensive branding kit for me to use for the experience. During my review, I found opportunity to add animation and interactivity to assets so that they would engage with users and guide them through the site. Knowing that I would need to find a solution that would organize the content so that it didn't overwhelm users, I compiled different modules, such as carousels, pop-up windows, and tab systems within Ceros, a no-code publishing platform. I also made sure that the modules were reusable for future projects.
QuadReal's team provided an extensive branding kit for me to use for the experience. During my review, I found opportunity to add animation and interactivity to assets so that they would engage with users and guide them through the site. Knowing that I would need to find a solution that would organize the content so that it didn't overwhelm users, I compiled different modules, such as carousels, pop-up windows, and tab systems within Ceros, a no-code publishing platform. I also made sure that the modules were reusable for future projects.
Wireframing the Layout
After reviewing the assets, I sketched out a wireframe of how I envisioned the page. I knew I had to include the key features of the product so that it was straight to the point, but also kept users engaged enough so that they wouldn't close out the page. I also decided to have the booking demo in its own section so that it could stand out and be simple to use. Once users reach the end of the page, there would be an outbound link to sign up for Spaces.
After reviewing the assets, I sketched out a wireframe of how I envisioned the page. I knew I had to include the key features of the product so that it was straight to the point, but also kept users engaged enough so that they wouldn't close out the page. I also decided to have the booking demo in its own section so that it could stand out and be simple to use. Once users reach the end of the page, there would be an outbound link to sign up for Spaces.
Full Design
After I presented and gained QuadReal's approval for both the layout and animations/interactions, I built out the landing using the modules that I previously created in the brand toolkit. Since most of the heavy lifting was done, it was just a matter of moving the pieces around to complete the puzzle and filling in the content. For the booking demo, I used approved product screenshots and popups to create a simplified, step-by-step workflow that shows users how easy it is to use the program.
After I presented and gained QuadReal's approval for both the layout and animations/interactions, I built out the landing using the modules that I previously created in the brand toolkit. Since most of the heavy lifting was done, it was just a matter of moving the pieces around to complete the puzzle and filling in the content. For the booking demo, I used approved product screenshots and popups to create a simplified, step-by-step workflow that shows users how easy it is to use the program.
Outcome
Upon completion, I sent over the file to Quadreal and they worked with their IT team to implement it onto their website. While the page acts as a product preview, the goal is to foster in-person collaboration between users in the same community.
Upon completion, I sent over the file to Quadreal and they worked with their IT team to implement it onto their website. While the page acts as a product preview, the goal is to foster in-person collaboration between users in the same community.
Other projects
My Cause, My Cleats
Designing a microsite that connects Lions' fans with their favorite players' charities.
DMA Museum Map
Designing a mobile experience that helps visitors find their bearings.
The Standard Move-In 2023
Designing a landing page that organizes important information for students.
AI as a Service
Transforming a static PDF into an interactive experience