Problem

Currently, PlaceTime is lacking an onboarding flow and contains an inconsistent way to view property listings on their app. This makes it difficult for users to navigate to an office space they would want to explore, which in turn, hurts user retention.

Solution

With a project scope of 6 weeks, my mission was to help users quickly learn and navigate the app. I would standardize a simple and engaging flow/journey so that their featured commercial properties can encourage its users to dive in and utilize PlaceTime’s most powerful feature: viewing offices in 3D augmented reality.

My Role

As a UX Designer, I developed new user flows for onboarding and property listings/overviews based on previous user research and defined target users. After solidifying those flows, I produced wireframes, a new style guide, and high fidelity designs which were handed over to the SpatialFirst team for 3D spatial integration into PlaceTime’s beta product.

Research and Preparation

Usually a property inspection involves examining electrical systems, plumbing or roofing. Instead, my appraisal of PlaceTime began by gathering information about the commercial real estate (CRE) market and understanding the target users defined by SpatialFirst:

Studies showed that 92% of surveyed CRE executives plan to maintain or increase investments in technology, with more than 80% of property buyers and sellers who would switch to a real estate agent that offers immersive 3D tours of listed properties (83% Millennials, 94% Generation Zs).

For PlaceTime to align itself with these needs, I needed to come up with the best approach on how I could get users to actually go into the 3D office models and walk around them. I proceeded to assess what could use improvement by inspecting the current beta product.

User Flows

After taking an in-depth look inside the beta, I created before and after user flows to fully map out what steps I can rearrange, consolidate, or eliminate. One flow for onboarding and another for property listings/overviews.

Possible hurdles and pain points from the current onboarding user flow:

• First screen deep links to a tutorial video leading to possible user retention issues
• Multiple dead ends where a button doesn’t lead to anywhere
• Screen with initial localized map missing guidance/CTA of what to do next, had to use a joystick menu to access a different map to view welcome graphics (featured properties, tutorials, help, etc.)

Proposed solutions in new onboarding user flow:

• First time or guest users will be directed to a tutorial page, visualizing the hand gestures with an option to practice on a test map before ending up on new home page
• Meanwhile, returning users will start on the new home page in which you can select a city to view
• After selecting a city, you then can select a property to explore

Possible hurdles and pain points from the current property listing/overview user flow:

• Lots of steps and decisions to go through, difficult to jump back to key scenes
• Hard to locate the next step or CTA once an office space is selected (book/schedule tour, gallery, 3D models, etc.)

Proposed solutions in new property listing/overview user flow:

• Selection consolidated into four options instead of six
• Neighborhood amenities and transportation options can be filtered out into specific category (public transit, taxi/rideshare, dining, health/lifestyle, etc.) instead of going through multiple scenes
• Book tour/contact button accessible at any time through office tour/walkthrough

Sketches

I presented the refined user flows to Bart Denny, co-founder of SpatialFirst, to make sure I was still in line with the startup’s vision. After incorporating his feedback and notes, wireframing began. In between screens, I would sketch out ideas on how I wanted to layout all the different elements.

Doodling really helped me develop a new logo for PlaceTime. With the three-dimensional style and “building block” look of their localized maps as my inspiration, I went for a modest and clean isometric look.

Wireframes

One by one, all the other pieces of the wireframes were coming together.

I was tasked to only focus on optimizing for iPad screens as target users are most likely to be giving tours with a tablet.

Wireframes before visual design

On The Same Page

Before leaping into the final designs, I reviewed the wireframes with co-founder Bart. He was thrilled about what I had created, and led for many more light bulbs to go off inside his head. With excitement, he emphasized that we can still trim out more fat and transform the journey to its simplest and most intuitive state.
‍
The flow he wanted me to focus on was the property overview as it would become their template for all properties. The goal was always to get users to convert. Bart added:

He wanted a path with the option to contact or explore, along with a primary CTA to take a look inside. With a couple of ideas looming in my mind, I created a new style guide for PlaceTime before hammering out the final mockups:

High Fidelity Screens

The final results were the following high-fidelity screens, optimized for iPad screens:

New onboarding splash page

New tutorial page for new users or guests

New option to select a city from the beginning

New corresponding list of properties
for user to easily locate on map

New navigation bar with help section that includes FAQs, email support and tutorials

Solution to Bart's problem: a new property overview window calling users to go inside, explore or contact a property

Once inside, select space to tour

Take a look at unique building features

Walkthrough tour with new directional buttons to guide users into main rooms

Contact button can be accessed anytime throughout walkthrough

New window with contact options

New transportation & neighborhood page

Transportation options and neighborhood amenities can be viewed through filters instead of going through multiple screens

Outcomes

My designs were handed off to the SpatialFirst team and so far, many of my elements have been implemented into a new version of their beta product via Unity and Apple's ARKit. I was able to create a standard template that guides brokers and tenants to get what they came to see, creating the capacity for greater success in leasing commercial office space. Because SpatialFirst is still defining exactly what content they want in PlaceTime, change is inevitable. Nonetheless, what I was able to deliver is a step in the right direction and if anything, it provides the foundation for future iterations.

My project with SpatialFirst was only a month and a half, so if I had more time, I would have done in-person usability testing to validate the solutions I created. My first goal would be to decrease the abandonment rate by 80% or drive the leasing rate up by 60% of all overall visits. With the AR functionality of the app, I would closely pay attention to how users would walk or move with an iPad in their hand. By understanding their struggles, observing what does/doesn’t work, and recognizing what could be more helpful for users, I can keep iterating and testing designs until they reach their full potential.