Challenge Summary
Welcome to "Relationship Manager - Applet Platform Migration Design Concepts Challenge". For this challenge, we want to create the new look and feel for our Relationship manager app. This app will be migrated from Java Applet to HTML5 platform and we want all features in Applet version available in the HTML5 platform.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
01) Web Page (Search and Result) Screen
02) Editor Window Screen
03) Entity Instance Features
04) Relations Features
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
01) Web Page (Search and Result) Screen
02) Editor Window Screen
03) Entity Instance Features
04) Relations Features
05) Confirmation/Error Message Features
06) Contextual popup menu Features
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
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.
Challenge Goals
Create the best possible UI/UX layout for current pop-up Editor Window to HTML based user interface while keep providing the same set of features as the Applet version.
App Flow
- The application is used to define the relationship between the Entities (Various Business objects) they deal with.
- The application has two components: Base HTML Website and A Pop-up Editor Window built using Java Applet
- The Base HTML website application window is having an Editor button. On clicking of Editor button, an applet window pops up.
- The usage of this editor window is to provide a graphical space which can be used to provide a visual representation and maintenance of various entity relationships and dependencies.
- Dependencies and relations are described in later sections, so as the GUI components of the Editor window.
Design Considerations
- The new UI should be self-explanatory
- 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.
- What should the priority features be?
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
Screen and Feature Requirements
00) General Requirements
- Please read “web based application.pdf” and “Editor Features.pdf”
- The purpose of the wireframes document is to help you visualize current Applet UI design and provide equivalent or better UI design based on HTML5/web based.
- Important UI functionalities are explained which would be helpful in designing UI mock-up.
- These requirements specification document walks through the current implementation of Applet user interface. There are certain features in Applet like the contextual menu for objects in relationship graphical elements and drawing line between two entities to introduce new relationship, etc.
- This app will be used in different languages including German, Italian, French, English, so please pay attention to typography set.
01) Web Page (Search and Result) Screen
Wireframe "web based application.pdf"
- When user logs into the application, they will first see the following search page.
- The search page loads and opens the applet window automatically.
- The icons in the "To Editor" column are clickable and by clicking on them, the entity details will be stored in user session and which can be loaded into Applet editor window, by using the Refresh button in applet.
- If user double click on entity or choose details option in popup menu (explained later part of this document), the entity details page is opened in parent window in new tab like below
- User can double click or right click on relationship arrows to see the relationship details as well. Like entity details, the relationship details also will be available in separate tab in parent window.
- Creating relationship between two entity (explained later part of this document) also opens the input page in separate tab like below:
02) Editor Window Screen
Wireframe "Editor Features.pdf" Page 1 to 4
- As explained in requirements 1# above, we have an applet window popped up on clicking on the editor button of the servlet.
- As part of the new implementation, a user is supposed to get an HTML 5 pop-up.
- The popup should enable the user to do all the activities which were allowed by the applet.
- But the new solution should provide both the options: with pop-up and without pop-up.
- The customer is open for an innovative solution to avoid multiple popups and looking for innovative options.
- Editor window allows the user to see, create, manage the relationship between various entity instances.
- New UI appearance is expected to provide a graphical representation of various relationships between the instances.
- New implementation should also allow the user to perform all the actions on the relations and on the entity instances and relations which were available in the applet implementation.
- Also, the editor should allow various GUI operations such as reordering the positions of various entity instances and automatic reordering of the entire tree with respect to a particular entity.
- Some of the features needed in Editor Window:
-- Toggle Button
-- Selection Tool
-- Create a Relation
03) Entity Instance Features
Wireframe "Editor Features.pdf" Page 5
Every Entity instance should be a box with 4 sections like described below:
-- 1# section, image describing the type of Entity
-- 2# section, should contain 3 pieces of information as shown in top right section. Unique Entity identification number, Department number, Name of the Entity
-- 3# section, the up and down arrow should be available in the bottom left section, signifying that the entity is having one or more incoming relationships or outgoing relationships. In case an entity is having any one of them then that particular arrow should only appear. In case the entity has no relationship, then this section should be empty.
-- 4# section, this section should contain 2 pieces of information for the Entity. The first line should contain the location of the Entity, where it is registered with and below the location the section should specify the country which the Entity belongs.
04) Relations Features
Wireframe "Editor Features.pdf" Page 6 to 8
- We need the following functionality to get covered in your design:
-- Relation representation
-- Relationship Tree Representation
05) Confirmation/Error Message Features
Wireframe "Editor Features.pdf" Page 9
- When there are error or warning messages, current applet shows similar to below structure.
- The window should contain the details of the error, error description and with required buttons as per the business logic
06) Contextual popup menu Features
Wireframe "Editor Features.pdf" Page 10 to 12
- The Applet window currently supports 3 different contextual popup menu scenarios.
- The options in the contextual menu are different depending on the context where user right clicks.
- Some actions make the call to servlet and refresh the relationship diagram and some actions open a new tab to show more information about Entity.
- On clicking a various menu item, either the relationship tree graph is changed or a new popup should appear with some extended business logic implementation:
-- Right click on the draw/canvas area
-- Right Click on the entity.
-- Right Click on a relation
Branding Guidelines
Google drive: https://drive.google.com/file/d/0B8cviJNGmPm5cGZPSGc1TTNKOWc/view?usp=sharing
- The font style and color is mentioned in “Branding Guidelines.zip" folder
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
Marvel App Presentation
- Request a Marvel App prototype from copilot (fajar.mln@gmail.com) and Trevor (tgerring@topcoder.com).
- Provide the Marvel App shareable link in your notes during submission upload.
Stock Artwork (Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
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.
Judging Criteria
- Completeness of all the editor features copied to your new design
- How interesting and engaging is your proposed design concepts workflow
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Sketch, Adobe Photoshop or Illustrator. Layers should be named and well organized.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a checkpoint feedback01) Web Page (Search and Result) Screen
02) Editor Window Screen
03) Entity Instance Features
04) Relations Features
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your final design plus checkpoint feedback01) Web Page (Search and Result) Screen
02) Editor Window Screen
03) Entity Instance Features
04) Relations Features
05) Confirmation/Error Message Features
06) Contextual popup menu Features
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
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.
Challenge Goals
Create the best possible UI/UX layout for current pop-up Editor Window to HTML based user interface while keep providing the same set of features as the Applet version.
App Flow
- The application is used to define the relationship between the Entities (Various Business objects) they deal with.
- The application has two components: Base HTML Website and A Pop-up Editor Window built using Java Applet
- The Base HTML website application window is having an Editor button. On clicking of Editor button, an applet window pops up.
- The usage of this editor window is to provide a graphical space which can be used to provide a visual representation and maintenance of various entity relationships and dependencies.
- Dependencies and relations are described in later sections, so as the GUI components of the Editor window.
Design Considerations
- The new UI should be self-explanatory
- 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.
- What should the priority features be?
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
Screen and Feature Requirements
00) General Requirements
- Please read “web based application.pdf” and “Editor Features.pdf”
- The purpose of the wireframes document is to help you visualize current Applet UI design and provide equivalent or better UI design based on HTML5/web based.
- Important UI functionalities are explained which would be helpful in designing UI mock-up.
- These requirements specification document walks through the current implementation of Applet user interface. There are certain features in Applet like the contextual menu for objects in relationship graphical elements and drawing line between two entities to introduce new relationship, etc.
- This app will be used in different languages including German, Italian, French, English, so please pay attention to typography set.
01) Web Page (Search and Result) Screen
Wireframe "web based application.pdf"
- When user logs into the application, they will first see the following search page.
- The search page loads and opens the applet window automatically.
- The icons in the "To Editor" column are clickable and by clicking on them, the entity details will be stored in user session and which can be loaded into Applet editor window, by using the Refresh button in applet.
- If user double click on entity or choose details option in popup menu (explained later part of this document), the entity details page is opened in parent window in new tab like below
- User can double click or right click on relationship arrows to see the relationship details as well. Like entity details, the relationship details also will be available in separate tab in parent window.
- Creating relationship between two entity (explained later part of this document) also opens the input page in separate tab like below:
02) Editor Window Screen
Wireframe "Editor Features.pdf" Page 1 to 4
- As explained in requirements 1# above, we have an applet window popped up on clicking on the editor button of the servlet.
- As part of the new implementation, a user is supposed to get an HTML 5 pop-up.
- The popup should enable the user to do all the activities which were allowed by the applet.
- But the new solution should provide both the options: with pop-up and without pop-up.
- The customer is open for an innovative solution to avoid multiple popups and looking for innovative options.
- Editor window allows the user to see, create, manage the relationship between various entity instances.
- New UI appearance is expected to provide a graphical representation of various relationships between the instances.
- New implementation should also allow the user to perform all the actions on the relations and on the entity instances and relations which were available in the applet implementation.
- Also, the editor should allow various GUI operations such as reordering the positions of various entity instances and automatic reordering of the entire tree with respect to a particular entity.
- Some of the features needed in Editor Window:
-- Toggle Button
-- Selection Tool
-- Create a Relation
03) Entity Instance Features
Wireframe "Editor Features.pdf" Page 5
Every Entity instance should be a box with 4 sections like described below:
-- 1# section, image describing the type of Entity
-- 2# section, should contain 3 pieces of information as shown in top right section. Unique Entity identification number, Department number, Name of the Entity
-- 3# section, the up and down arrow should be available in the bottom left section, signifying that the entity is having one or more incoming relationships or outgoing relationships. In case an entity is having any one of them then that particular arrow should only appear. In case the entity has no relationship, then this section should be empty.
-- 4# section, this section should contain 2 pieces of information for the Entity. The first line should contain the location of the Entity, where it is registered with and below the location the section should specify the country which the Entity belongs.
04) Relations Features
Wireframe "Editor Features.pdf" Page 6 to 8
- We need the following functionality to get covered in your design:
-- Relation representation
-- Relationship Tree Representation
05) Confirmation/Error Message Features
Wireframe "Editor Features.pdf" Page 9
- When there are error or warning messages, current applet shows similar to below structure.
- The window should contain the details of the error, error description and with required buttons as per the business logic
06) Contextual popup menu Features
Wireframe "Editor Features.pdf" Page 10 to 12
- The Applet window currently supports 3 different contextual popup menu scenarios.
- The options in the contextual menu are different depending on the context where user right clicks.
- Some actions make the call to servlet and refresh the relationship diagram and some actions open a new tab to show more information about Entity.
- On clicking a various menu item, either the relationship tree graph is changed or a new popup should appear with some extended business logic implementation:
-- Right click on the draw/canvas area
-- Right Click on the entity.
-- Right Click on a relation
Branding Guidelines
Google drive: https://drive.google.com/file/d/0B8cviJNGmPm5cGZPSGc1TTNKOWc/view?usp=sharing
- The font style and color is mentioned in “Branding Guidelines.zip" folder
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
Marvel App Presentation
- Request a Marvel App prototype from copilot (fajar.mln@gmail.com) and Trevor (tgerring@topcoder.com).
- Provide the Marvel App shareable link in your notes during submission upload.
Stock Artwork (Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
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.
Judging Criteria
- Completeness of all the editor features copied to your new design
- How interesting and engaging is your proposed design concepts workflow
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Sketch, Adobe Photoshop or Illustrator. Layers should be named and well organized.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.