Suffolk Construction AR
augmented reality app for architectural models.
Role: Solo Product Designer
Year: 2019
The Project
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.
My Role
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 delivering 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
Design Challenges
3D Interactions: Gestures like pinching, scrolling and tapping have different meanings in a 2D vs. 3D context.
Environmental Design: The physical space must be considered are part of the context in which 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 should be flexible enough to work for any Suffolk project.
Sitemap
Wireframes and Flows
Home: login + download project:
Find Augmented reality Marker:
Project page wireframe vs. final UI:
Interaction - Navigation
Interaction - Augmented Reality
UI & Accessibility
Dark translucent containers with white text were used to ensure legibility against dark or light backgrounds: