Evercam Capture

An app for construction sites to capture detailed walkthroughs using an external camera

Table of contents

Scope
Discovery
Key Insights
Solution




The scope

Evercam.io provides construction camera software that helps with time-lapse video creation, live monitoring, and project documentation. It uses advanced camera technology and AI-driven analytics to let project managers, contractors, and stakeholders monitor sites remotely in real-time.

Construction site walkthroughs play a critical role in project documentation, quality control, and team collaboration. However, traditional methods of documenting progress, which rely solely on photography, often miss key details (create blind spots) and create communication gaps among stakeholders. To address these challenges, Evercam assigned me the task of designing a user-friendly mobile app that facilitates new technology of 3D recording of walkthroughs.

Discovery

In discovery, learning about the technology and the user were equally challenging.

The Hardware

On-site workers often use helmet-mounted cameras to conduct virtual walkthroughs. The illustration outlines the steps involved, from connecting to the camera to uploading footage. However, it doesn't capture the human challenges of ensuring regular and thorough inspections.

From Stakeholders to Personas: Understanding the Walkthrough Process

By interviewing on-site and off-site stakeholders, I developed a range of personas involved in the walkthrough process. While inexperienced laborers often conduct the walkthroughs, other personas with distinct motivations play a role. Notably, the laborers themselves may not directly benefit from the process, posing a potential design challenge.

Flow charting

Given the complexity of the app, I did early flowcharting to work out the users path through the app.

Site Visit and Walkthrough Demonstration

I visited Evercam's test site to personally experience a walkthrough. The video taken from the Evercam website showcases the correct procedure for performing a walkthrough. Please note that the app featured in the video is an early prototype, developed before the redesign.

Key Insights

Through interviews and secondary research, I identified key insights that guided my design decisions.

Clear Communication of "State" is Essential

Construction sites are inherently distracting environments, which can easily divide a laborer's attention. Therefore, it's crucial to communicate the current "state" of the walkthrough process clearly and effectively.

During a walkthrough, users need to be aware of various states, including:

  • Camera on
  • Camera connected
  • Phone recording
  • Phone downloading (from camera)
  • Phone uploading (to Evercam)
  • Camera no longer needed
  • Transfers complete

By providing clear and timely updates on these states, design can help users stay focused and ensure a successful walkthrough.


Addressing Upload Challenges

While downloading a 500MB file from the camera might be relatively fast, the subsequent upload to Evercam can take significantly longer, especially when not connected to Wi-Fi. To mitigate this issue, we must ensure that the upload process continues seamlessly in the background and can be easily resumed if interrupted.


Enhancing User Engagement and Adoption

Given that the primary user of the app is often a junior laborer who may not directly benefit from its use, it's essential to address potential motivational challenges. To encourage regular and thorough walkthroughs, the design should incorporate features such as reminders, guided experiences, gamification elements, and positive reinforcement.

Additionally, project managers should receive timely reminders and updates to facilitate check-ins with users and ensure the app is being used effectively. By implementing these strategies, design can enhance user engagement and promote consistent use of the app.

Solution

We took our understandings and built a solution that mapped to the real world

Try a clickable Figma prototype

Information architecture

To navigate between projects, the user can access a global navigation menu via a hamburger icon. While users may occasionally switch projects, many will spend extended periods, often months, working within a single project. To accommodate this, I've designed the default login experience to take users directly to their most recent project page.

Within a project, the design offers in-page navigation to the primary categories of "things" contained within the project. These categories include walkthroughs, which serve as the primary documents, as well as cross-cutting sections such as all media and floor plans.

A key innovation in the design was the creation of a dedicated page for each walkthrough. This dedicated page provides a focused and streamlined experience for users to view and interact with walkthrough content.

To visualize the complete page flow, please refer back to the flowchart in the discovery section.

Enhancing the Camera Connection Process

When I joined the project, the engineering team had already set up a basic way to connect the camera. I built on their work by adding these features:

  1. Connection Status Indicator: A dedicated section at the top of the screen was added to provide real-time updates on the connection status.
  2. Consolidated Settings Drawer: A centralized "Phone settings" drawer was introduced to streamline the process of enabling necessary settings and minimize disruptive pop-ups.
  3. Progress Animation: A visual progress animation was incorporated to indicate the ongoing connection process.
  4. Improved Error Recovery: More informative and user-friendly error recovery screens were designed to guide users through troubleshooting steps when connection issues arise.

Streamlining the Recording Process

The recording flow is undoubtedly the most critical aspect of the application. To simplify the process for users, I implemented a stepper. The stepper interface allows for easy navigation and provides a convenient way to move backward if necessary.

To ensure a smooth recording experience, I've incorporated on-screen instructions to guide users through each step. Understanding that users may require some level of retraining with each walkthrough, the design made these instructions readily accessible.

During the recording process, a walking animation is included to visually reinforce the desired behavior. Additionally, a discreet mini-camera view is provided to reassure users that the camera is functioning correctly without distracting them from the task at hand.

Data Transfer to Evercam

The transfer process involves a relatively quick download from the camera followed by a potentially lengthy upload to Evercam. To keep users informed throughout this process, I designed a visually engaging tile that dynamically updates its appearance to reflect the current transfer status. This real-time feedback helps users stay engaged and aware of the progress.

Media management

The media management section draws inspiration from the familiar conventions of photo apps commonly found on smartphones. To enhance functionality and user experience, I introduced several additional features:

  1. Media Separation: All media, including images and audio files, are segregated into distinct categories for efficient organization and retrieval.
  2. Immersive Filtering: Filtering options are provided to allow users to quickly and easily refine their media library based on specific criteria.
  3. In-Page Audio Playback: Audio files can be played directly within the media section, eliminating the need for users to navigate to a separate playback interface.

Walkthrough Sharing

Users have the flexibility to share walkthroughs with both internal and external collaborators. Drawing inspiration from Google Drive's sharing interface, I strategically positioned the share button in the top right corner of the screen. This placement, similar to the send button in the Gmail app, ensures that the button is always visible and easily accessible, even when the bottom drawer is open.

Take me home