Material in Motion Mockup Task
For the mockup task, I created a tablet and kiosk application that will allow a coat handler to assign coat to a user or return coat from a user.
My Role: User Interface Design, Prototyping and Evaluation
Duration: 4 days
Tools Used: Adobe XD
Techniques Used: Sketching, Wireframes, User Flow Diagram, High-fidelity Prototyping
Designing a Safety Coat Application
The application is used to assign users a coat as well as receive the coats back from the users. The coats have a bar-code, the admin scans the coat bar-code and the users identification badge to assign the coat to the user. While returning the coat, only the coat is scanned and the return is complete. There is a discussion internally whether this should be a kiosk application or a tablet application. Your task is to come up with wireframes as well as concept designs for this application for both the kiosk as well as the tablet so the upper management can decide on which direction to go with.
The Who and The Why?
The user here would be the coat handler and the application is used to assign and return coats easily.
I created an Android tablet app and a kiosk application, which would be used by the coat handler but also have the ability to be independently used by the customers without the coat handler’s help.
I followed an iterative design methodology where after I gained a good understanding of the problem statement, I created various user flow diagrams to approach the problem in different ways and on deciding the best solution, I iterated on my designs to come up with the best design solution.
Phase 1: Inspiration
To get the inspiration and understand the problem statement better, I analyzed a website and tried to understand user’s context. I analyzed Desco Industries’ website who are involved in selling custom made ESD smocks.
After gaining an understanding about user’s context, I brainstormed on the various ways the problem could be approached and solved. After finding the best way to do it, I created a user flow diagram to validate my understanding (as shown below). The user would first select assign coat/return coat and then scan the bar code and if the code needs to be assigned, there would be another step of scanning the user ID badge bar code as well to assign it to a customer.
The other possible way could be that instead of user selecting to assign/return the coat the system could itself ask for the appropriate action to take upon scanning the bar code. For example, if the user scans the coat bar code and the system verifies that it’s a coat that has already been assigned, then the system could directly ask the user if they would like to return it. However, the coat handler won’t play a crucial role here and this could be implemented if the kiosk and tablet applications need to be independent of the coat handler.
Phase 2 & 3: Ideation & Iteration
After brainstorming on the various ways the problem could be approached and creating the user flow diagram for the best approach, I created low-fidelity sketches to get started on the design solution.
Prototype 1: Kiosk Application
In a kiosk application, the kiosk would be facing the coat handler, therefore there needs to be a separate badge reader for the users to scan their ID badge bar code since the kiosks are immovable. Otherwise the user would have to handover their badges to the coat handler every time they want to scan their badge for assigning or returning the coat. This could raise privacy concerns on the part of the user.
Prototype 2: Tablet Application
In a tablet application, the tablet gives the freedom for it to be moved anywhere, therefore, the coat handler could handover the tablet to users in order to scan their badges for assigning/returning the coat.