Our client “Metro Train Australia” requested for an online competency management system app that evaluates authority to work for employees and contractors who are working within the Australia Rail industry. We call this app “ RIW”. Medium for this app is “Kiosk”.
Client: Metro Trains Australia
Design Tools: Sketch, Invision
Duration: 3 Weeks
Deliverables: User Flow, Wireframes, Interactive Prototype, System Design, Coding
In this project, my responsibilities were focused around the design part of the project, including creating user flow, wireframes, interactive prototypes & final front-end coding.
MTA provided a document that helped me to understand the scope & complexity of the project. I researched the features which needed to include in the app and their best UI practices. Finally, I designed the user interface of the app successfully. Then implemented the frontend code of the design.
After digging into the document and learning more about the app requirement, I started creating a user flow based on the actions that users take to complete tasks. The flowchart begins with a visitor/worker entry point on the kiosk, like check-in and ends with the final outcome which is accessing badge print. This process helped me to evaluate and optimize the user experience.
Some of the main app features that I created UI solutions for them:
• Self-service Kiosk: Sign-In / Out for individuals including, visitors and RIW card holders via 3 methods:
1- Manual input (Visitors only)
2- Card-swiping (QR or NFC)
2- Forgotten card function
• Taking photo of the visitors
• Notifications: Eg. Notify visitors that their host informed about their arrival
• Displaying Site information for individuals in the form of images and text upon signing in. For instance, Emergency muster point location.
• Allowing individuals to undertake a breath test (BAC) for the day or at a (new) site location in the event the worker is entering into a new site.
• Allowing workers to view their own information, valid job roles and competencies on the kiosk.
• Allowing workers to select which employer they work for on the day (in the event they have multiple employers)
• Allowing individuals to view & print their badge via kiosk.
I created a solid structure foundation of the app to explore alternative possibilities. I only focused on the essential information and navigation elements on the page to not get distracted by visual appeal and aesthetics. Then I made it interactive. It helped me to represent user interaction quickly and be able to test it before going further.
In this step, I applied the client branding and colours to the app and made it interactive again.
Next, I presented the interactive prototype to the client and explained to them how these features will function.
After presenting the interactive prototype to the client, I did some design iteration based on client new requests. Here you can see the interactive version of the design
Unfortunately, We didn’t have a budget to do user testing. However, I did some Guerilla testing internally with non developer colleagues to validate my ideas.
I started implementing the frontend code of the design via HTML, CSS, Vue JS and created reusable components which I used in different screens.
