SuffolkCover_WoodenTable_small.jpg

Suffolk Construction AR

UX | UI | AR

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

Sitemap Suffolk AR.png

Wireframes and Flows

Home: login + download project:

Home Flow.png

Find Augmented reality Marker:

Project page wireframe vs. final UI:

ui.png

Interaction - Navigation

projectpage480px.gif

Interaction - Augmented Reality

ARGalleryCard.gif
Hotspots UI.png

UI & Accessibility

Dark translucent containers with white text were used to ensure legibility against dark or light backgrounds:

UI Legibility.png

Design System

Design System2.png