.png)
Drawbridge
Industrial Web Application
As a UX Designer, I was tasked with designing a web application that would securely transfer technical data between networked workstations and advanced manufacturing machines. The company I worked for was contracted to support the development of this technology for a major US shipyard.
My Role: UX/UI Designer &
Co-Project Coordinator
Team: Five Members
Timeline: Seven Months
The Problem
How might we improve the security of the advanced manufacturing process, so that the shipyard foreman and their machinists can be more effective, produce parts in a timely manner, and protect their equipment from malicious intent?
The Solution
A web application that acts as a human-operated firewall that protects advanced machinery against malicious files.
User Research
Goal
The team conducted 7 user interviews with shipyard employees and industry professionals to better understand the advanced manufacturing process and the pain points of day-to-day operations.
Objectives
-
Understand the different roles in the shipyard's machine shop and their levels of interaction with creating parts.
-
Clarify the different types of users currently interacting with the part creation process.
-
Discover what the end users want to see in the new process.
​
User Interview Takeaways
-
The shipyard attempted a previous IT solution that failed due to employee turnover and a lack of knowledge management.
-
A major pain point was machinists deleting other machinist part files and having no file storage.
-
Most of the end user's issues were with time management between getting assigned the task of part creation and completing the manufactured part.
-
70% of the interviewees brought up a possible internal culture shock at the shipyard upon the implementation of this technology.
Industry Research
In order to see a machine shop in action, our team organized visits to local Austin machine shops to observe foreman and machinists in action.
Thanks to TRI Austin and Reliable Manufacturing, our team was able to see advanced manufacturing machines in person, observe machinists operating the different machines, and ask IT & cybersecurity questions.
Definition & Ideation
User Personas
Initially, we created 5 personas to represent the different roles within the shipyard. After conducting our user interviews and visiting our local machine shops, we refined and narrowed down our personas to better define the priority end users we would be designing for.
User Flow
We began ideating by sketching out a user flow. The architecture of the software is based on 2 different types of accounts and the permissions set for each of them. This user flow represents a broad view of how the Drawbridge application would operate.
Drawbridge certifies and verifies files by creating a secured Proof using a digital signature. The file and its Proof are then uploaded together to the protected Network Area Storage. This provides a known safe location for unsecured machines to access files.
Whiteboarding
Once we had a better idea of how the application would work, we began whiteboarding what the interface would look like, and determining the interaction flow.
Low Fidelity Prototyping
This prototype helped test the flow of the application. We created 2 types of accounts, the Signer account & the Machinist account. The goal of the Signer account is to create Proof files and to upload the Proof and Part file pairings into the network area storage. The goal of the Machinist account is to retrieve part files on the workstations to send to the machines. Both types of accounts can export part files out of the network area storage.
Overcoming Obstacles
The Obstacle
Almost two-thirds of the way through the project we were informed that the scope of work had changed. In this case, the prime contractor reduced the overall amount of work to only the transfer of technical data between networked workstations and advanced manufacturing machines.
The Plan
What this meant for our team is that our application would have to make a significant impact at the shipyard. Drawbridge needed to be a tool that the end-users not only had to use, but wanted to use, because it made their day to day better.
The Solution
-
We created a User Guide that is included on the provided workstations so that users would not be reliant on a single person having historic knowledge.
-
We implemented the ability to push updates remotely from a long distance. This would allow users to not rely on an IT team or have to wait for updates.
-
We accounted for additional file storage so that Drawbridge could act as a repository for part files.
Style & Branding
Style Tile
We know that Drawbridge will be used in a dark industrial place. We wanted our design to reflect that. However, I felt it was important to have pops of color to make the interface inviting. Additionally, having a few elements using neumorphic design for a more modern look would add interest. I chose Lato as the font for a simple & balanced look and to make the text easy to read.
.png)
Naming
Although this application was contracted for a specific client, my company would own the rights to sell the application to other customers. The original client owned the name, so our team had to come up with another name. I led a brainstorming session with key internal stakeholders using Miro. These images show the process of the brainstorm session and how we ultimately got to the decision to name the application Drawbridge.
Testing & Iterations
Mid Fidelity Prototype
In this second iteration, I applied our final style guide. I also designed out and added interactions for each flow; import, retrieve, sign, and export.
Testing
During the test for our second iteration, users mostly gave us good feedback. They appreciated the intuitive & simple design and responded well to the branding. The users brought up a lot of questions about administrative tasks like creating new accounts and adding new accounts. So, that was a big goal in the next iteration.
High Fidelity Prototype
In this final prototype, I added an administrator's flow for managing accounts, creating new accounts, editing accounts, changing passwords, etc. I also continued to refine the interactions for a more uninterrupted prototype.
Testing
The hi-fi prototype was presented in a Design Review to the Prime Contractor and other Subcontractors. The design was approved by all parties. Once approved, the design was then implemented by the Lead Developer.
In Conclusion...
Final Thoughts
-
Being a machinist is an independent type of role. They have a lot of pride in their work, and building up their skills takes years. I have a newfound respect and admiration for the people who work in manufacturing environments.
-
The ability to be adaptable is key when working with multiple contractors. Things change at the drop of a hat whether that is a project requirement or a meeting time. Having the ability to adjust is a skill that I want to continue working on.
-
Asking the right questions, at the right time, is a big part of User Research. A well-thought-out User Testing Guide can make a vast difference in the outcome of a project.
Next Steps
-
Deploy the application at the shipyard.
-
Gather user feedback after a month of the end-users operating Drawbridge.
-
Collect analytic data from the application to see which module is being utilized the most, how many users are active a day, and the average time it takes a user to complete a process flow.