Challenge Overview
Challenge Introduction:
Welcome to Ohio - Deferred Compensation UI Prototype Challenge - Part 2.
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. As part of this challenge, we’ll be building out the 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)
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
- 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/
Scope:
-
Apart from screens listed below, all other screens have already been built in the first prototype challenge. Only the below mentioned screens are in scope for this challenge
15 Beneficiaries:
Reference: 15-1Beneficiaries.jpg
Add Beneficiary: will show 15-2Add-Beneficiary.jpg
- Follow flow from the storyboards / marvelapp
Modify Beneficiary: will show 15-3Modify-Beneficiaries.jpg
- Follow flow from the storyboards / marvelapp
Copy to Other Accounts: will show 15-4Copy-to-Other-Accounts.jpg
- Follow flow from the storyboards / marvelapp
16 File Manager:
Reference: 16-1File-Manager.jpg
- Follow the storyboards / marvelapp
- Pagination needs to be implemented
- Delete: will show the pop-up confirmation as in 16-5File-Manager.jpg
- Upload File: will show the pop-up confirmation as in 16-3File-Manager.jpg
Reference: 16-2File-Manager.jpg
- Follow the storyboards / marvelapp
- For type, add values as Document Type A, Document Type B, Document Type C
- Allow uploading file from local system
Reference: 16-3File-Manager.jpg
- Follow the storyboards / marvelapp
- Same as 16-2 but with data filled in
Reference: 16-4File-Manager.jpg
- Follow the storyboards / marvelapp
- Confirmation screen
Reference: 16-5File-Manager.jpg
- Follow the storyboards / marvelapp
- Delete pop-up confirmation
Reference: 16-6File-Manager.jpg
- Follow the storyboards / marvelapp
- Show progress bar for upload
18 Account Statement:
Reference: 18-1Account_Statement.jpg
- Follow the storyboard / marvelapp
19 Account Summary:
Reference: 19-1Account_Summary_Enable.jpg
- Follow the storyboard / marvelapp
Reference: 19-2Account_Summary_Disable.jpg
- Follow the storyboard / marvelapp
Reference: 19-3Account_Summary_Edit.jpg
- Follow the storyboard / marvelapp
Reference: 19-4Account_Summary_Error.jpg
- Follow the storyboard / marvelapp
Reference: 19-5Account_Summary_Review.jpg
- Follow the storyboard / marvelapp
Reference: 19-6Account_Summary_Success.jpg
- Follow the storyboard / marvelapp
Reference: 19-7Account_Summary_SuccessDisable.jpg
- Follow the storyboard / marvelapp
25 Calculator And Tools:
Reference: 25-1 Calculator-and-Tools.jpg
- This is launched from 08-Calculator-and-Tools.jpg
Follow the storyboard / marvelapp
- Clicking next takes user to 25-2
Reference: 25-2Calculator-and-Tools.jpg
- Follow the storyboard / marvelapp
- Clicking next takes user to 25-3
- Clicking previous takes user back to previous screen
Reference: 25-3Calculator-and-Tools.jpg
- Follow the storyboard / marvelapp
- Clicking next takes user to 25-4
- Clicking previous takes user back to previous screen
Reference: 25-4Calculator-and-Tools.jpg
- Follow the storyboard / marvelapp
- Clicking previous takes user back to previous screen
- Clicking ‘Done’ takes the user back to 08-Calculator-and-Tools.jpg
B) All screens for tablet view (portrait) need to be implemented by following the mobile storyboard provided in the forums (Refer to the file called Mobile Part 1 - Designs + Sources)
Marvelapp link for mobile - https://marvelapp.com/2fe4if9/
Apart from login/ signup tab implementation difference on first few screens which would require some significant work, you should mostly be able to adapt the desktop screens to mobile form factor by following the above screens.
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
- UI Prototype source code (based on existing repo code)- Documentation instructions to run your submission
- Heroku URL hosting your app