Ohio Deferred Compensation - UI Prototype - Part 3

~
Challenge Summary:
Welcome to Ohio - Deferred Compensation UI Prototype Challenge - Part 3.
This challenge is focussed on creating responsive UI prototype.

Last week, we ran the first prototype challenge for this project to build a set of screens required for this app. We’re also running the second prototype challenge currently to build out some screens that were left over from first challenge as well as the mobile screens.

As part of this challenge, we’ll be building out more remaining screens. The source code for the prototype for existing screens is in our Gitlab repo and you’re expected to work off it (details in forums)

 

Considerations:

 

• Please do NOT assume that each screen listed below is a separate screen

• Several screens are sub-screens of an existing screen and are have been mentioned explicitly to make it clear

• Several screens show active states for certain elements and have been mentioned explicitly to make it clear

• Some screens are repeated for clarity of flow.

 

Have any questions, let’s discuss in forums!

~
Important Guidelines:
- Use SCSS/SASS for CSS Preprocessor.
- You are required to create a responsive prototype that will work in mobile, tablet and desktop, NOTE: Tablet view (landscape) will follow the desktop screens and tablet view (portrait) will follow the mobile screens!
- Create README.md file that explains your UI Prototype submission structure and commands.
- Create clear documentation to set-up your submission locally and on Herokuapp.
- Also, you must put your submission on Heroku for client review. Include the link on your README.md

Screens/ Sub-Screens/ States to be prototyped:
 

Only the following screens are in scope. Both desktop and tablet versions are in scope.

 

Desktop

 

17-1-1My-Profile.jpg

- Represents the Personal Info tab
- Clicking the first ‘Edit’ link navigates the user to 17-1-2

 

17-1-2My-Profile.jpg

- Represents the Personal Info tab
- All fields except ‘Initial’ are mandatory
- Clicking ‘Cancel’ navigates the user to 17-1-1
- Clicking ‘Save’ navigates the user to 17-1-3

 

17-1-3My-Profile.jpg

- Shows the confirmation message for saving personal details

 

17-1-4My-Profile.jpg

- Clicking Mobile Phone ‘Edit’ on 17-1-1 navigates user to this screen
- Add validation that new mobile phone & confirm mobile phone must match
- Clicking ‘Update’ navigates the user to 17-1-5

 

17-1-5My-Profile.jpg

- User can toggle between `Send to Email id’ or `Send to Mobile`
- Check `Send to Email id` by default
- Clicking ‘Send’ navigates the user to 17-1-6

 

17-1-6My-Profile.jpg

- Disable ‘Verify’ button until user has entered a 4-digit code
- Enforce validation that the code should only be numeric digits
- ‘Try Again’ is a dead link
- Clicking ‘Verify’ navigates user to 17-1-7

 

17-1-7My-Profile.jpg

- Shows confirmation for saving phone number

 

17-1-8My-Profile.jpg

- Clicking Email Address ‘Edit’ on 17-1-1 navigates user to this screen
- Enforce validation that the New and Confirm Email Address match
- Disable update button until both fields are filled and match
- Clicking ‘Update’ should show 17-1-12

 

17-1-9My-Profile.jpg

- Clicking ‘Edit’ on Employer row on 17-1-1 navigates user to this screen
- Disable ‘Save’ button until a valid phone number has been added
- Clicking ‘Save’ navigates user to 17-1-3

 

17-1-12My-Profile.jpg

- Shows confirmation for saving email address

 

17-1-13My-Profile.jpg & 17-1-14My-Profile.jpg

- Refer the same screen for changing mobile phone

 

17-2-1Login-Credential.jpg

- Shows login credentials tab
- Clicking Username ‘Edit’ navigates user to 17-2-2

 

17-2-2Login-Credential.jpg

- Add validation that new username is not same as old username
- Add validation that password can’t be blank
- Disable ‘Update’ button until validations are fulfiled

 

17-2-3Login-Credential.jpg   & 17-2-4Login-Credential.jpg

- Refer the same screen for changing mobile phone

 

17-2-5Login-Credential.jpg

- Shows confirmation
- Text is wrong. It should not be ‘Your phone has been successfully updated’. It should be ‘Your username has been successfully changed’

 

17-2-6Login-Credential.jpg

- Clicking Password ‘Edit’ navigates user to 17-2-6
- Disable ‘Update’ button until all validations are fulfiled
- Current Password, New & Confirm New Password should be non-null
- Current password should be different from New Password
- New and Confirm New password should match
- Clicking ‘Update’ navigates user to 17-2-7

 

17-2-7Login-Credential.jpg to 17-2-9LoginCredential.jpg

- Follow same screens mentioned earlier

 

17-2-10Login-Credential.jpg

- Shows validation error for password not matching

 

17-3E-Delivery-Preferences.jpg

- Shows ‘E-Delivery Preferences’ tab
- Default to ‘Yes’

 

18-2-1Account_Contribution.jpg

- Shows ‘Current Contribution’ tab
- Pagination/ Sorting NOT needed
- Clicking ‘Edit’ navigates user to 18-2-3

 

18-2-2Account_Contribution_pending.jpg

- Shows Pending Contribution’ tab
- Pagination/ Sorting NOT needed

 

18-2-3Account_Contribution_edit.jpg

- Clicking ‘Cancel’ navigates user back to 18-2-1
- All input values are mandatory
- Clicking ‘Next’ navigates user to 18-2-5

 

18-2-4Account_Contribution_error.jpg

- Shows validation

 

18-2-5Account_Contribution_review.jpg

- Shows the ‘Review’ tab
- Clicking ‘Previous’ navigates user to 18-2-3
- Clicking ‘Save’ navigates user to 18-2-6

 

18-2-6Account_Contribution_success.jpg

- Shows confirmation message

 

18-3-1Account_TransactionHistory.jpg

- Shows Transaction History
- Pagination and Sorting are NEEDED
- Clicking ‘Filter’ navigates user to 18-3-2
- ‘Print’ is a dead link

 

18-3-2Account_TransactionHistory.jpg

- Show Calendar controls for ‘From’ and ‘To’
- Add validation for From < To
- Clear should clear out From & To
- Clicking ‘Filter’ simulate data filtering changes in table

 

24-1ManageBank.jpg

- Shows ‘Manage Bank Information’ tab with no bank currently added
- Clicking ‘Add Bank Information’ leads to 24-3

 

24-2ManageBank.jpg

- Shows ‘Manage Bank Information’ tab with one bank currently added

 

24-3ManageBank.jpg

- Follow flow from the storyboards
- Add validation for Routing & Confirm Routing Number to be same
- Default type of Account to ‘Checkings’
- Add validation for Bank Account Number & Confirm Bank Account Number  to be same
- Disable ‘Save’ until all validations are fulfilled
- Clicking ‘Save’ leads user to 24-5

 

24-4ManageBank.jpg

- Clicking ‘Edit’ on 24-2 leads user to this screen
- Clicking ‘Next’ leads user to 24-5

 

24-5ManageBank.jpg to 24-6ManageBank.jpg

- Follow identification code related screens as earlier

 

24-7ManageBank.jpg

- Confirmation screen - follow earlier confirmation screens

Mobile

 

- Only the screens listed below are in scope for mobile

- Most of the screens only need to be adjusted for responsiveness

- Follow above provided descriptions for screens, please ask in forums in case of any doubts

 

12-4-1Navigation.jpg
12-4-2Expand-Home.jpg
12-4-3Expand-Profile.jpg
12-4-4Expand-Account.jpg
17-1-12success-update.jpg
17-1-13identification.jpg
17-1-14Enter-code.jpg
17-1-1Personal-Info.jpg
17-1-2Edit-Personal-Info.jpg
17-1-3Update-success.jpg
17-1-4Edit-Personal-mobile-phone.jpg
17-1-5identification.jpg
17-1-6Enter-code.jpg
17-1-7success-update.jpg
17-1-8Edit-Email.jpg
17-1-9Edit-Employer-phone.jpg
17-2-10password-error.jpg
17-2-1Login-Credential.jpg
17-2-2Edit-User-name.jpg
17-2-3Identification.jpg
17-2-4Enter-code.jpg
17-2-5Update-success.jpg
17-2-6Login-Credential.jpg
17-2-7identification.jpg
17-2-8Enter-code.jpg
17-2-9success.jpg
17-3E-Delivery-Preferences.jpg
18-2-1Account_Contribution.jpg
18-2-2Pending_Contribution.jpg
18-2-3Edit-Contribution.jpg
18-2-4Edit-error.jpg
18-2-5Review.jpg
18-2-6Success.jpg
18-3-1Account_TransactionHistory.jpg
18-3-2Account_TransactionHistory.jpg
24-10success.jpg
24-1Manage-Bank.jpg
24-2Manage-Bank.jpg
24-3Add-bank-information.jpg
24-4-identification.jpg
24-5Enter-code.jpg
24-6Update--success.jpg
24-7Edit-bank-information.jpg
24-8Identification.jpg
24-9Enter-code.jpg

 

TECHNOLOGIES

• HTML 5

• C#

• Java Script

• CSS 3.0

• Bootstrap 3.3.6

• JQuery 2.2.0

 

In a future challenge, the prototype will be encapsulated into an an ASP.NET MVC application. For the purpose of this challenge though, you’re expected to generate a prototype using the technologies mentioned above.
 

Client Priorities (The items that are considered highest prototype priorities)

- Creating quality and efficient UI Prototype that works in all the requested browsers.

- All elements should be consistent pay attention to padding, margin, line-height, etc.

- Matching the storyboards (as close as possible) across the required browsers.

- Responsive Web Design solution!

 

CODE REQUIREMENTS:

 

WGAC 2.0 Level AA Compliance

- Prototype needs to follow WGAC 2.0 Level AA compliant. This is a quick reference guide to understand this better:

https://www.w3.org/WAI/WCAG20/quickref/
 

Reviewers will be expected to check for compliance and score down any violations.

 

HTML/HTML5

- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.

- Please use clean INDENTATION for all HTML code so future developers can follow the code.

- All HTML code naming should not have any conflicts or errors.

Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)

- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.

- No inline CSS styles- all styles must be placed in an external stylesheet.

- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

 

CSS3

- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.

- Please use clean INDENTATION for all CSS so developers can follow the code.

- All CSS naming should not have any conflicts.

- As possible use CSS3 style when create all styling.

- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.

 

Javascript

- All JavaScript must not have a copyright by a third party.

- It is fine to use GPL/MIT/Open Source code.

- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

 

Images

- Images should be properly compressed while still having good visual quality.

- Please use best practice repetition usage of background based image.

- Please use sprites when using icons for your submission.

- Make sure your submission look sharp for Retina and Standard devices

- Wherever it makes sense, you can use icon fonts instead of images.

 

Browsers Requirements

- IE 10, 11

- Firefox, Chrome, Safari, Microsoft Edge latest version
- Chrome / Safari mobile browsers

 

 

Final Submission Guidelines