Ohio Deferred Compensation - UI Prototype - Part 4

~
Challenge Summary:
Welcome to Ohio - Deferred Compensation UI Prototype Challenge - Part 4.
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 to be prototyped:
 

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

 

20-1Account_Fund-Exchange.jpg

- Displays the ‘Fund Exchange’ tab

- No sorting or pagination needed

- Clicking ‘Add Exchange’ navigates user to 20-2

 

20-2Request_Fund-Exchange.jpg

- Either of ‘Fund Exchange’ or ‘End Result Exchange’ can be selected

- ‘Fund Exchange’ should be selected by default

- Clicking ‘Next’ navigates user to 20-3

- Clicking ‘Cancel’ navigates user to previous screen

 

20-3Request_Fund-Exchange.jpg

- Add dummy values to Fund Name dropdown

- Exchange percentage should be a positive numeric value (not mandatory)

- Clicking ‘Next’ navigates user to 20-4

- Clicking ‘Previous’ navigates user to previous screen

 

20-4Request_Fund-Exchange.jpg

- All values should be positive numeric positive values (not mandatory)

- Clicking ‘Next’ navigates user to 20-5

- Clicking ‘Previous’ navigates user to previous screen

 

20-5Request_Fund-Exchange.jpg

- All fields are read-only

- Clicking ‘Next’ navigates user to 20-6

- Clicking ‘Previous’ navigates user to previous screen

 

20-6Request_Fund-Exchange.jpg

- All fields are read-only

- Clicking ‘Add Another Exchange’ navigates user to 20-2

- Clicking ‘Previous’ navigates user to previous screen

 

20-7Request_Fund-Exchange.jpg

- Same as 20-2, shows the ‘End Result Exchange’ option selected

- Clicking ‘Cancel’ navigates user to 20-1

- Clicking ‘Next’ navigates to 20-8

 

20-8Request_Fund-Exchange.jpg

- Similar to 20-3

- All values should be positive numeric value (not mandatory)

- Clicking ‘Next’ navigates user to 20-9

- Clicking ‘Previous’ navigates user to previous screen

 

20-9Request_Fund-Exchange.jpg

- All values are read-only

- Clicking ‘Previous’ navigates user to previous screen

 

20-10Request_Fund-Exchange.jpg

- Confirmation screen

 

21-1Withdrawals-Landing-Page.jpg

- Displays the ‘Withdrawal’ tab

- Clicking ‘Create Withdrawal Request’ navigates the user to 22-1

 

21-2Withdrawals-Landing-Page.jpg

- Same as 21-1 with ‘Pending Withdrawals’ populated

 

21-3Withdrawals-Landing-Page.jpg

- Same as 21-1 with ‘Current Withdrawals’ populated

 

21-4Withdrawals-Landing-Page.jpg

- Same as 21-1 with an alert for ‘Current Withdrawals’

 

22-1Create-Withdrawal-Request.jpg

- Similar to 20-2

- Clicking ‘Next’ navigates user to 22-2

 

22-2Create-Withdrawal-Request.jpg

- Start Withdrawal Date should be a Calendar Control

- Desired Payment Frequency - One of the radio buttons can be selected, default to ‘Annually’

- Dollar Amount - positive numeric value

- % of account - A value between 0 to 100

- Time Period - positive numeric value

- All other input text boxes on this page are also positive numeric values

- Clicking ‘Next’ navigates user to 22-5

 

22-3Create-Withdrawal-Request.jpg

- Similar as 22-2

- Clicking ‘Previous’ navigates user to previous screen

- Clicking ‘Next’ navigates user to 22-5

 

22-4Create-Withdrawal-Request.jpg

- Same as 22-2 with the ‘Check’ checkbox selected

- Also shows an informational text below the checkbox

- Clicking ‘Previous’ navigates user to previous screen

 

22-5Create-Withdrawal-Request.jpg

- Next button should be disabled until the ‘I agree’ checkbox is selected

- Clicking ‘Previous’ navigates user to previous screen

- Clicking ‘Next’ leads to 22-6

 

22-6Create-Withdrawal-Request.jpg

- Similar to earlier screens, follow the storyboard

- Clicking ‘Send’ moves user to 22-7

 

22-7Create-Withdrawal-Request.jpg

- ‘Code’ should be a 4-digit numeric code

- ‘Verify’ button should be disabled until a valid 4-digit code has been entered

- Clicking ‘Verify’ should navigate user to 22-8

 

22-8Create-Withdrawal-Request.jpg

- Confirmation screen/ follow the storyboard

 

22-9Edit-Withdrawal-Request.jpg

- Edit Withdrawal Request - similar as Create Withdrawal Request

 

22-10Edit-Withdrawal-Request.jpg

- Edit Withdrawal Request - similar as Create Withdrawal Request

 

22-11Edit-Withdrawal-Request.jpg

- Edit Withdrawal Request - similar as Create Withdrawal Request

 

22-12Edit-Withdrawal-Request.jpg

- Same as earlier screens/ follow the storyboard

 

22-13Edit-Withdrawal-Request.jpg

- Same as earlier screens/ follow the storyboard

 

22-14Edit-Withdrawal-Request.jpg

- Follow the storyboard

 

23-1View-Withdrawals.jpg

- Follow the storyboard

 

23-2View-Withdrawals.jpg

- Follow the storyboard

 

Mobile

 

- Only the screens listed below are in scope for mobile

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

- The one major difference as compared to desktop is that in the mobile screen, the informational section on each screen has been now encapsulated within a control which the users can touch and will slide left with the information required as shown in the design screens.

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

 

20-1Account_Fund-Exchange.jpg

20-2Request-Fund-Exchange.jpg

20-3Exchange-from.jpg

20-4Exchange-to.jpg

20-5Review.jpg

20-6confirmation.jpg

20-7Exchange-Type.jpg

20-8choose-new-investment.jpg

20-9Review.jpg

20-10Success.jpg

21-1Withdrawal-empty.jpg

21-2Pending-Withdrawal.jpg

21-3All-Withdrawals.jpg

21-4Alert-Withdrawals.jpg

22-1Create-Withdrawal-Request.jpg

22-2Payment-Option.jpg

22-3EditPayment-Option.jpg

22-4EditPayment-Option-3.jpg

22-5Review.jpg

22-6Identification.jpg

22-7Enter-code.jpg

22-8Update--success.jpg

22-9Edit-Withdrawals.jpg

22-10Edit-Withdrawals.jpg

22-11Review.jpg

22-12Identification.jpg

22-13Enter-code.jpg

22-14Update--success.jpg

23-1View-Withdrawals.jpg

23-2View-Pending-Withdrawals.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.
 

Final Submission Guidelines:
Challenge Downloadable Available on Challenge Forum:
Storyboard.zip - Storyboard Design
Marvelapp Links

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