Role
- UX design and research
- Information architecture
- UI and logo design
- Prototyping and usability testing
- Assisted front-end refinement in React Native
Project Overview
TorqueFit is a cross-platform mobile IoT app for ensuring safe construction of pipelines on construction sites. Part of the Cumulus Smart Torque System, it allows users to collect work data in the field and integrates with bluetooth-enabled smart tools to ensure the accuracy and quality of the work. I worked as the sole designer with a small team of developers and product deployment managers through discovery, design, and development.
(As of late 2021, it was re-labeled as Cumulus Mobile App to accommodate new functionality of the Cumulus WorkFlow Platform.)
Project History
The Smart Torque System began as a proof of concept IoT platform spun out of Shell Techworks. The original TorqueFit app worked well as a prototype, but needed a full redesign to support the company’s plans for diversification and growth.
Business Goals
The previous version was built for Windows tablets that were designed for intrinsic safety in industrial environments. There were frequent hardware issues in addition to a significant effort in maintaining the existing application. Before I joined the project, it was decided that the new version would be cross-platform on iOS and Android, developed in React Native. To further expand to new customers and markets, Cumulus needed a more modern, usable mobile app for its platform.
UX Audit, Interviews
As the sole designer on the project, I began by conducting a heuristic audit of the existing platform and identified areas where the current UI was successful, and where it was not. This was accompanied by a series of stakeholder interviews with external customers, as well as internal deployment managers and members of the original engineering team. The previous version was built with a primary focus on engineering, and a lot of the feedback related to clarity of information on-screen.
I used findings from a content analysis project I previously conducted to initiate several information architecture exercises with the development team. This helped us prioritize the most important data to assist users within different states of a work process.
User Needs
The main goal of the Smart Torque System is to solve issues with accountability of work on both the worker and management levels. Most of the work is still tracked via paper forms and spreadsheets, so there are frustrations at all levels around the validity and accuracy of record-keeping. In certain critical environments, mistakes that fall through the cracks can lead to serious injury or death.
The mobile app is a tool primarily used by in-field workers, so considerations were made to accommodate their particular needs. Through the interviews and discussions, I was able to map out the main areas of interest to address in the redesign:
Job allocation, wayfinding: “Where do I need to do the work?”
Main work: Checklists, Flange Tightening, Data Capture
Submission: “Can I be sure that my work was accurately captured?”
Existing Functionality
The redesign needed to meet existing functionality for current customers:
- Track work
- Guide user's position on flange face
- Interface with smart devices
- Reference process documentation and schematics
- Calculate torque values
- Document process quality
- Most critically: Be alerted to overtorques which can result in dangerous situations
With the original app, these features had been met at a base level, but we identified a list of improvements to align with the feedback we received from workers in the field.
Key Principals for the Redesign
Clear communication between the user and the current state of the work process
Clarity of messaging, alerts in plain language to communicate to users with high technical skills, but who otherwise may be less comfortable with modern technology platforms
Clarity of next steps, adoption of a Linear Workflow
- Users of the previous version would often get stuck on screens without knowing how to align their real-life work process with what could be done in the app.
- A user should always know which tasks can be done next.
Work within the constraints of the industrial environment
Preserve any work done in areas of low connectivity, communicate and assure the user that they will not lose data.
Legible contrast in an outdoor setting.
Avoiding use of multi-touch gestures, testing with simple stylus input due to frequent use of safety gloves.
Alignment with status of the connected bluetooth device
- Never contradict messaging on the device, and being clear with actionable error messages when necessary.
Ideation
Over several weeks, I collaborated with the engineering team to fill out the key user flows and rough mockups for each screen. I created several prototypes that were influenced by feedback on the previous version, and did some guerrilla usability tests for feedback on clarity of on-screen directions. While many of the ideas of these early designs were included in the first iteration, while others were documented for later releases.
Further Development of Linear Workflow
Across most customer job sites, the worker process steps are executed in a specific order. To further reinforce that progression, I used a gradient spectrum color palette to differentiate the tags. This replaced the existing colors that were chosen arbitrarily, and were only displayed on the desktop Control Center. Considerations were also made to accommodate users with color vision limitations.
MVP Build
I worked together with a small development team to build, iterate, and revise the app for launch. The first version was released by local deployment in late 2019, then released to public app stores in 2020.
Prioritization of Features
The initial launch prioritized a tablet layout for iOS to meet needs of the first customers using the app in the field. Because of the density of information and diagrams involved, the mobile version presented additional challenges that would be solved in a later iteration. A later release would include full support for mobile devices, as well as cross-platform support for Android.
Design System
I worked with the team to build the full set of UI components, both through high-fidelity mockups and assisting in code refinements. The first version was to be an iPad-exclusive release, but many aspects of the mobile layout were designed simultaneously to prevent inconsistencies and rework.
In-Field Feedback, Iteration
The initial launch allowed for the use of a manual torque wrench, and later iterations would add functionality for more complex tool integrations. It was first tested with newer customers, then legacy customers were transitioned to the updated platform as critical features were added. Feedback from in-field users was positive, noting increased stability and accuracy for data tracking.
