app main menu screenshot app annotation screenshot app list view screenshot

An iOS app for notating factory components

Capturing crucial components

When a machine breaks down it is imperative that the malfunctioning component is replaced immediately. Often times this replacement is not documented correctly. If the component malfunctions again, this could impose further downtime and production loss for the factory. It could also endanger the lives of the technicians.
Schematic Capture is replacing and archaic system by organizing photos of factory components and easing downtime of effected machinery.

The 'engineers' behind the project

I was the UX Designer for Schematic Capture. I worked with three web developers and one iOS developer over the course of two months as part of an internship for Alloy Technologies.

Grinding woes of a technician

The biggest challenge were that there was no existing product comparable to this. There were no direct competitors. The application had to be developed from the ground up. We discovered the current state of notating machinery was with physical photographs and logs.
clipart of filing folder with papers in it

Efficaciously producing a solution

The goal of this application is to replace paper logs and physical photographs that could take hours to organize. These physical documents can also be destroyed or misplaced. By streamlining the documentation process it reduces machine downtime, increasing production revenue. It also provdies a safer way to conduct employee onboarding by having an organized method to present machinery to engineers.
Our primary objective was to develop an application that would read job sheets and allow a user to capture and annotate an image of an individual component. Users would also be able to reuse images if multiple components were in one image.
clipart of a mobile phone showing an app

Concocting research

User research consisted of reaching out to engineers, factory managers, and our stakeholder. I wanted to see what methods they utilized in order to document any malfunctions. The key takeaways from the research were: most places still utilized physical logs; machines in disrepair were often reported multiple times or sometimes not at all; it is difficult to provide new hires with orientation of machines in a live production environment; multiple photographs had to be taken of one machine in order to document different components. all-inclusive of different types of culinary artists.
screenshot of example job sheet
An example job sheet
screenshot of an example schematic
An example schematic

Producing the menu

The first screen I tackled was the apps main menu. In the initial sketch I envisioned the needs of the user as follows: to import a job sheet; to upload a job sheet and to view their work list of job sheets.
screenshot of initial design sketch
Translating this to a digital screen, I removed the work-list button to further simplify the menu's function.
screenshot of first designed menu on digital screen
In the next version, I added back the option to view the work-list, however the import job sheets being the primary function of the menu.
screenshot with work-list added back in
In this final screen, I made use of the menu icon in the app and provided a sleeker menu wth further functions, including the option to toggle to dark mode and the ability to log out of the application.
screenshot of final screen

Modernizing notation

In the initial sketch, I wanted to show the capability of adding a notation to a photograph. By clicking the appropriate icon and then the image, the user would be able to add the notation.
screenshot of initial notation sketch
In this screen, I stayed close to the initial sketch, adding the ability to change the notation color under the appropriate icons.
screenshot of first designed notation color on digital screen
In this verson, I cleaned up the icons by simplifying once again, showing the selected icon and its chosen color. I also shrank the size of the save button to mitigate space.
screenshot of annotation screen with shrunk saved button
In this final design, the save button has been replaced by a save icon.
screenshot of final screen with new save icon

Assembling the import menu

In order for a user to import specific job sheets to process, I sketched out an import checklist screen.
sketch of initial import checklist
This screen stays close to my original sketch, allowing the user to select specific jobs sheets.
screenshot of first designed digital import screen
Removing the gray background and spacing out the text improved the import menu greatly.
screenshot of improved spacing and removed background color
In the final design, at the request of the stakeholder, a 'select all' options was added.
screenshot of final screen with select all option

Forging the job sheet

A job sheet is a rather large spreadsheet file housing pertinent information about a given machine. In my initial sketch I added a column of camera icons for each component.
sketch of initial jobsheet
This view shows the low fidelity mock up of the job sheet. Ideally the camera icon would go from black to green once an image of the component was captured.
screenshot of low fidelity mockup of digital jobsheet
With the job sheets being so massive, it was discovered that it would take unncessary time to scroll through all the information, so I sketched out individual cards highlighting the most important information of each component in an easily digestible way.
screenshot of sketched individual cards instead of one big sheet
The early development of these 'component cards' had buttons to either capture an image of the component or view futher details about the component.
screenshot of early development of component cards
Simplifying this design even further, buttons were replaced with recognizable icons, making the cards take up even less space.
screenshot of simplified design of component cards
In the final design the caret icon was made smaller, the shadows removed and a line drawn between each component card for a more modern design.
screenshot of final design of component cards

Fabricating a new request

After the completion of the schematic capture app, the stakeholder provided input on what he would like to see for a computer dashboard in order for a technician to retrieve and upload job sheets. The earliest design was made as a digital mock up that provides a list of job sheets, the technicians that were assigned to them and whether or not they've been completed.
mockup of computer dashboard for app

Working with the stakeholders input, this version provided a more streamlined look of the dashboard, allowing a tech to view job sheets for a company under a specific project. There were three access levels of the dashboard: Admin with full rights: technician that could access multiples clients/companies: and employee that could only access their company.
screenshot of streamlined version of mock up

In this screen, a profile avatar was added and some of the iconography was tidied up.
screenshot with added avatar and cleaned up icons

Formulating the future

During the 8 weeks I had with Schematic Capture, I was able to build a working prototype from the ground up. I started the dashboard design and there were many directions I wanted to take it, however time was not my friend. I felt that the dashboard could also be integrated into the capture app. I could also see the bones of schematic capture being used in other fields such as plumbing, electrical, and possibly surgical x-rays.