Challenge Summary
Welcome to the "Aether - Biometric Customer Check-In App Redesign Challenge". In this challenge we are looking for theTopcoder Studio Community help to redesign and update the user experience of our existing biometric "check-in" tablet application.
As part of this challenge we have provided two PDF files that outline the existing application flow and screenshots. Treat this guidance like wireframes! We developed this application quickly (focused on capturing the biometric functionality) and NOW we want to improve and create a modern and engaging user interface and experience.
Good luck and we look forward to your submissions!
Round 1
Enroll Scenarios contains the following screen interactions for client checkpoint review:
01. Landing Screen.
02. Member Plan Screens
03. Finger Scanning Process Screens
04. Enter Concierge PIN Screen
- Make sure to number your screens (00, 01, 02, 03 etc)
- Capture as many screens as you would like feedback on.
Round 2
All application screens and client checkpoint feedback applied.
Challenge Description
We currently have a tablet "check-in" application that allows our club members access to our exclusive airport lounges by using their biometric signature! By allowing our members to quickly "check-in" they are able to skip showing their ID's and any type of line that might be at the entrance.
Design Problem
We built a prototype of the device and application that quickly went into production, but the level of effort on the user interfece design was not what would have normally been put into a customer-facing, production application.
- We are looking for great design solutions that fit with our brand, fit with the atmosphere (members-only lounge) and help promote a simple user experience.
Supporting Documents
references.zip contains of 3 documents :
1) Branding-Design-Guidelines.docx: Branding guidelines, colors, fonts.
2) UI-screen-flow.pdf: The application flow
3) UI-screen-shots.pdf: Our existing application - treat this like a wireframe!
Branding and Design Guidelines
- Simple, Clean modern UI design.
- Follow "Design Style.docx" for colors, font and style.
- Look at modern applications and what would be engaging and simple for exclusive "club members"
Technology Requirements
- Device: Surface Pro 3
- Resolution: 2160 x 1440
- Realize there will not be a lot of scrolling - this needs to be a quick and engaging experience.
Screen Requirements
01. Application Opening Screen
ui-screen-shot.pdf page 1
- By default a sceen like this will appear the first time a user see's the device
- Customer needs to be able to enter number of guests that are with them
- There should a graphic/information that indicates to the customer will need to scan their finger in the next step of check-in process
- There should be a button which will guide the customer to enroll if they have not enrolled in the program yet.
- Do not copy this screen exactly - think of a modern user experience and how you might use this application (and find it engaging, simple and useful)
Enrollment Screen Scenarios:
02. Member Plan Screen
ui-screen-shot.pdf page 4 - 6
If the customer clicks on "not enrolled" - they will see this scenario
- Customer will needs to enter their member plan (page 4)
- There should be a navigation for customer whether they want to continue/confirm ther member plan or want to exit the application
- If customer provides the wrong member plan ID, there should be an error message provided to them and ability to entered their member plan ID again (page 5)
- If customer provides the correct member plan ID, the app will automatically detect the customer ID and continue the process of acknowledging their profile (page 6).
- After successfull enrollment confirmation, they will go to the next step of capturing their fingerprint
- Simple interactions! What keeps it simple and engaging?
03. Finger Scanning Process Screen
ui-screen-shot.pdf page 7 - 10
- Continuing the enrollement proess the customer will be asked to scan their fingerprints so the application/enrollement process can capture their print
- The user will be presented with a guide on how to scan their fingerprint (page 7).
- Customer will needs to scan their finger 4 times (page 8). Customer only needs to scan one of their finger in the entire process.
- If customer not put their finger correctly, there should be a confirmation message appear and reminds them to repeat the scan process (page 9).
- After the finger scanning process is complete the customer will be succesfully notificed and provided additional instructions. (page 10)
- Think about this user experience (how do other apps show fingerprint scanning). How can this be more engaging?
04. Enter Concierge PIN Screen
ui-screen-shot.pdf page 11 - 13
This is the Admin screen/scenario
- In this step the Admin will confirm the customer code that allows the customer to enroll. (page 11)
- If the concierge pin is incorrect the Admin will be notified that they entered the wrong PIN and needs to re-enter the PIN again or they can close the app and stop the enrollment process (page 12)
- If the concierge pin correct, there should be a success confirmation message appear to show them that the enrollment/checking process has been completed (page 13)
Unenroll Screen Scenario
05. Unenroll Screen.
ui-screen-shot.pdf page 14 - 15
- If a customer wants to unenroll from the program, they can ask our Admin Staff at the club to help cancel their enrollment.
- Staff will open the application (page 14) and click the upper right corner to enter the advance menu options (page 15).
- By default the upper right button should not appear to the customer
06. Member Plan Screen
ui-screen-shot.pdf page 16 - 17
- Customer will need to enter their member plan # to be able unenroll from the app (page 16).
- If the member plan ID correct, there will be a confirmation message that appear to notify which customer will be unenrolled from the app and a button to confirm this action (Page 17).
- Think about these intereactions - how do you improve them?
07. Enter Concierge PIN Screen
ui-screen-shot.pdf page 18 - 19
- This is the Admin view where the Admin needs to enter their concierge pin to be able unenroll the customer (page 18).
- If the corrent PIN is entered, there will be a message that notify them that they already success unenroll from the app.
- Think for the best possible UI/UX for this screen
Target Users
- Our Club Members who are airline passengers that want fast and efficient check-in process to enter our club and relax.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Your design should possible to build and make sense as tablet application.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.