augmented reality app for architectural models.
Categories: UX, UI
Tools: Sketch, InVision, Principle
Role: UX and UI Designer
Suffolk is the largest construction company in Massachusetts and one of the 20 largest in the USA. In 2019 Suffolk hired QReal, a NY-Based creative technology startup, to create an app that would showcase their selected works in Augmented Reality. The goal is to replace physical models of buildings with a digital and interactive tool that can be used in internal and client meetings to visualize construction projects.
I was hired by QReal to design the user experience and user interface of Suffolk’s app. My previous expertise in Augmented Reality + UX and UI were key to deliver the project.
App Main Features
Home Page: Public x Private Projects (login required)
Project Page: Flexible template (Not all projects have the same assets and the template must work for all of them)
AR Mode: Marker-based Augmented Reality interface
AR Interactivity: Change properties of the 3D model (expose structural layers of the buildings, see specific sections, construction timeline, day/night renderings)
Project Assets: 360 images, videos, PDFs, photo galleries, floor plans
UX and UI Challenges
3D Interactions: Gestures like pinching, scrolling and tapping have different meaning in a 2D vs. 3D context.
Environmental Design: The physical space must be considered are part of the context in people will be engaging with the application. In that sense, it’s important to know that the distance between the user and the piece of content determines the size of the content. It is also important to understand that the colors and light in the environment will affect how legible the UI elements are.
Flexibility: each construction project has unique features and the documentation of it varies. The design of the app be flexible enough to work for any Suffolk project.
Wireframes and Flows
Home: log in + download project:
Find Augmented reality Marker:
Project Page Final UI:
Project Page Wireframe:
Project page UI animation:
AR Interface and Interactions
Dark translucent background with white text ensures legibility in mixed tone, dark and light environment: