Challenge Overview
Challenge Introduction:
Welcome to Atlantis - iPAM Integrated Pricing Application Management - UI Prototype Challenge. In this challenge we are looking for your help to create a prototype for a web application based on the provided storyboards!
As part of this challenge we need you to document your HTML / CSS / JS (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development. We will allow documentation updates during final fixes (but still required).
At the of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
UI Prototype Considerations:
- Ensure your submission is clear of validation errors and warnings (HTML & CSS).
- style.css - use this name for all custom css.
- Please use proper id’s and classes in your naming conventions.
- Please find all required assets in the forums!
- Please use Angular 2 and follow John Papa’s style guide (or) use Angular 1.6
- NOTE: We will be adding an additional BONUS prize of $500 for the winner who do the prototype using Angular 2).
- Please use SASS/SCSS for CSS pre-processor (preferred)
Required Screens:
We need below screens and interactions in the prototype. There are four types of users for this application, we will handling all types of users in this challenge.
00 Login:
Reference: 00.a. Log in.png
- Please create the view as shown in reference
- Based on the user type chosen, we need to direct the users to appropriate screen
- If LOPT is selected, then take them to 01. Dashboard Active.png
- If CBIL is selected, then take them to 70. CIBL Dashboard.png
- If SPS is selected, then take them to 56. SPS Dashboard.png
- If APT is selected, then take them to 88. APT-List view.png
- Show a simulation of how the error will be shown (00.c. Log in - error.png)
01 Header:
- All types of user logo should take the user back to appropriate homepage for the user.
- Clicking on the notification icon should show the notifications as in 03. Notifications.png
User Thumbnail Drop-down:
- We need to provide a way for the user to logout
- Maybe on clicking the drop-down icon near the name, we can show a logout option, clicking on which will take the user back to login page (00.a. Log in.png)
Notifications:
- “Check all” can be a dead link for now
- please make sure the pagination works
- Clicking anywhere outside the notifications or the notification icon will hide it.
A. LOPT:
01 Dashboard:
Reference: 01. Dashboard Active.png
- Have the search bar (no links required)
- “Add New Request” this should show Add Request - Step 01.png
- Navigation: Active Requests, New Response, Starred, Countries, sort (Values: Latest Response)
- Note: Those with an alert (pink dot next to name) is indicated by highlighting the row.
- Each row has additional options, shown as a “…” at the end of the row...make it a dead link.
- Please use placeholder for tree view.
- Please make sure the pagination works, you can repeat the contents!
02 Add Request:
Reference: 19. Add Request - Step 01.png
- Include all the fields as shown in the screens, for the 1st section “contacts”, user will be able to enter the name (start typing the name) and we show suggestion based on the match -for now, please use the drop-down similar to 72. Assign Team (but no need the search, and assign button as shown in 72. Assign Team...just listing the users should be fine)
- After entering name, clicking on “X” in the field should empty the field
- “?” icon will will be a tool tip (make it a dead link)
- “back” button takes user back to 01. Dashboard Active.png
- “Continue” button takes user to next page 20. Add Request - Step 02.png
- “Save as draft” takes user to 01. Dashboard Active.png
Service Description:
Reference: 20. Add Request - Step 02.png
- Hover over any of the service will show options to view and edit (21. hover.png)
- User will click on a row to view this page 22. Edit Description.png
- User will be able select the required service descriptions
- “Back” button takes user back to Add Request - Step 01.png
- “Continue” button takes user to next page 39. Country list.png
- “Save as draft” takes user to 01. Dashboard Active.png
- Clicking on “1 project details” should take the user to Add Request - Step 01.png
Edit Description:
- “Back to service description” takes user back to 20. Add Request - Step 02.png
- We would like to change the interaction of “Editing” a point shown in the storyboards (24. Editing.png), instead of editing a user will only be able to add or remove points (if they want to edit a point, they will remove that point and add a new point again)
- Once any edits are made (add or remove points), please show a “Save changes” button at the top, also the green icon changes to “customed” from “default state” as an edit has been done.
- Clicking on “Save Changes” shows a message “saved” as shown in 36. saved.png
- Clicking on “x” icon in each of the point will remove that point
- Clicking on “Add Helper Text” will show a textbox similar to how a user adds a point, similarly an “Edit” link is shown if the helper text has already been added.
- Clicking on “+ add new point” will add an empty textbox below existing point as shown in 29. tapped.png,30. adding new point.png, 31. adding new point2.png,32. new point added.png
- Show Changes toggle button should show the changes that were made to the description as shown in 33. Tapped.png, 34. Show-changes.png (note: we don’t need to capture / show the edits that were made to individual words as shown in provided storyboard).
- Clicking on "+ add new section" should add a new section where a user can include, somthing similar to "Applicability" (in the left) and ability to add points in the right.
- User should be able to delete these section (you can see a delete icon in "Applicability" - clicking on which delete the entires section.
- - - Note: Those points that were removed are striked out in a color
- - - Note: Those point that were newly added are shown in blue color
Country Selection:
Reference: 39. Country list.png
- We show list of countries as checkboxes and allow user to select it.
- Based on the number of countries chosen, we show the appropriate numbers at the bottom “ex: 4 countries selected”
- “Import from excel”: This will allow user to select excel file and initiate upload - for this prototype, just allow user to select some file and show the upload progress as shown in User will be able to 40. uploading
file.png, once file has been uploaded show 41. uploaded.png
- “Review Data” button should take the user to 55. Review.png
- “Back” button takes user back to 20. Add Request - Step 02.png
- “Continue” button takes user to next page 42. Country Details.png
- “Save as draft” takes user to 01. Dashboard Active.png
Country Details:
Reference: 42. Country Details.png
- This shows the list of countries that were selected in the previous step!
- “Assign CBIL”: will show list of CBIL as shown in 43. Assign CIBL.png, user will select a person and we show this assigned view 44. CIBL Assigned.png
- “Add Notes”: Clicking on it will show the add notes pop-up as shown in 53. Adding notes.png
- In “Add notes”, user will enter the notes in text area
- - - “Add Notes” button to hide it (“Add Notes” link changes to “Show Notes” as shown in 54. Notes Added.png)
- - - “Cancel” button will just hide the “add notes” pop-up
- “Show Notes” should show a pop-up similar to “Add notes but it will just show the text without textarea, no buttons required...clicking anywhere outside the pop-up should hide it.
- Clicking on “Remove” should remove the country in which they clicked remove.
- “Back” button takes user back to 39. Country list.png
- “Continue” button takes user to next page 55. Review.png
- “Save as draft” takes user to 01. Dashboard Active.png
Review
Reference: 55. Review.png
- This is the last step, use the information as shown in the storyboard
- Please use placeholder for tree view.
- Selected Service type links can be dead links.
- “Back” button takes user back to 42. Country Details.png
- “Continue” takes user to 01. Dashboard Active.png
- “Save as draft” takes user to 01. Dashboard Active.png
B CBIL
03 CBIL Dashboard:
Reference: 70. CIBL Dashboard.png
- In the top right, we can see “Delegate” section that allows 2 persons to be chosen when the drop-down is clicked show a pop-up similar to 43. Assign CIBL.png but change the text “Assign CBIL” to “Delegate”...selecting a person will show that person as active selection
Arriving (6):
- Please use placeholder for tree view.
- Mouse hover on service will show “Assign” as an option as shown in 71. Hover.png
- Clicking on “Assign” will show the pop as in 72. assign team.png, user will able to search for a user and select the members for the team using the checkbox and click “Assign Team”
In Progress (8):
- Selecting a value “Sugar Rush” (73. tapped.png) will take the user to 74. Project Detail.png
- Please use placeholder for tree view.
- Note: In the storyboards you will find that some text are bold and some regular, make sure to follow that.
Just Completed:
- Make "View Archive" a dead link
- Please use placeholder for tree view.
04 Project Details:
Reference: 74. Project Detail.png
- “Back to Dashboard” should take the user to 70. CIBL Dashboard.png
- Customized Service: All links can be dead links
- Latest Activity: Pagination need to work, you can use the same content for other 2 pages.
- Please use placeholder for tree view.
Service Details:
Reference: 76. Service Detail copy.png
- Clicking on “customed service description” will show 78. Service Detail.png
a. Clicking on “edit” button will show a view as in 83. Editing.png, user will see 2 buttons on clicking this and also the fields below becomes editable in the table, clicking on
b. - - - “save” will change the button to “Edit” and need to show the done icon (green tick icon) for Indirect tax title and also in the sidebar (tree) for indirect tax - this can be seen in 84. done.png
c. - - - “cancel” will change the button back to “Edit”
- 85. Description Completed.png: Same way the process (a,b, c) is completed for all other items (Sales Gmbh, Distributor Gmbh, Manufacturing PLC, Sales PLC), once all items are complete we need to show the tick mark icon and also the message “Data completed” next to “2 days” and change the “Incomplete” message to “Send to LOPT”
- Clicking on “Send to LOPT”, changes the button to “Sent” message as shown in 87. Sent.png
Service Description:
Reference: 78. Service Detail.png
- This is same as 20. Add Request - Step 02.png but this is a read-only view
- 79. Tracking Changes.png: User can use the toggle switch (Tracking changes) to see the changes that been done (removed points are stiked out in a color and newly added points are in bold blue color)
- Clicking on “Back” should take the user back to 76. Service Detail copy.png
C. SPS
05 SPS Dashboard:
Reference: 56. SPS Dashboard.png
- At the top right below header, show the delegation users…(Note: it’s not editable like CBIL user)
Active Project (3)
- Please use placeholder for tree view.
- User clicks on “Sugar Rush” to view the project details shown in 60. SPS-Project-detail.png
In Review (8)
- Please use placeholder for tree view.
Just Completed
- Make Archive will be a dead link
- Please use placeholder for tree view.
06 Project Details:
Reference: 60. SPS-Project-detail.png
- This works in the same way as 74. Project Detail.png, but user does not complete all the items.
- In this example, they will just complete the “Direct Tax” under Manufacturing PLC..user clicks on “Direct Tax” under that and sees this view 62. Direct Tax-Detail.png
- User taps on “customed service description” to see 64. Direct tax - detail.png and user will use the tracking changes toggle switch to 65. Direct tax - with tracking.png
- Clicking “Back” in 64. Direct tax - detail.png will take them back to 66. Direct tax - back.png
Requested Level:
a. Clicking on “edit” button will show a view as in 68. Direct Tax-Edit.png, user will see 2 buttons on clicking this and also the fields below becomes editable in the table, clicking on
b. - - - “save” will change the button to “Edit” and need to show the done icon (green tick icon) for Indirect tax title and also in the sidebar (tree) for indirect tax - this can be seen in 69. Direct Tax-done.png
c. - - - “cancel” will change the button back to “Edit”
D APT:
07 APT Dashboard:
Reference: 88. APT-List view.png
- Map View Tab: On click goes to 89. APT-Map View.png
- Escalated Requests (2) can be a dead link for now
- “Add New Request” will have the same flow like “02 Add Request”
- Please use placeholder for tree view.
Map View:
Reference: 89. APT-Map View.png
- List View Tab: On click goes to 88. APT-List view.png
- Checkboxes within the map needs to work, selecting “New” should show all green items in map and selecting “In progress” should show all the yellow items in map
Client Priorities (The items that are considered highest prototype priorities)
- Code Documentation
- Creating quality and efficient HTML/CSS3 code 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.
Specific HTML/CSS/JavaScript Requirements
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.
CSS/SCSS
- 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 creating 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
- Please use Angular 2 and following best practice i.e. John Papa's guidelines where possible.
- 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.
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 (not applicable for members using angular 2)
Device Requirements:
- Latest Chrome, Safari, Opera, Firefox, IE11+
Provided Assets:
- Storyboard and Screenshots are provided in challenge forums.
- Invision Link to the prototype (please see in forums)
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool