Challenge Overview
Welcome to Hercules CodeBig Einstein - Enhance existing User Interface contest. As part of this contest, you need to enhance our existing application’s user interface.
Contest Details
We would like you to carry out a couple of enhancements to our existing application’s user interface.
Enhancement 1 - Ability to enter phone numbers
Once the app loads, if you navigate into the Simple and Thumbnail pages, when you click on Schedule a Test Drive button, a popup appears that allows the end user to select a phone number or email address.
Currently, multiple phone numbers are listed vertically and the user can go through each of them and select one. Enhance this to instead list the phone numbers horizontally, like a carousel where the user can scroll through each phone number associated with their account. The last slide in this carousel is expected to allow the user to enter their phone number, indicating that the user will not be selecting any phone numbers from the existing list but submitting a new one.
As the user starts typing the phone number, display the phone number in the (XXX) XXX-XXXX format automatically. Internally, the model will still be a number that you need to submit when the user clicks on Submit button.
In case the user closes the popup without submitting, any previously entered phone number should no longer show if the popup is shown again, allowing the user to enter a new phone number.
Existing behaviour, such as on Submit, the selected / entered phone number is sent to the server and the user is notified of the successful submission should remain unchanged.
Enhancement 2 - Re-Arranging the Layout
We will share with you an updated layout for the Thumbnail Page. You need to update the user interface for the thumbnail page following the reference document that will be shared.
The update to the layout also updates the interactions and navigation flow of the app. You need to ensure that the navigation is not broken. Note that the app is primarily meant for display on Television. Thus, navigating using the mouse will not work. You need to use the keyboard arrow keys and enter keys to navigate. You are not expected to support any touch / click events. The navigation will be purely through the keyboard.
The reference document contains the dimensions and style information needed for you to change the layout. Please ask questions in the contest forum if the navigation is not clear.
Please ensure that you follow the existing conventions followed in the app. The app uses Angularjs so ensure that your changes are following best practices here.Final Submission Guidelines
1. The code base exists on Gitlab. Fork the repository. Create the new service in your fork.
2. Once completed, upload your submission through the Submit and Review tool for this contest
3. The winner will be asked to create a pull request.
- 4. Kindly follow the same conventions of the existing app. Tests should be provided or updated for the front end as appropriate.