Movio Sign-in Kiosk:
The Movio Sign-in Kiosk is a SPA (Single page application) that guests of Movio use to sign in and alert their host they are at Movio to visit. The Movio Kiosk was built as a part of our internal yearly hackathon.
In this project, I played a key role as the main designer working on
The user-flow to sign in and sign out
The tablet UI-design and animation
Assisting with writing the CSS styling and snippets of React.
Users problem:
For guests coming to Movio, there was no clear place for them to contact Movio staff when they had arrived. This was causing issues for Movio staff when important external guests visit as staff are not alerted the guest had arrived, what they were here for and which staff members were required for their visit.
Design solution:
To help solve this problem for Movio staff and guests, we designed and built the Movio Sign-in Kiosk. The Movio Sign-in Kiosk would allow guests to select the reason for their visit and who they are to see. Once the user had signed in, we utilised the Slack communication software API to alert selected staff members by a slack message that the guest had arrived for them.
Userflow on the Movio Kiosk:
For the userflow, we discovered the following scenarios the kiosk needed to cater for after discussing with administration and recruitment staff members:
Guests need to be able to select their type of visit for guest history for Movio to keep a record of.
Guests need to be able to select one or more staff members for their visit when it came to important visits such as executive meetings, job interviews or building maintenance.
When the guest has signed in, the staff members selected must be alerted the guest has arrived for them.
Once the guest has finished with their visit, they needed to be able to sign out of the kiosk to help with legal responsibilities for Movio.
Refining the userflow and outlining the tasks to complete:
UI Design and Front-end build process:
For the final UI Design, I wanted the style to be consistent with the Movio brand colours, but also have more of a friendly and informal style to match Movio’s relaxed and fun company culture. To achieve this key goal, I applied the following design decisions to the UI:
Rounded style buttons were applied to create a more playful feel to the app.
Each staff members photo would be able to be their favourite movie character to make the experience less formal.
Success animations on the successfully signed in page for a rewarding visual confirmation experience as a guest of Movio.
For the build process, we utilised React, CSS and SVG animations for the front-end development and used Slack’s API to pull each staff members name, job title and profile photo if needed onto the UI.
End result and future development:
We presented the final result to the entire company at the hackathon, won the “Peoples choice” award and were commended by the CEO and COO on the style and experience of the kiosk.
The Movio Sign-in Kiosk is now utilised in Movio for guests at the front door to avoid confusion and create better efficiency for staff members and guests.
