UX, UI, and Augmented Reality: Breaking Down RentAR

Brian Hui
Magic Media
Published in
6 min readSep 14, 2018

During my first semester in the Fall of 2016 as a graduate student at New York University’s M.S. Integrated Digital Media program, I enrolled in the Mobile Augmented Reality Studio class. It was a lot of fun and I enjoyed learning Unity and Vuforia through the class. For our final projects, we were tasked to create an AR experience — any AR experience. I decided to create a real estate AR experience. It’s called RentAR.

Video demonstrating final prototyped features of RentAR

Why RentAR?

The rationale for this was simple. Create an AR application to aid in the apartment searching process. In a city like New York, it can be quite tedious to go apartment hunting. We usually sit at our laptops and stare at websites such as Zillow, StreetEasy, Roomi, etc. This AR experience was not created to replace these tried and true platforms. Instead, this experience was for on-the-fly searches in neighborhoods that you may be walking in.

Imagine this: you’re in a beautiful neighborhood with your friends one day. You see a building that you’ve never noticed before. It’s amazing, and the neighborhood is awesome from what you’ve seen. You pull out your phone, launch RentAR, point your phone at the building, and you’ll be able to instantly see if there are vacancies or not. This type of instant information is what I’ve designed this experience to be.

With this concept in mind, I had to do additional research on the AR space, existing applications, and similar applications of AR.

UX for AR: A New Frontier

When I was doing research during the concept phase of this experience, I knew that the user experience (UX) for this experience had to make sense for this new frontier of computing. I narrowed down three things I wanted this experience to do that would differ from current implementations of similar location-based AR search applications.

  1. Information Quick Look: It had to display enough information for quick, at-a-glance readability. It’ll allow for quick interactions without someone holding their phone up for too long.
  2. Cleanly Actionable: There can’t be clutter in the listings it shows. The person experiencing it should only see what they want to see.
  3. Seamless & Simple: The augments in the experience should be simple as people would need to seamlessly navigate between the physical world and their digital display easily.

Throughout the development of my project, I kept these three principles in mind.

The At-A-Glance Interface

During my research/concept phase, I discovered that a lot of people (myself included) didn’t really like holding their phone up for too long. Personally, I found it very uncomfortable holding my phone to face level for long periods of time. Coupled with the fact that it felt weird holding up your phone and not doing something socially acceptable (like taking a picture) felt like I was breaking a law or something. This was something I recall hearing from my friends earlier that year when Pokémon GO first released. People felt more at ease, and their posture more relaxed, while they held their phone at about chest level (which we all do every day).

With this information in mind, I realized that information needed to be quickly accessible and readable and developed my idea of Information Quick Look for the RentAR interface.

RentAR Experience Interface

In my interface, I made sure that people could immediately see the key details of a listing immediately. The augments here allow for clear and actionable interactions while being seamlessly, and simply, integrated into the experience.

These details include the address, number of bedrooms and bathrooms, the rent amount per month, room markers as confirmation of the details, and a 2D and 3D floor plan. Each of the room markers would be interactive, allowing people to press into them to see 360-degree photos of the space. The address and details would expand to reveal additional information points like nearest subway and bus stations, nearest schools, closest grocery stores, etc. 2D floor plans can be used to see how the overall space is laid out. 3D floor plans, on the other hand, were designed to include 3D models of furniture so that you would be able to visualize and comprehend the space that you may have after you’ve put furniture into your apartment.

Ideally, when you launch the app and point your phone at the building you’re interested in, you’ll see something like this or maybe just a box at the top that tells you there are no vacancies. This interface was designed to embody the three principles I had laid out at the beginning of the project: Information Quick Look, Cleanly Actionable, and Seamless & Simple.

Features For a Different Real Estate Experience

This part is a little less UX and more about me having fun with the project. Since this experience would live on a smartphone, I decided to implement three features that I thought would be cool to have.

These include 360 Photos, 3D Floor Plans, and Room Markers.

360 Photo Implementation

360 Photos

The decision to implement 360-degree photos was an easy one. People that I talked to, myself included, were frustrated that photos of apartments would sometimes be taken with wide angle lenses. This sometimes gives a false impression that the room is larger than it is. It’s especially deceiving when the room being photographed is empty. Utilizing 360 photos allows you to move the phone around to see the whole room. Ideally, you would see furniture in it too so you would get an accurate depiction of scale in the room.

3D Floor Plan Implementation

3D Floor Plans

This was an idea I had that was, again, born out of the frustration that you couldn’t really tell the scale of the room from pictures or floor plans sometimes. The 3D floor plan would incorporate transparent walls and 3D models of furniture that would be at scale with the floor plan. Ideally, this would give users a sense of space inside the apartment. It could allow for those moments like, “Will this TV stand fit in my bedroom?” or “Do I have enough room in my living room for a three-seater couch?” Including a 3D floor plan was just another way of giving people new ideas on how to decorate their dream apartment. Who doesn’t want that?

Room Markers

Room Markers was a fun idea I had that would let you see the location of the rooms from the outside of the building. It was also a way to let you corroborate the room details and get a general layout of where the rooms are without opening any of the 2D or 3D floor plans. The general thinking behind room markers was that it would be a UI solution to access the 360-degree photos.

Thinking For the Future

This project gave me a really good look at how to approach UX and UI in AR apps and allowed me to gain a better understanding of how to design a good UX and UI for AR experiences. My three biggest takeaways are:

  1. Design for comfort in mind and be mindful of how long users need to hold up their devices.
  2. Design a simple and clear interface so that users aren’t overwhelmed with augments.
  3. The AR components shouldn’t feel like they’re tacked on. It should be designed with a purpose.

In future iterations, I’d love to refine this concept for an AR real estate app to better solve people’s problems. Although, I feel like this app would be better suited when smartglasses or smart contact lenses are adopted by consumers. Overall, I’m excited for the future of not just mobile AR, but to see where the next generation of AR devices take us as we design for these new experiences.

--

--

Brian Hui
Magic Media

Consultant, UX Design @ Sogeti, Part of Capgemini. Product Designer. AR/VR Enthusiast.