• Archi-AR

  • Archi-AR

  • Archi-AR

  • Archi-AR

  • Archi-AR

Archi-AR

Architects and designers, challenged by the high cost and time needed for creating 3D visualizations, can now utilize Archi-AR. This solution offers an immersive augmented reality experience, enabling quick and cost-effective generation of 3D home models from user-defined floor plans, without requiring extensive software knowledge.

Role

I designed prototyped and built 3D visualizations for an interactive app for architects. This was a concept project for a class I was taking via General Assembly.

Company
LTK - (Liketoknow.it)

Year
2018

Type
UI/UX Design, Motion Design, Design Systems

Platforms
Mobile - iOS & Android

Challenges

Contractors and architects often face criticism for the cost and time involved in producing 3D visualizations of floorplans. Clients desire quick access to 3D home models, but creating these detailed visualizations is inherently time-consuming.

Understanding the landscape

Designers face constraints with the time and cost of creating 3D visualizations of client homes. Archi-AR stands out by offering a time-efficient and cost-effective solution to bridge this gap.

Solution

Offer an immersive, interactive experience by utilizing augmented reality to asynchronously generate 3D homes from user-defined floor plans.

My process

Problem existence

The process of analyzing 3D visualization from a floor-plan can be time consuming and costly. In my previous experience I have worked with designers, architects, and the like and I can relate to the process. I want to create a quicker way of translating 3D while using new technology.

​​​​​​​Interviews & Contextual Inquiry


Literature review

By understanding 3D technology and augmented reality we can better grasp how the two entities coincide together. Using an image or image target via AR serves as a tracking base for the augmented reality feature to work in the real world space. I studied further and gathered related information about how video games use such a feature.‍

Affinity Mapping 

I created an affinity map to help me dial down the insights from the interviews and contextual inquiry and also to begin ideation on the product. Narrowing the trends from frustrations and needs of the potential users is defined from affinity mapping.

Competitive analysis

A competitive analysis helped in understanding how other products are doing in the market and what features they use. This helped me structure the app accordingly from in depth qualitative aspects.

‍User persona evaluation

I created multiple personas or hypothetical users that represent my target users. These personas are based off the initial user interviews. This also helps me outline my goals and strategies.

Storyboard journey

I created sketches featuring my persona, Nicole, to pinpoint critical moments in an architect's consultation process with a client. Using a storyboard, I visually demonstrated the user's problems and key early moments in their experience.

System map for ideas

Wire-frames

Cardboard AR prototyping

To convey the concept of Augmented Reality, I used cut-out shapes representing a house layout and a cardboard layout device, enabling testers to grasp the AR idea more intuitively. I tested this physical prototype with several people.

I drew and cut out a physical phone device and a small foam building to demonstrate to a few test participants on the AR (Augmented reality) feature of the app.

  • Participants got it on the first go around with little explanation.

  • I asked a few question to get an idea of how does this feel.

Building the 3D model

To facilitate the Augmented Reality (AR) visualization, I used a real-world floor plan as an image target for AR tracking. This floor plan was imported into a 3D software, like Autodesk Maya, serving as the image target. The system utilizes coordinates that track onto the image, translating the data back to the device camera. I then created a 3D model of the floor plan and exported it into Spark AR Studio, enabling me to prototype the AR feature effectively.

Testing in Spark AR (Facebook)

A tool developed by Facebook allows you to import models. Purpose is to share and provide AR content creation on social media platforms. I would normally build this test in Unity game engine but the time of build and space resources is too much. Also instead of using one program you'd have to use Unity in combination with X-code.

Final design

Usability testing updates

The participants had a hard time understanding the buttons on the render screen. So, instead of users pressing to see what happens, I labeled them accordingly to reduce confusion. I also placed the save button above the inspect menu for ease of access.​​​​​​​

Some users were confused with the background color choice. I then changed it to fit a more neutral background instead of pitch black background. This also helped pull items off and view better.

When editing your personal details like changing a password. Some users were confused to what the red dot initially meant. I then added micro-copy under the input field to aid the experience.


Final Thoughts and Learnings

Throughout this journey in developing Archi-AR, a UX case study focusing on streamlining 3D visualizations for architects and designers, I gained invaluable insights and knowledge. Here are my key takeaways:

  1. Bridging Technology with User Needs: The primary challenge was to bridge the gap between complex 3D visualization technology and the real-world needs of architects and designers. Archi-AR addressed this by providing an intuitive augmented reality platform, simplifying what was once a time-consuming and costly process.


  2. User-Centric Approach: Conducting interviews, contextual inquiries, and building user personas like Nicole were instrumental in understanding the user's perspective. These steps ensured that the solution was not just technologically advanced but also resonated with the actual users – architects, designers, and contractors.


  3. Innovative Prototyping: The use of cardboard AR prototyping was a unique approach that helped in conveying the concept effectively to test participants. This hands-on method proved efficient in gathering immediate feedback and understanding user interactions with the AR feature.


  4. Technical Challenges and Solutions: Building the 3D model in Autodesk Maya and prototyping in Spark AR Studio highlighted the importance of choosing the right tools for development. It underscored the balance between technical capability and ease of use, especially when considering users who may not be tech-savvy.


  5. Iterative Design and Testing: Usability testing was crucial. Receiving feedback on aspects like button clarity, color choices, and micro-copy adjustments reinforced the importance of iterative design. Making these changes based on user feedback significantly improved the app's usability.


  6. Real-World Application and Reception: Presenting the concept to industry professionals validated the need for such a tool. The positive reception, even from those less familiar with technology, indicated a strong market need for Archi-AR.


  7. Personal Growth and Professional Development: This project was a tremendous learning curve, enhancing my skills in user experience design, AR technology, and project management. It demonstrated the power of empathy in design and the need for continual adaptation to user feedback.

Open to new work

Have a project or opportunity in mind?

Back