Hotel self-check-in animation design

Job ID: 40353753

Budget: $250 – $750 USD

Animations for hotel self-check-in kiosk

Description:
We provide self-check-in kiosks for hotel guests, allowing them to find bookings, register, check in, encode room keys, and pay. Our design is whitelabeled, and we customize the product for the hotels who use it in their brand colour and logo. The logo is used on the first screen of the kiosk, and the brand colour is used for buttons and background colours, as well as the animations in different opacities.

We’re looking to improve animations for:
- ID Scanning: showing the passport/ID placement with a loader for success/failure.
--> Here we have made a generic design to act as both the passport and the ID, making it too generic for the users to understand how to place it when scanning. We want to make it clear that the side with the MRZ code should be facing down, but not overcomplicate it by saying MRZ code. For passport it is easier because the cover will be facing up, but for ID cards it is a bit more complicated as to which side should be facing down.
- Key Encoding: animation for the room key encoding process.
--> How we have the steps today: 1. Illustration of key card, and below is a button to start the key encoding, 2. Take a key card and place it on the surface below (the key encoder), 3. Remove the key card from the surface, 4. Room key successfully created. 5. Failed to create your key.

Requirements:
- Lottie-compatible .json files
- Provide recommendations for best practices in kiosk animations.

Budget:
- Please provide an estimate for the project.

Additional Info:
- Examples of current animations can be shared.
- Walkthrough of the product flow will be provided for context.