_edited.png)
Overview
Role: Product Designer
Duration: 3 months timeline
Tools: Figma, Remote calls
Team: Product analysis, product manager, 2 developers, engineering support
Sample size: 10 users
​
The Inspiration
Technical Toolboxes is a top B2B software company dedicated to delivering efficient and precise calculations for midstream oil and gas companies.
API tank inspectors are tasked with visiting physical tanks to conduct inspections and audits, ensuring compliance with regulations while recording all observations and recommendations. The physical nature of this job is time-consuming, particularly when relying on traditional pen and paper methods. Therefore, there was a need to optimize the data collection process to free up more time for critical tasks.
Features
-
Create a responsive application from start to finish that functions seamlessly on various devices (website, mobile, phone) and enables users to gather data offline.
-
Incorporate features that let users tailor their reports on demand, including live photo capture and voice-to capabilities. Ensure users can access precise and current information regarding their reporting status.
-
Offer a touch-friendly interface suitable for low-light environments, accommodating potential user mistakes.
How do we know who to design for?
USER INTERVIEWS
After a full day in the field taking notes with pen and paper, users to return to the office and input everything into our cloud application, which could take several additional hours. While there was a clear need for efficiency and simplicity, I needed to further analyze where those needs specifically lay.
Needs
-
Taking pictures for each sections of their report on demand
-
Streamlining data collection and enabling synchronization to a formal report with fewer revisions.
-
User-friendly interface and easy navigation with a touch-friendly design.
Frustrations
-
Investing additional time to polish the report in formal settings after gathering the data.
-
Needing to manually input all entries while working in a physically challenging environment.
-
Inability to attach photos in the appropriate and relevant sequence.
Motivations
-
The capability to tailor reports to relevant information and repurpose applicable elements.
-
The opportunity to conduct more inspections by saving time.
-
Distributing tasks among the team to enhance efficiency.
The most common need amongst the users is the ability to save time. Each inspector had slightly different asks, but their motivations always came down to - How can we save more time? How can we make this more convenient and efficient?
​
Why do they keep doing what they do?
RESEARCH ANALYSIS & USER INTERVIEWS
As the picture became clearer of our user's needs, motivations, and frustrations, I set out to understand why users choose to continue a practice that was obviously time consuming. In my discovery with talking to 10 different inspectors, I learned that there was not a product out there that met every need they needed, including our desktop application. Each feature had different priorities so even while pen & paper was missing so many things, it had the biggest features they needed. Everything else was just a nuisance.
.png)
Takeaways:
-
Users emphasized the importance of customizing reports while in the field and on the go.
-
They required a tool that could be reliably used offline.
-
For every inspection, users consistently needed to include photos, but no existing application offered a smooth way to do this.
From an idea to a reality
USABILITY TESTING
Using Figma, I developed a prototype for a user task flow that simulated the completion of a report. We navigated through the process, and they expressed the behaviors they anticipated experiencing as if they were actively working in the field.
After conducting usability testing, I observed test users interacting with the prototype and identified several design flaws that required further iteration to enhance the process.
While the familiar fields were present, users found it overwhelming to input data while standing in the hot sun. The voice-to-text feature lacked precision and involved too many steps (clicking the field, accessing the keyboard, clicking the microphone, speaking, and repeating for each field).
The sections were well-organized, minimizing the need for excessive clicking, but scrolling felt cumbersome on a touchscreen. Additionally, the images did not follow a logical sequence in the report's progression, which was also a limitation in our desktop application. Users wanted to highlight specific cracks or wear on each nozzle or pipe, but the absence of this feature forced them to revisit and correct their entries. After taking photos, they were unable to edit names, add descriptions, or annotate the images to indicate issues.
Successes
​​
-
All users really liked being the familiarity of it and being able to speed it up with voice to text.
-
6 users liked the options to add rows and checklists as needed
-
All users were find the areas of fields they need.
Painpoints
​
-
A lot of scrolling around to get to where they needed
-
Photos were not uploaded to the application in the order that made sense
-
Filling in each field was cumbersome and repetitive
Improvements
​
-
Refine the Voice-to-text option to include less steps and automate to next field
-
Allow users to further customize their photos to show accuracy
-
Add a sticky navigation that will allow users to jump to where they need​
The design based on user feedback
FINAL ITERATIONS
Sticky Navigation
Designing a touch friendly screen was new to this platform. With such a data heavy interface, users find themselves scrolling endlessly looking for input field they need. With a sticky navigation, they can jump around components to skip to where they need to be in whatever order they need.
"Create new report" workflow was not intuitive
Upon user testing, we discovered that users would click "create a new report" and receive a screen for their desired report. However, once it was created, they were essentially "stuck" with that one and unable to create new ones until it's completed. To solve this, I created an additional default screen that allowed users to chose their report type and it would appear as a new menu item. Doing so will allow users to have always a fixed option to create as many new reports as desired.
PROBLEM
PREVIOUS WORKFLOW
SOLUTION
NEW SCREEN ADDED
Picture taking abilities with the option to customize
An important feature that was missing across all of the standard forms of data collecting was the ability to add pictures in real time instead of attaching photos at the end of a report and having to go in and manually rearrange. To solve this, I added a feature that was contextual to the sections.
Voice-to-text improved
The initial design included the ability for users to use voice-to-text option, however, it was a repetitive process to click the keyboard, press the microphone, speak, and then click the next field to start the process again.
To improve this, each section and field has its own microphone that will activate it instantaneously.
For a row heavy data table, users can choose to make the entire section speech-to-text and automate the microphone process per field.
Final Takeaways
Creating a product from start to finish proved to be more challenging than anticipated. Some my initial designs and desired features faced limitations from a development perspective, requiring multiple iterations to find a solution that still addressed user needs. We began with 10 users to gauge market interest, and through interviews, we discovered that each had unique requirements based on their data collection styles and company demands. By the end of the interviews, we had a long list of features prioritize into "Must-haves," "Nice-to-haves," and future enhancements. Establishing this prioritization was crucial, as we recognized that, given our time and resource constraints, we couldn't satisfy everyone but could strive for a balanced approach.
Moving forward, our focus will be on continuously enhancing the product. As users engage with it more, they will provide valuable feedback for future iterations. A product is never truly finished; it remains a "work in progress."