Challenge Overview


Challenge Overview

Welcome to "Dinnaco - iXBRL Document Viewer UI Prototype Challenge". Recently, we finished the information architecture and UI design contests for this project. In this challenge, we are looking for you to help build a working UI prototype using the outputs from the wireframe and design challenge.

XBRL is an open technology standard for financial reporting, based on XML. Many countries along with their respective financial regulators requires businesses to submit their financial reports (e.g. balance sheets and P&L accounts) in an electronic format such as iXBRL. An iXBRL (Inline XBRL) document is essentially a HTML document that contains XBRL tags applied to key financial information within it. This makes an iXBRL document human as well as machine readable. iXBRL documents can be seen on any browser. The iXBRL tags are defined in taxonomies. More information can be found here.

The iXBRL Document Viewer is an application that allows Dinnaco’s clients to review tax and financial documentation on a year by year basis. Clients are able to log in to the application and be presented with a dashboard that has links to their full list of companies (businesses that they own and/or represent) and the associated documents for each of these companies. The client is able to view high level metrics associated with a single company or a selected group of companies on the dashboard. In addition to high level metrics on the dashboard, our clients should be able to see the status of any open issues or queries about the documents for each company. Besides being a document reviewer application, the application should allow for our clients to collaborate, comment, and interact with Dinnaco consultants on each document.

Platforms and Technologies

HTML/HTML5, CSS3, D3, Angular.js, Bootstrap, JSON, JavaScript

Important Expectations:

- Use Angular.js for any new element interactions you built.
- Please implement graphs/charts provided on all pages using some dummy data.
- Please use JSON files provided.
- You MUST make sure all graphic look sharp on Retina and Standard Size. Let us know if you need us provide you for some missing Retina design.
- Challenge winner will be responsible to fix any issues we found or exists on existing UI Prototype after updated based on this challenge spec.
- You are allowed to use graph and chart libraries that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. Please use Angular JS technologies as much as possible.
- For graphs, we prefer
D3. Please use .less files for CSS where possible and use clear variable structure so that it is easy to change/maintain.
- Use of
Bootstrap is highly recommended.

A. Desktop Size
- Set 1025px min-width for all desktop sizes
- Desktop sizes need to be fluid starting from 1025px and upper

B. Tablet Size
- Use fluid width of mobile version for tablet size
- Check on 768px - 1024px to see how Tablet look.
- You must adjust sizing for any elements to make they look proper with existing tablet look and feel.


Sample Data Structure and Angular Services

We have provided some sample code and data in forums. The idea is you can directly call the angular services to receive the data. The dashboardController shows the use of different services. The broad data structure is explained below.

ClientYears - this represents a year (e.g. 2010/11 etc) for which we have the data for the client. This gives you year level statistics and list of entities for that year.

EntityDetails - this represent an entity. Note the field called FileGuid. This is a unique GUID for each entity. The FileGuid is a link between the entity and all other related data such as TagList, ContextRefs, and the iXBRL file itself. Each entity will have it’s own statistic figures (ETR, DebtorDays and ROCE).

TagList - this represents list of tags associated with a file. As explained above the link is FileGuid

ContextRefs- these are context references used in the file. Essentially these are different accounting periods that tags are related to. There might be duplicate DateStart and DateEnd combinations. To represent them as legends in document viewer page, you may need to take a unique subset of these.

TagComparisons - this is a YOY (year on year) comparison report to be shown in the document viewer page. Different columns represent the attributes. Please note the use of two specific suffixes in the column names -  CY (current year) and PY (previous year). You will need to replace them in order to obtain a unique list of attributes to be shown as a selection. This is again linked via FileGuid. Please assume that there will two more columns in the dataset called Comparison and Severity. The first column gives some comments on the comparison and later gives an indication of severity (High,Medium,Low,N/A)  of the difference to help decide the colour code.

iXBRL Files - as you can see in the dashboardController GetFile function returns a raw html code for the file. You have to pass in particular FileGuid for the entity you are trying to view.

We haven’t provided any data structure for queries and FAQs. Please assume some sensible structure. Please include FileGuid, EntityId and TagId (if the query is related to specific tag) in your data structure for queries.


UI Prototype Page Requirements

00. Logo, Top Menu and Footer

- The Logo, top menu and footer needs to be included on all pages.
- The “Logout” text must be a link. It does not need to navigate to any page (that functionality will be implemented later)
- Please match the Logo and menu items exactly.
- Note a slight rounded edge on the left side of logo box.
- See the light blue line at bottom of active menu item.
- “Disclaimer” in footer needs to be a link.

01. Dashboard/Landing Page

Screenshot: submission/00.jpg and submission/iPad 00.jpg

- The three % meters need to be actively implemented and not static images. Use JSON data provided.
- Note the left, right and bottom margin around the three charts.
- Search should be able to search entities by name
- Sort by could be by name, date or number of documents.
- Implement active pagination.
- Show can have 10, 25, 50 and 100 as its values.
- The comparative figures should compare the latest year figures to previous year figures
- The % meters are only shown when there is no entity is selected or there is only one entity available in whole data set.

Screenshot: submission/00_1.jpg and submission/iPad 00_1.jpg

- Please note that we do NOT need the customized hand cursor. Please use the conventional hand cursor.

Screenshot: submission/01.jpg and submission/iPad 01.jpg

- Expand/Collapse should be available for each element.
- Allow the ability to expand more than one entity at a time.
- View and Download are links to view the document details and download the documents (.html files)Please see the provided angular service.
- The number of documents available in expand view should match the number shown on right side.

Screenshot: submission/02.jpg and submission/iPad 02.jpg

- When a checkbox is clicked, display graph related to that entity for three different measures and last three years.
- Similar action should be taken if the entity is dragged on top box. Dragging function must be working.
- Allow only 3 items to be compared at a time.
- Please note a small ‘x’ button on each tag. It should delete the tag from compare box and allow another tag to be added.

Screenshot: submission/03.jpg and submission/iPad 03.jpg

- Each of the three graphs must be able to switch between graph view and table view.

Screenshot: submission/04.jpg and submission/iPad 04.jpg

- Implement the grid view and take care about size changes when tablet is used.
- Active/Selected entities must have blue shade.
- Again, selecting an entity must create graphs and actions in top graph panel similar to list view.

Screenshot: submission/04_1.jpg and submission/iPad 04_1.jpg

- Clicking on “Compare Tags” should open modal as shown in image.
- See the print, save and cancel button.
- Add the overlay shade in background as shown in image        
- Try to match the model layout as closely as possible including rounded edges.

Screenshot: submission/04_2.jpg and submission/iPad 04_2.jpg

- Select Tag button should open drop down menu where you can select tags.

Screenshot: submission/04_3.jpg and submission/iPad 04_3.jpg

- In the graph panel, the “magnify” symbol should be clickable. Again, please use conventional hand curson and NOT the custom one shown in design.

Screenshot: submission/04_4.jpg and submission/iPad 04_4.jpg

- Clicking on “magnify” symbol should open modal with respective graph
- Close button and cancel button should close the window.
- Try to match the model layout as closely as possible including rounded edges.


02. View iXBRL Document Detail Page

Screenshot: submission/05.jpg and submission/iPad 05.jpg

- Download and Print button should be clickable and back button should take you back to dashboard.
- Place all components on this page very carefully and layout should be fluid to provide same look and feel when size changes (viewing on tablet).
- Color coding of numbers in document details should be allowed.
- Show the legend for color coding
- This page should provide a Queries section with query types as expand/collapse feature.
- “Compare with Prior Year“ button must be clickable.
- Implement three tabbed widget on left with items as content, tags and history.
- Note the comment box that should be implemented.

Screenshot: submission/06.jpg and submission/iPad 06.jpg

- Tags tab on top left column box should be a table with filter allowed for each field.
- Note print and download buttons within that table too.

Screenshot: submission/06_1.jpg and submission/iPad 06_1.jpg

- Select Columns should allow to select among various available columns using drop down

Screenshot: submission/07.jpg and submission/iPad 07.jpg

- History should show past users with date and time when documents were last accessed.

Screenshot: submission/07_1.jpg and submission/iPad 07_1.jpg

- Highlight the selected item

Screenshot: submission/07_1_0.jpg and submission/iPad 07_1_0.jpg

- Select “Compare with prior years” should open modal.
- Note the overlay.

Screenshot: submission/07_1_1.jpg and submission/iPad 07_1_1.jpg

- Select Attributes should allow dropdown to select various attributes.

Screenshot: submission/07_1_2.jpg and submission/iPad 07_1_2.jpg

- Highlight the selected item.

Screenshot: submission/07_2.jpg and submission/iPad 07_2.jpg

- Clicking on selected item should open full comparison modal as shown in image.
- Make sure content is fluid and looks good with different sizes.

Screenshot: submission/07_3.jpg and submission/iPad 07_3.jpg

- See the small left arrow on the top left widget.
- Again, please use conventional hand cursor and NOT the custom one.

Screenshot: submission/07_4.jpg and submission/iPad 07_4.jpg

- Clicking the above mentioned arrow should hide the left panel completely.
- Again clicking the arrow should open the panel.
- Please take care that full view is fluid and looks good in all sizes.


03. Query Status Page

Screenshot: submission/08.jpg and submission/iPad 08.jpg

- Left pane has table of contents containing various categories of queries.
- Each category can have sub categories.
- Again the small arrow on top right should allow to hide/show the complete left pane as above.

Screenshot: submission/08_0.jpg and submission/iPad 08_0.jpg

- Allow to select a particular query. Again, use conventional hand cursor.

Screenshot: submission/08_1.jpg and submission/iPad 08_1.jpg

- Show the selected query on the main dashboard bottom left pane.


04. FAQ Page

Screenshot: submission/09.jpg and submission/iPad 09.jpg

- The page should implement expand/collapse feature for each question.

Screenshot: submission/09_1.jpg and submission/iPad 09_1.jpg

- Allow to expand more than one question at a time.

Screenshot: submission/09_2.jpg and submission/iPad 09_2.jpg

- Clicking on the answer should open a modal showing full answer.
- Note the overlay effect.


Client Priorities (The items that are considered highest prototype priorities)

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.

Code Requirements

Please make sure all pages load quickly. If there is any lagging on the page for any valid reason (e.g. long running processes) then please sure that user feedback is provided (e.g. progress bar).

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.
- Please provide IDs for as many HTML elements as possible
- 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

- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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.
- 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 looks sharp for Retina and Standard devices

Browsers Requirements

Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
- IE 10 and above
- Chrome, Firefox and Safari on iPad (Landscape & Portrait View)
- Android Browser

 



Final Submission Guidelines

Submission Deliverables:
- A complete list of UI prototype deliverables can be viewed at: UI Prototype Tuorial

Final Submission:
- For each member, the final submission should be uploaded to: Online Review Tool
 

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30053370