Worklink Shop App
An iPad application for building maintenance requests at New York University.
Visual Design + User Testing
Background
Worklink is an enterprise software designed to help the NYU Client Services Center manage on-campus facility needs and maintenance requests for the university's buildings.
Maintained by the Office of Facilities & Construction Management - Worklink is responsible for the seamless, end-to-end delivery of all building construction, operations, and maintenance services.
Role
As part of the design team developing the 3 platforms (web, iPad and smartphone) of this enterprise software, I was the design lead of the iPad platform.
Designed low fidelity to high fidelity mockups and conducted User Testing for the same.
It was becoming difficult to maintain, track and complete Work requests by personnel and their managers due to the application being old and data heavy.
There was no information hierarchy and request would be pending for days because of no proper prioritization.
The Problem
Low Fidelity Mock-up:
The mock-ups were created to structure the information and breakdown the functions of the application. This was the initial information architecture exercise which helped eliminate excess text from the users view.
Wireframes
Card Design (Exercise 1):
Cards are an essential tool of this platform. Each card indicates an individual work order and the relevant information about the complain, where it has occurred and the contact information. The card indicates the status of the work order, highlighted by a color. With each proceeding action, the status and the color associated to that status will be updated on the card.
Card Design (Exercise 2):
The exploration for the card design continued while re-structuring the information after the testing conducted with the building maintenance supervisors. They play the key role of assigning the work orders to the shop employees while overseeing the entire operation to ensure all requests are attended to on time.
I began with separating the work order number and status from the order type and location information while sketching out status highlight tabs.
The first two card below were inspired from card holders, later abstracted to create more options.
Card Design (Exercise 3):
I created a few more samples of the cards and tested them with different supervisors to derive median of the feedback.
I wanted to create minimal cards that would not distract from the task at hand.
User Testing
Mock-up (Iteration 1):
The wireframes were utilized to conduct user testing of the prototype.
Mock-up (Iteration 2):
The second round of testing showed significant users found the buttons and information small and needed to be enlarged for better contact. The card design was iterated to segregate the team member icon on the top left, then the corresponding information of the work order.
The visual change was a big leap and new interactions were introduced for the mock-up on the right below. This introduced a learning curve for the users and the team concluded on creating interactions derived from the existing work system.
Visual Design and Final Prototype
Card Design:
The final iteration of the card agreed to by the design team and the client.
Visual Design:
The hi-fidelity iteration of the application completed visually.