Diego Vanegas
UX Designer

Image alt tag
Current version of Prenav .XYZ

Current version of Prenav .XYZ

Brief

Prenav is seeking to improve the user experience of their application Prenav .XYZ. The new product will provide Prenav clients with an experience that is more intuitive, and user friendly, making it easier to fully engage with the Prenav brand and go from curious to committed clients.

The UX design team ( three members) had the goal of reducing user frustrations and confusions by researching, testing, and implementing a new user experience focused design. In addition, the Prenav UX Design Team will develop and implement a UX process flow outline for producing future solutions at Prenav.

PRENAV is digitizing the world’s critical infrastructure through robotics, laser scanning, and AI. The company’s first product captures photorealistic 3D models of industrial structures with automated drones, and analyzes the imagery with machine learning. In our short history, we’ve taken our technology to large industrial sites, inspected cell phone towers and wind turbines, trained for inspections inside a nuclear power plant, and traveled around the world for our customers. And we’re only just getting started.

1. Discover
Prenav .XYZ

Interviews

We conducted numerous interviews, all the users currently used Prenav .XYZ for their daily tasks. We also had the opportunity to interview an international company that works with the app in Japan.

Findings and insights :

  • The measurement tools are very important to the user but they don't know how to use them.

  • Is overwhelming to find a specific defect once the user has reported and inspected more than a hundred defects.

  • The reports pane lacks organization and filters

  • "I have trouble navigating through the 3D viewport"

  • "I don't understand how to use most of the tools"

  • "I primarily use Prenav .XYZ to review a 3D asset form the 3d viewport"

  • "I want to see an overview of my assets and reports"

  • "I don't use debugging tools and don't know how to use them"

  • "I rather browse through pictures than navigate the 3d space"

  • "I have trouble navigating the photos"

Prenav .XYZ

Competitor Feature Inventory

We selected the three main Prenav competitors and analyze all the feature and what make them appealing to customers. We found that all of them have the same overall functionality, they set apart from each other from a UI aspect, some are very complex and have advance tools and other are more friendly and intuitive to use.

Competitor 3D Navigation

We selected four of the main softwares that our users were familiarized with in the past or are currently using and compare them with what Prenav .XYZ currently has, and discovered that the 3D navigation is not as intuitive as the other softwares.

Prenav .XYZ
2. Define
Prenav .XYZ

Personas

Based on the user research; we created two main personas. Charles is a bridge inspector who uses Prenav .XYZ to detect and report defects and Christina is a tower inspector who's mainly interested in reviewing the reports and browse through the pictures. Here are some of their expectations when using the app.

Charles:

  • Understanding what all the buttons do produce clear standardized reports

  • Navigating through the 3D model efficiently

Christina:

  • Going through the reports efficiently

  • See photos in 3D space efficiently

  • Starting with opening a site and understanding what all the buttons do

Problem Statements

  • Charles needs a simple and easy way to measure and annotate the digital twin, because it's crucial for the inspection reports.

  • Charles needs clear direction when he uses a new tool for the first time, because the frustration of not knowing what to do can be extremely off putting.

  • Charles struggles to navigate through the 3D space on Prenav .XYZ because he has experience on other 3D softwares that have different controls.

  • Christina needs a better way to organize the report on Prenav .XYZ because she finds it difficult to read through the long messy report.

  • Christina needs a more efficient way to navigate through pictures because she prefers navigating through photos, rather the the digital twin.

Solution Statements

  • For Charles who finds it difficult to understand and use Prenav.xyz, the user interface should be redesigned with ease of use and functionality as the core focus.

  • For Charles who doesn’t know where to start on Prenav.xyz, the first screen that should appear is the “Load Site” overlay which will guide the user to start loading an asset.

  • For Charles who struggles to navigate through the 3D space on Prenav .XYZ, it needs to match the 3D navigation of any common 3D softwares and 3D navigation tool bar.

  • For Christina who wants to view only specific defect reports, filtering options should be added to make it more efficient.

User Flow

Scenarios

  • Charles is using Prenav .XYZ for the first time. He’s new to the role, Charles has been tasked to use Prenav .XYZ to familiarize himself with the most recently inspected bridge and review the cracks in the foundation that were flagged by Prenav .XYZ AI. He also needs to use the measurement tool to add other defects to the report.

  • Christina only wants to review specific defect on the report. She loads the existing site model. She needs to filter the report, so she can review the specific defect element and also browse the photos of the defect.

User flow of the two personas

User flow of the two personas

3. Design
Current Prenav .XYZ user interface

Current Prenav .XYZ user interface

Current Design

Originally designed with functionality and developmental versatility in mind, Prenav.xyz is an extremely capable and powerful tool. However, usability issues can be difficult for new users to overcome.

Some screenshots from Prenav .XYZ

Some screenshots from Prenav .XYZ

Current Prenav .XYZ Interface

Prenav knew from listening to its users that the app could improve by better communicating with its users through design.

  • Little to none existent direction for new users

  • Similar or identical icons used for multiple functions

  • Few elements with descriptions for understanding

  • Shortcuts and commands not communicated

Some of my sketches for the design studio session

Some of my sketches for the design studio session

Sketching

To begin the process of discovering solutions, the UX team performed a design studio session to tackle specific concepts.

These individual solutions would be brought together and iterated on until an agreed upon design is found and produced.

Prenav .XYZ

Wireframes

Once a concept has been iterated on, more decidedly complete concepts can be turned into wireframes on a digital canvas.

Plotting out components and content not only help define the visual design, it also highlights opportunities with user flows and usability.

This is a sample of how the bridge inspection divides into many categories

This is a sample of how the bridge inspection divides into many categories

Information Architecture

One of the most interesting challenges was identifying and understanding large groupings and categories of structures, elements, defects, and conditions.

We created category maps and hierarchies for these items.

Prenav .XYZ

Category Dropdown & Tree

Comparative and user research pointed toward developing a tree structure for viewing and selecting from the largest grouping categories and simple clear dropdown menus ordered hierarchically.

Prenav .XYZ

Filter & Search

To eliminate as much friction as possible when searching through a long list of detailed and categorized reports, the UX team designed clear and immediate options for filtering and searching categories and keywords.

4. Prototype & Usability Test
Prenav .XYZ

Lo-Fi Prototype

We started with a low fidelity prototype based on the sketches and wireframes with the intention of testing user flows and focus more on functionality rather than look and feel.

I designed the iconography based on the research and what other current 3D softwares use as standards. The biggest challenge was the overlay icons which were related to defects like concrete cracks I.E.

First Usability Test

The first round of the usability test consisted in three main tasks and each task had multiple steps that followed our the user flows. Although we had over 80% of success on the test we had great feedback over the position of the icons.

Tasks that were asked during the testing

  • You're a Civil engineer inspecting bridge 16 and looking out for defects on the structure.

  • You're working on the Foundation's report. You found a graffiti and you want to know the size of it and add it as a Defect to the report you're working on.

  • Now there's a long list of defects in the ‘Foundations’ Report, you want to check the defect you added in the previous task and look at the graffiti photo again. In order to do so narrow down the results to only Graffiti defects.

This what some users had to say:

  • “The icons on the left seemed to be understandable but the navigation on the right was more confusing”

  • “Filters were easy. I like the eye icon for displaying the filters on/off. That was unique and felt intuitive”

Prenav .XYZ

Hi-Fi Prototype

After having the results of the first usability test we had enough information to iterate and build the high fidelity prototype. We followed the brand guidelines and applied to the overall look and feel of the app. And added short descriptions over each icon describing its functionality.

Prenav .XYZ

Second Usability Test

The second round of the usability test had similar tasks as the first round, we noticed that the Hi-Fi prototype made it easier for users to navigate and the rate of successful clicks increased, also for this test we tested user that were in the construction industry which made the feedback very useful. We iterated and corrected the design based on this usability test.

User Feedback:

"The icons were pretty clear and hovering over them showed more information. I'm pretty used to hovering over these icons from other software I use in designing buildings."

"When i went to the report to look at the graffiti picture it would not let me navigate to the graffiti from the drop down. then the drop down got stuck."

Final Prototype
Image alt tag

Loading a Site

The first screen that pops up after the user log ins is loading site , in the past various users complain about not knowing were to start or how to load a new site. We also added the future of search and filter to make easier for the user to load a specific site.

Image alt tag

Filtering Defects in the Reports Pane

This panel is one of the most important parts of the app, since this is where all the measurements and defects are being stored and added to reports, in the past users struggle to find or filter a specific report and defect, so we added a variety of filters based on hierarchy of the reports.

Image alt tag

Measuring Defects

This was a major challenge since a measurement can be made for reference or can be added as a defect. We came up with the solution of giving the option for the user to pick between measurement and defect, thus avoiding creating two sets of tools with similar functionalities.

Image alt tag

Viewing Photos

The current version of the app makes it extremely frustrating to navigate or access directly to photo mode. The solution to this was to create a dedicated icon that works as an overlay and gives the user the option to navigate freely through 3D model. The user also has the option to access the photos in the reports pane and view the last three prior photos regardless of the report.

Image alt tag

Icon Tool Bar

This was a major overhaul, the current version only had a couple to none difference between tools and overlays. The icons were based on the research and comparative analysis. Adding a brief explanation about each tool will help new users to have a better understanding.

Image alt tag

Overlay Icons

Like the icon tool bar this also had the same issue, all the icons looked exactly the same, added to this there were a couple that were meant only for developers. We removed and added only what was necessary based on the research.

Old Vs New
Final Thoughts

What did I learned?

Working with a startup company was greatly motivating and an enriching experience. Having the full support of the developing team on the constrains was challenging. I enjoyed the problem solving and the big challenges with the amount of information that needed to be added to the reports and adding all the multiple icons to the app. The research part of the process gave Pranav a broader spectrum of what can be achieved when you have good user research and overall the whole UX process.

What can I improve?

There's a big list of things that I want to add and iterate on the app. Once the app is updated to the new design, I would like to follow up with the Prenav users and do a small survey in order to keep improving the app.

"You made it!, thank you for your time"
Have a great day :)