Challenge Overview
Welcome to "Relationship Manager HTML5 App UI Prototype Challenge". The goal of this project is to migrate our Relationship Manager app from Applet to HTML5 web based and we want all features in Applet version available in the HTML5 platform. In this challenge, we want your help to create the front end prototype and simulate all features that available in the old applet app to our new HTML5 platform.
As part of this challenge, you will need to comments HTML/JavaScript/CSS/etc code. We need a 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.
Background Overview
Our customer is having an application which is used to define the relationship between the Entities (Various Business objects) they deal with. The application has two components:
1. Base HTML Website
2. A Pop-up Editor Window built using Java Applet
The application uses Java Applet Editor Window as the user interface to facilitate the user with a set of tools that help with managing the entity relationship like add, modify or delete relationship between entities. As the Applet is becoming outdated technology due to various reasons, current pop-up Editor Window needs to be migrated to HTML based user interface providing the same set of features as the Applet.
Innovative solutions at the same time not deviating much from the current user interface are expected due to the effort required in user training. Also, the new UI should be self-explanatory. Showing hints & tips to work with new UI is also an option to educate the user and the new solution should provide such options. The movement of some functionality from the Base HTML Website into the new HTML UI replacing the Applet can also be explored if that could improve overall user experience.
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.
- Able to simulate all features from old Applet app and the requirements that being proposed.
- Getting the documentation right. The documentation should be easy to follow.
Target Devices
- Desktop/Web
Target Audience
- Business users who work for a bank.
- Sometimes IT department of the bank also uses this website, but the business users who are employees of the bank are the primary users.
Page Requirements
01) Web Page (Search and Result) Screen
Reference Screens 01_1_webpage.png to 01_3_webpage.png
- When user logs into the application, they will first see the following search page (01_1_webpage.png).
- User can find entity and relation from this page by applying different filters.
- The search result then will appear (01_2_webpage.png), the icons in the "To Editor" column are clickable and by clicking on them, the entity details will be stored in user session (01_3_webpage.png) and which can be loaded into the editor window by clicking the edit icons. Click Undo will bring back the arrow button in "To Editor" area.
- The search page loads and opens the applet window automatically.
- On the left side area, there is 3 main navigation, Search, Create New Entity and Relation and Help. Needs to provide hover and active state for this navigation.
02) Editor Window Screen
Reference Screens 02_1_editor.png to 03_15_scroll.png
- Please create the graph and all the interactions.
- More details about interactions needed for the editor window can be found from “Challenge2-HTMLScreenSpecification.pdf” documents.
- Graph Area
-- Right Tool Panel
-- Graph Background
-- Scaling/Zooming of Graph
-- Detailing of Entity
-- Tool Tip
- Right Click Options
-- Right Click on Grid
-- Right Click on Entity
-- Right Click on Relation
- Double Click Options
-- Entity Double Click
-- Relation Double Click
- Error Message / Confirmation Dialog Window
Documentation (Attached in Forum)
- Storyboard
- Details Spec
Code Requirements
HTML/HTML5
- Provide comments on the page elements 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 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
- IE11 & Microsoft Edge Browser latest version
- Firefox latest version
- Chrome latest version
- Upload your code as a .zip file (include the documentation as well) to the Submit and Review tool for this contest.
As part of this challenge, you will need to comments HTML/JavaScript/CSS/etc code. We need a 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.
Background Overview
Our customer is having an application which is used to define the relationship between the Entities (Various Business objects) they deal with. The application has two components:
1. Base HTML Website
2. A Pop-up Editor Window built using Java Applet
The application uses Java Applet Editor Window as the user interface to facilitate the user with a set of tools that help with managing the entity relationship like add, modify or delete relationship between entities. As the Applet is becoming outdated technology due to various reasons, current pop-up Editor Window needs to be migrated to HTML based user interface providing the same set of features as the Applet.
Innovative solutions at the same time not deviating much from the current user interface are expected due to the effort required in user training. Also, the new UI should be self-explanatory. Showing hints & tips to work with new UI is also an option to educate the user and the new solution should provide such options. The movement of some functionality from the Base HTML Website into the new HTML UI replacing the Applet can also be explored if that could improve overall user experience.
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.
- Able to simulate all features from old Applet app and the requirements that being proposed.
- Getting the documentation right. The documentation should be easy to follow.
Target Devices
- Desktop/Web
Target Audience
- Business users who work for a bank.
- Sometimes IT department of the bank also uses this website, but the business users who are employees of the bank are the primary users.
Page Requirements
01) Web Page (Search and Result) Screen
Reference Screens 01_1_webpage.png to 01_3_webpage.png
- When user logs into the application, they will first see the following search page (01_1_webpage.png).
- User can find entity and relation from this page by applying different filters.
- The search result then will appear (01_2_webpage.png), the icons in the "To Editor" column are clickable and by clicking on them, the entity details will be stored in user session (01_3_webpage.png) and which can be loaded into the editor window by clicking the edit icons. Click Undo will bring back the arrow button in "To Editor" area.
- The search page loads and opens the applet window automatically.
- On the left side area, there is 3 main navigation, Search, Create New Entity and Relation and Help. Needs to provide hover and active state for this navigation.
02) Editor Window Screen
Reference Screens 02_1_editor.png to 03_15_scroll.png
- Please create the graph and all the interactions.
- More details about interactions needed for the editor window can be found from “Challenge2-HTMLScreenSpecification.pdf” documents.
- Graph Area
-- Right Tool Panel
-- Graph Background
-- Scaling/Zooming of Graph
-- Detailing of Entity
-- Tool Tip
- Right Click Options
-- Right Click on Grid
-- Right Click on Entity
-- Right Click on Relation
- Double Click Options
-- Entity Double Click
-- Relation Double Click
- Error Message / Confirmation Dialog Window
Documentation (Attached in Forum)
- Storyboard
- Details Spec
Code Requirements
HTML/HTML5
- Provide comments on the page elements 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 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
- IE11 & Microsoft Edge Browser latest version
- Firefox latest version
- Chrome latest version
Final Submission Guidelines
- Before submitting, make sure that your HTML , CSS and Javascript codes have been validated and there are no errors. In case of any exceptions that the reviewer needs to make, specify this in your README file. Verify that it meets all the requirements mentioned earlier.- Upload your code as a .zip file (include the documentation as well) to the Submit and Review tool for this contest.