Challenge Overview
Note - This challenge has shorter review and appeals timelines & a fixed reviewer fee
Welcome to the Insurance Native iPad App Prototype Challenge.
Overview
We're building an insurance application for a client to help inspectors to collect sensitive loss data (FNOL) customers suffer on their properties. The app captures incident information, such as photos and causes of losses through a predefined template document, in a very easy way.
The goal of this challenge is to take the provided UI Design and convert it to a native iPad application prototype.
Challenge Requirements
In this challenge you will develop an iPad app that has all screens provided in the provided design. Note the following:
- We have provided the Sketch source files in the forums
- All design assets, fonts are provided in the forums
- If there is anything not clear in the designs, please post questions in forums.
Screen Requirements
All screens mentioned below and all elements in the design are in scope, refer to them and and let us know in the forums if you have any questions. The notes below are to help understand some screens/ elements better but aren’t exhaustive. Any other screens in design which are NOT mentioned or mentioned as Out of scope or in strikethrough below need not be implemented.
01_Loading.png
- Use this as the splash screen
02_Login.png
- This is the login screen
- Email and password fields should have placeholder text as shown, this should be removed from the text field as soon as the focus moves to this field and show up as label on top of the text field.
- Forgot Password & Login are clickable
- Disable login button until both email and password are entered
03_LoginFilled.png
- Shows login and password filled
- Validate email field
- Mask the password field
- Shows the Forgot Password screen
- The field can be email or phone
- If the user enters any alphabets, validate it as email
- If the user enters only digits, validate it as phone number
- Disable ‘Reset Password’ button if nothing has been entered
- Shows the Forgot Password screen with an email filled in
- Validate email for format correctness
- Button should read “Reset Password” (typo fix for all Forgot Password screens below).
- Shows the Forgot Password screen with invalid email
- Configure this invalid email in configuration (do not hardcode)
- Validate ‘6 digit PIN’ to be a numeric value with 6 digits
- New password and re-enter must match
- If any of the 3 fields is not entered, disable the ‘Continue’ button
08_ForgotPassword_PIN.png
- Shows the earlier screen with valid data filled in
09_ResetPassword_Success.png
- Show this screen for 2 seconds and then redirect to next screen
10_LoginAgain.png- Same as original login screen
11_Register.png
- All fields are mandatory
- Validate email address, phone for format
- Validate zip code as a valid numeric value
- Disable the ‘Register’ button until all validations are met
- Add dummy values for State, City
- Match password, re-enter password
12_Register_Filled.png
- Shows filled-in values
- As soon as user enters zip, populate state and city with these values
- User should not be able to change the state, city
13_Claims.png
- Listview should allow infinite scrolling
- Should allow sorting on columns
- Show dot markers for mail and notification icons
- Each list item is expandable (opens overlay with details - screen 19) by tapping on the row
- Bottom navigation should be fixed. It’s displayed as scrolled for demo purposes
14_Messages.png (Out of scope)
- Shows the message view
- Allow user to submit a message, respond back with a dummy response (make it configurable, do not hardcode)
- User should be able to hit the Send button or press enter key
- Clicking ‘x’ should close the messages modal
15_Claims.png
- Same as earlier claims screen
16_CalendarOpen.png
- Shows the calendar control
- Show some dates selected
17_CalendarDateChange.png
- Shows the calendar control
- Clicking another date should highlight the newly selected date
18_DateChanged.png
- Same as earlier claims screen
19_InsuredDetails.png
- Clicking a listview item should open this modal
- Clicking ‘Navigate’ leads to next screen
- All buttons should be clickable
20_RouteMap.png
- Shows the map with some marker info (read from JSON file, do not hardcode)
- Clicking a marker should open the next modal window
21_Weather_Distance.png
- Shows the modal
- Clicking ‘x’ will close the modal
- Clicking the ‘You are here’ box in the left column opens the next screen
22_Start.png
- Show both buttons as shown, both buttons are clickable
- Clicking ‘Start’ leads to next screen
23_Progress.png
- Shows progress as in storyboard
- Clicking < will collapse left box and take user to next screen
24_YouAreHere.png
- Same as screen 20
- Clicking ‘Forms’ tab leads to next screen
25_Forms.png
- Follow the storyboard
- Clicking ‘Add New’ navigates user to next screen
26_DamageInformation.png
- Shows the ‘Add New’ modal, follow the storyboard
- Damage status should have one value - default to ‘Low’
- Clicking ‘i’ shows the next screen
- Save & Continue should be disabled until user fills all fields and uploads min 6 photos
27_DamageInformation_MinPhotos.png
- Shows the info on clicking ‘i’
28_AddPhoto.png
- Clicking + should allow user to select a photo either from camera or photos
29_Camera.png
- Shows the device camera being invoked, once the user clicks - it should show a thumbnail as in next screen
30_DamageInformation.png
- Show images in a grid of 2x3
31_DamageInformation_Filled.png
- Show damage information filled on screen
- Clicking ‘Scan Forms’ leads user to next screen
32_FormFilled.png
- Camera opens, captures a photo of a document and stores it
- User can add more photos/pages (infinite)
- Shows the scanned form
33_MarkAsComplete.png
- Clicking ‘Mark as Complete’ shows the next modal
34_Summary.png
- Follow the storyboard for the modal
- Clicking ‘X’ or ‘Cancel’ dismisses the modal
- Clicking ‘Confirm’ takes user to next screen
35_SuccessMessage.png
- Shows the success message
36_Notifications_Option1.png
- Out of scope. Ignore
37_Notifications_Option2.png
- Clicking ‘x’ should remove the notification from the list
- Clicking ‘Details’ should move the user to next screen (38)
- Show the count of unread notifications (4)
- Please show notifications in reverse chronological order (most recent on top)
38_NotificationDetails.png
- Shows the notification detail
- Clicking Previous/ Next should allow user to view prev/ next notifications (if any)
- If there are no other notifications, the previous and cancel buttons should be disabled
39_Sample_Success_Error_Messages.png
- Shows the convention to be followed for sample success and error messages
- Create an scenario to display an error notification and document how to see it
40_StyleGuide.png
- Styles to be used
41_WeatherIcons.png
- Icons to be used
General Notes
Note the following :
- The app will be locked to Portrait mode
- Show a progress indicator (spinner) when transitioning between screens
- Only iPad is in scope. Phone is not in scope. App should support all devices above from iOS11 and above
- The implementation must be a native application, native controls must be used wherever possible
- All code must be written in Swift 4 and run in the latest version of XCode
- Do not hardcode any data directly into the app. All data must be read from JSON files so it can later be replaced directly with appropriate API calls.
- Please ask in the forums if you wish to use any open-source third-party libs to ensure there are no license violations
Final Submission Guidelines
- XCode project with all source code that addresses the requirements
- Deployment guide with configuration & verification steps. Describe all config params and include steps to run
- Demo video (Mandatory and will be scored down if not provided)