Current version of Prenav .XYZ
Diego Vanegas
UX Designer
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
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"
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.
2. Define
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
3. Design
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
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
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.
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
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.
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.
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
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”
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.
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
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.
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.
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.
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.
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.
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 :)