Challenge Overview
Welcome to “My Financial Health Web Mobile Application UI Prototype Challenge”. On this challenge we are looking to create and develop the front end coding for some few key screens of this mobile web based application, using mobile phones as your target device only. This front-end prototype must be developed using Angular 4.
Background Information
We just finished a design challenge were designers provided the concepts for how this application should look and work. You can take a look at the details of this application and the design challenge using this link:
https://www.topcoder.com/challenges/30079724/?type=design
MarvelApp with Full Prototype Live Demo
https://marvelapp.com/ahad1c7
Have in mind that you won’t be coding the entire application. Just some key screens mentioned below:
Required Screens
1) Login - Registration
- Only this page: “02_Login.png”
https://marvelapp.com/ahad1c7/screen/52638081
No error label needed
2) Landing Page
- The following files only:
“09_Landing Page.png”: https://marvelapp.com/ahad1c7/screen/52807274
“10_Insight Apps.png”: https://marvelapp.com/ahad1c7/screen/52807275
3) Post Annual Review Insights Workflow
- The following pages only:
“17_Credit Risk Screen.png”: https://marvelapp.com/ahad1c7/screen/52807285
“24_Repayment_Financial Tab_Graph.png View”: https://marvelapp.com/ahad1c7/screen/52807296 - Do not add (Graph/List) button from the design
“33_Security_History Tab_Graph.png View”: https://marvelapp.com/ahad1c7/screen/52807318 - Do not add (Graph/List) button from the design
4) Drivers Performance
- The following pages only:
“36_Drivers Apps”: https://marvelapp.com/ahad1c7/screen/52807324
“37_Revenue_Graph.png View”: https://marvelapp.com/ahad1c7/screen/52807325 - Do not add (Graph/List) button from the design
“39_Expenses_Graph.png View”: https://marvelapp.com/ahad1c7/screen/52807328 - Do not add (Graph/List) button from the design
“41_EBITDA_Graph.png View”: https://marvelapp.com/ahad1c7/screen/52807331 - Do not add (Graph/List) button from the design
“43_DSC_Graph.png View”: https://marvelapp.com/ahad1c7/screen/52807333 - Do not add (Graph/List) button from the design
- This Top area is fixed in all sections that applies: take.ms/qvTrf
- Full logo is image based (should be easy to replace). Is not clickable.
https://marvelapp.com/ahad1c7/screen/52638081
- Icons can be image or SVG. Any approach is acceptable.
- Don’t need to code the back end functionality anywhere.
- “Hamburger menu” and “Settings” icons, are dead links.
- “Weather” and “Calendar” on landing page are dead links.
- “Farmer” icon on the bottom is not clickable. Is just an image.
- Bottom navigation is fixed: take.ms/qvTrf
- Also need to remove (Graph/List) button from the bottom of the page, as screen will only have graphs
- This frontend prototype must be developed using Angular 4.
- You cannot use just simple HTML + CSS3 + Javascript on this challenge.
- You can also use HTML5 Frameworks such like Bootstrap or Foundation, but have in mind that you will need to overwrite several classes to match storyboards.
- You are allowed to use any Open Source Library / Plugin that allows you to match the designs as much as possible. Just remember to declare it on your declaration/readme file.
- Don’t need to link or connect the pages. You are coding just some key screens from a very large app. But provide a “index” page where reviewers can access page by page individually.
- Try to match the storyboards as much as possible. If you don’t see any extra interactions, no need to code it. Do not assume.
- Storyboards and sources are retina ready. So all icons and images should be exported to support retina devices.
- Provide clear class names and ids on forms elements. This will help developers in future.
Target Devices
- Mobile Web Devices on Portrait Mode: Max-width 479px
Resources
- You can download all assets and resources for this challenge on this drive folder:
https://drive.google.com/open?id=1dyQmqTduX69vMizHz06iCK6enx5X73Ht
Note: Source files are in Sketch.
- We created a Zeplin project were you can access the assets in case you don’t have Sketch app:
https://zpl.io/VDqkLqO
- You will need to request for invitation in forum once you register to this challenge.
Fonts
Quick Sand
https://fonts.google.com/specimen/Quicksand
Roboto
https://fonts.google.com/specimen/Roboto
HTML Requirements
- HTML should be valid HTML5 compliant.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use SCSS/SASS for CSS Preprocessor.
- 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 Requirements
- All JavaScript must not have a copyright by a third party.
- 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.
Browsers Requirements:
- Firefox, Safari & Chrome Mobile Browsers.
- Android Browser.
Background Information
We just finished a design challenge were designers provided the concepts for how this application should look and work. You can take a look at the details of this application and the design challenge using this link:
https://www.topcoder.com/challenges/30079724/?type=design
MarvelApp with Full Prototype Live Demo
https://marvelapp.com/ahad1c7
Have in mind that you won’t be coding the entire application. Just some key screens mentioned below:
Required Screens
1) Login - Registration
- Only this page: “02_Login.png”
https://marvelapp.com/ahad1c7/screen/52638081
No error label needed
2) Landing Page
- The following files only:
“09_Landing Page.png”: https://marvelapp.com/ahad1c7/screen/52807274
“10_Insight Apps.png”: https://marvelapp.com/ahad1c7/screen/52807275
3) Post Annual Review Insights Workflow
- The following pages only:
“17_Credit Risk Screen.png”: https://marvelapp.com/ahad1c7/screen/52807285
“24_Repayment_Financial Tab_Graph.png View”: https://marvelapp.com/ahad1c7/screen/52807296 - Do not add (Graph/List) button from the design
“33_Security_History Tab_Graph.png View”: https://marvelapp.com/ahad1c7/screen/52807318 - Do not add (Graph/List) button from the design
4) Drivers Performance
- The following pages only:
“36_Drivers Apps”: https://marvelapp.com/ahad1c7/screen/52807324
“37_Revenue_Graph.png View”: https://marvelapp.com/ahad1c7/screen/52807325 - Do not add (Graph/List) button from the design
“39_Expenses_Graph.png View”: https://marvelapp.com/ahad1c7/screen/52807328 - Do not add (Graph/List) button from the design
“41_EBITDA_Graph.png View”: https://marvelapp.com/ahad1c7/screen/52807331 - Do not add (Graph/List) button from the design
“43_DSC_Graph.png View”: https://marvelapp.com/ahad1c7/screen/52807333 - Do not add (Graph/List) button from the design
Final Submission Guidelines
Please Read - Directions and Answers to possible FAQs on this challenge- This Top area is fixed in all sections that applies: take.ms/qvTrf
- Full logo is image based (should be easy to replace). Is not clickable.
https://marvelapp.com/ahad1c7/screen/52638081
- Icons can be image or SVG. Any approach is acceptable.
- Don’t need to code the back end functionality anywhere.
- “Hamburger menu” and “Settings” icons, are dead links.
- “Weather” and “Calendar” on landing page are dead links.
- “Farmer” icon on the bottom is not clickable. Is just an image.
- Bottom navigation is fixed: take.ms/qvTrf
- Also need to remove (Graph/List) button from the bottom of the page, as screen will only have graphs
- This frontend prototype must be developed using Angular 4.
- You cannot use just simple HTML + CSS3 + Javascript on this challenge.
- You can also use HTML5 Frameworks such like Bootstrap or Foundation, but have in mind that you will need to overwrite several classes to match storyboards.
- You are allowed to use any Open Source Library / Plugin that allows you to match the designs as much as possible. Just remember to declare it on your declaration/readme file.
- Don’t need to link or connect the pages. You are coding just some key screens from a very large app. But provide a “index” page where reviewers can access page by page individually.
- Try to match the storyboards as much as possible. If you don’t see any extra interactions, no need to code it. Do not assume.
- Storyboards and sources are retina ready. So all icons and images should be exported to support retina devices.
- Provide clear class names and ids on forms elements. This will help developers in future.
Target Devices
- Mobile Web Devices on Portrait Mode: Max-width 479px
Resources
- You can download all assets and resources for this challenge on this drive folder:
https://drive.google.com/open?id=1dyQmqTduX69vMizHz06iCK6enx5X73Ht
Note: Source files are in Sketch.
- We created a Zeplin project were you can access the assets in case you don’t have Sketch app:
https://zpl.io/VDqkLqO
- You will need to request for invitation in forum once you register to this challenge.
Fonts
Quick Sand
https://fonts.google.com/specimen/Quicksand
Roboto
https://fonts.google.com/specimen/Roboto
HTML Requirements
- HTML should be valid HTML5 compliant.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use SCSS/SASS for CSS Preprocessor.
- 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 Requirements
- All JavaScript must not have a copyright by a third party.
- 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.
Browsers Requirements:
- Firefox, Safari & Chrome Mobile Browsers.
- Android Browser.