Ohio Deferred Compensation - UI Prototype - Part 1

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

As part of this challenge you will need to comments HTML/JavaScript/CSS/etc code. We need clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built.

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 tablet and desktop, NOTE: Tablet view (landscape) will follow the desktop screens! Mobile and Tablet view (portrait) are NOT in scope

- 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
- 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/
- We have provided flow in marvelapp as well: https://marvelapp.com/2g51367/screen/36449899

Screens to be prototyped:

00 Navigation:
Header
- Logo/Home: Will show 01-1Landing-Page.jpg
- Investments: Will show 06-1Investments_Tab1.jpg
- Resources: Will show 07-1Resources_Tab1.jpg
- Calculators / Tools: Will show 08-Calculator-and-Tools.jpg
- FAQ: Will be a deadlink
- About Us: Will show 05-1About-Us.jpg
- Contact Us: Will show the pop-up as shown in 01-4Contact-Option.jpg
- Help: Will be a deadlink
- Search icon: Will show the pop-up as shown in 01-3Search-Option.jpg
 

Footer:
- Home: Will show 01-1Landing-Page.jpg
- All other links including social icons will be a dead link

01 Landing Page
Reference: 01-1Landing-Page.jpg
- By default you can show the alert message or show it once the user gets to the landing page 01-2Alert.jpg. User can close by clicking on the close icon!
- Clicking on “Sign up” under login will show 02-1SignUp_Step1.jpg
- Clicking on “Forgot Password” will show 03-1Retrieve-Username-Password.jpg

02 Sign Up:
Reference: 02-1SignUp_Step1.jpg

- Follow the steps as shown in the storyboard / marvelapp.
- Cancel: Goes to landing page (01-1Landing-Page.jpg)

- Step 2: Terms and Conditions will be dead link

03 Retrieve Username / Password:
Reference: 03-1Retrieve-Username-Password.jpg

- Follow the steps as shown in the storyboard / marvelapp.

04 Enrollment:
Reference: 04-0Enrollment.jpg
- Follow the steps as shown in the storyboard / marvelapp.

- All links in red will be a dead link unless otherwise mentioned.
- Step 4 (04-4Enrollment.jpg), “View Fund Performance” button will be a dead link

- Step 6 (04-6Enrollment.jpg), Clicking on “Add New” will add another section same as Beneficiary under primary or contingent where the “Add New” was clicked. When “delete” icon is clicked appropriate beneficiary will be removed.
- Step 8: “Submit” button will show 12-1Account-Manager.jpg

05 About Us:

Reference: 05-1About-Us.jpg

- “About Ohio DC” tab will show 05-1About-Us.jpg

- “Board Members” tab will show 05-2About-Us_Board-Members.jpg
- “Services” tab will show 05-3About-Us_Services.jpg

06 Investments:
Reference: 06-1Investments_Tab1.jpg
- Fund Profile & Prospects: Will show 06-1Investments_Tab1.jpg

- Fund Performance: Will show 06-2Investments_Tab2.jpg, print will be a dead link in this page.
- Understanding Investments: will be a dead link

07 Resources:
Reference: 07-1Resources_Tab1.jpg
- Retirement Basics: Will show 07-1Resources_Tab1.jpg
- Videos and Webinars: Will show 07-2Resources_Tab2.jpg, clicking on list icon will show 07-3Resources_Tab2.jpg and clicking on grid icon in 07-3Resources_Tab2.jpg will show 07-2Resources_Tab2.jpg
- Publication and News: Will show 07-4Resources_Tab3.jpg, clicking on list icon will show 07-5Resources_Tab2.jpg and clicking on grid icon in 07-5Resources_Tab2.jpg will show 07-4Resources_Tab2.jpg

 

08 Calculator / Tools:
Reference: 08-Calculator-and-Tools.jpg
- In this list of calculators only the top 2 calculators have designs, so please follow the links as shown in the storyboard / marvelapp.
- “Use Tool” under College funding calculator will show 09-1College-funding-calculator.jpg
 

08 1 College Funding Calculator:
Reference: 09-1College-funding-calculator.jpg

- Follow the steps as shown in the storyboard / marvelapp.
 

09 Contact Us:
Reference: 10-Contact-Us.jpg

- Follow the storyboards

Send an Email:
Reference: 11-Send-an-Email.jpg

10 Account Manager:
Reference: 12-1Account-Manager.jpg

- Sub-navigation: Account Manager will show 12-1Account-Manager.jpg, My Profile will be a dead link, File Manager will show 16-1File-Manager.jpg
- Clicking on “Account Enrollment” will show the same flow as 04-0Enrollment.jpg, follow the steps / marvelapp. Just that we won’t have “Step 7: Online Account” as user would have already sign up/logged in - so please remove that from this flow and on clicking “Submit” in the final step, it will show 12-1Account-Manager.jpg
- “View Account Number” below the logo on click will show 12-2Select-Account.jpg and clicking on any account within the pop-up will show 13-Account-Summary.jpg
- Clicking on “View Details” will show 13-Account-Summary.jpg

11 Account Summary:
Reference: 13-Account-Summary.jpg
- Follow the storyboards / marvelapp
- Under Summary first section,
- - - Clicking on “View Details” in “SMarT Plan” assuming a user logins for the first time we show 14-4SMarT-Plan_Not-Enrolled.jpg - this allows user to enroll into SMarT plan. Subsequent login or visit to the 13-Account-Summary.jpg and clicking on “View Details” in SMarT plan will take the user to 14-1SMarT-Plan_Already-Enolled.jpg
- - - Clicking on “View Details” in “Auto Rebalancing” assuming a user logins for the first time we show 19-2Account-Summary_disable.jpg - this allows user to enable Auto Rebalancing and Subsequent login or visit to the 13-Account-Summary.jpg and clicking on “View Details” in “Auto Rebalancing” will take the user to 19-1Account-Summary_enable.jpg

- “Print” will be a dead link
- Fund Allocation section will allow the user to toggle the tabs.

12 SMarT Plan already Enrolled:
Reference: 14-1SMarT-Plan_Already-Enolled.jpg
- “Make Changes” will show 14-2Make-Changes.jpg
- Clicking on the “Back” icon will show 13-Account-Summary.jpg

12 1 Update SMarT Plan:
Reference: 14-2Make-Changes.jpg
- Clicking on the “Back” icon will show 14-1SMarT-Plan_Already-Enolled.jpg
- “Continue & Review Changes”:  will show 14-3Update-SMarT-Plan.jpg
- “Suspend Smart Enrollment”: will be a dead link.
- “Cancel Changes”: will show 14-1SMarT-Plan_Already-Enolled.jpg

12 2 Update SMarT Plan - Step 2
Reference: 14-3Update-SMarT-Plan.jpg

- Clicking on the “Back” icon will show 14-2Make-Changes.jpg
- Save: will show 13-Account-Summary.jpg
- Cancel Changes: will show 13-Account-Summary.jpg

13 Enroll SMarT Plan:
Reference: 14-4SMarT-Plan_Not-Enrolled.jpg > 14-5Enroll-into-SMarT-Plan.jpg
- Follow the storyboards / marvelapp
- Flow for enrolling into a smart plan starts by clicking on “Enroll into SMart Plan” in 14-4SMarT-Plan_Not-Enrolled.jpg, clicking on it will show 14-5Enroll-into-SMarT-Plan.jpg

13 1 Step 1:
Reference: 14-5Enroll-into-SMarT-Plan.jpg
- Clicking on the “Back” icon will show 14-4SMarT-Plan_Not-Enrolled.jpg
- “Continue & Review Changes”: will show 14-6Review-SMarT-Plan.jpg
- “Suspend Smart Enrollment”: will be a dead link.
- “Cancel Changes”: will show 14-4SMarT-Plan_Not-Enrolled.jpg

13 2 Step 2:
Reference: 14-6Review-SMarT-Plan.jpg

- Clicking on the “Back” icon will show 14-5Enroll-into-SMarT-Plan.jpg
- Save: will show 13-Account-Summary.jpg
- Cancel Changes: will show 13-Account-Summary.jpg

14 Auto Rebalancing (first time login or disabled):
- Follow the flow as shown in marvelapp
 

14 2 Auto Rebalancing (subsequent logins / it is enabled):
- Follow the flow as shown in marvelapp
 

~
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 Prototype Link

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