Michelle Hessel
SuffolkCover_WoodenTable_small.jpg

Suffolk Construction AR

UX | UI | AR

Suffolk Construction

augmented reality app for architectural models.

Categories: UX, UI

Tools: Sketch, InVision, Principle

Role: UX and UI Designer

September 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 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.


Sitemap

Sitemap Suffolk AR.png

Wireframes and Flows

Home: log in + download project:

Home Flow.png

Find Augmented reality Marker:

Project Page Final UI:

Project Page Wireframe:

ui.png

Project page UI animation:

projectpage480px.gif

AR Interface and Interactions

ARGalleryCard.gif
Hotspots UI.png

UI legibility

Dark translucent background with white text ensures legibility in mixed tone, dark and light environment:

UI Legibility.png

Design System

Design System2.png