Challenge Overview
Challenge Overview
Welcome to the “Dinnaco – Sharepoint UI Prototype Dashboard Challenge”. The Sharepoint application (“add-in”) will be used by Dinnaco employees and their customers to monitor 3 key areas of their project work that require visually engaging dashboards.
We have a design and in this challenge we need to build a UI prototype that can be further developed for Sharepoint Enterprise 2013. At the end of this challenge, we want to have a solid UI prototype result following all UI/UX best practices.
All data must be read from JSON files and stubbed in a manner so it can be easily replaced with appropriate backend calls in future. Provide a flag or different dummy credentials to test out the ‘Internal’ and ‘External’ flows
Details on the required functionality of the 3 dashboards is set out below along with general guidance on UX common to all.
Background information
The designs should provide a clear guide to the UX required. However please note the following to help with your work.
The 3 dashboards will be displayed within a frame in Dinnaco’s existing SharePoint site pages. Because of this, the existing SharePoint header and navigation menus are retained and therefore no further menus, headers, or footers are required – as correctly shown in the designs provided.
Different user types
The dashboards have a different UI depending on the user - i.e. Dinnaco’s own team will need a different UI to that of their customer.
Let’s call Dinnaco’s own team ‘internal users’ and their customers ‘external users’.
In general, internal users will have the following user experience:
1. Able to enter the detailed information used for the dashboards in a draft environment
2. Able to review and quickly edit the information once entered
3. Able to make notes against each item for collaborative discussions
4. Able to turn on/off the visibility of each item to the external users (i.e. show/hide each item)
5. Able to export the data into a well-designed report for offline use
Whereas, in general, external users will have the following user experience:
1. Able to view the information in the dashboards (i.e. no adding / editing data)
Dashboard tables (main body of data shown in tables)
In general, if a user clicks on a row in the table then the detailed side pane opens as shown in the designs (designs show Significant risks, but all dashboards should present similar style of side pane).
The tables also have the following features as shown by the icons in the top right of the table:
- Search: performs a filter on the table based on the search term
- Filter: we would like a neat and intuitive suggestion of how this functionality could be performed and reset. There is an icon in the existing design, however no detail of the process is show in the designs. This could be incorporated in the column headings instead of a separate icon.
- Sort: There is an icon in the existing design to perform an ascending / descending sort however we would like this functionality included in the column headings (click to sort ascending, click again to sort descending).
- Tile view: this view is NOT REQUIRED and the icon should be removed.
- View settings: As per the designs shown, this feature should allow the user to select the columns to be viewed by opening a pop up menu with column headings that can be selected or not selected to customise the table. The default column headings to be displayed should as shown in the design.
- Export: This exports the contents of the table into a spreadsheet and prompts the user to save the File.
Dashboard tables (main body of data shown in tables)
In general, if a user clicks on a row in the table then the detailed side pane opens as shown in the
designs (designs show Significant risks, but all dashboards should present similar style of side pane).
The tables also have the following features as shown by the icons in the top right of the table:
- Search: performs a filter on the table based on the search term
- Filter: we would like a neat and intuitive suggestion of how this functionality could be performed and reset. There is an icon in the existing design, however no detail of the process is show in the designs. As there is not design/storyboards for this, we need that you can provide/propose the best filtering option here.
This could be incorporated in the column headings instead of a separate icon.
- Sort: There is an icon in the existing design to perform an ascending / descending sort however we would like this functionality included in the column headings (click to sort ascending, click again to sort descending).
- Tile view: this view is NOT REQUIRED and the icon should be removed.
- View settings: As per the designs shown, this feature should allow the user to select the columns to be viewed by opening a pop up menu with column headings that can be selected or not selected to customise the table. The default column headings to be displayed should as shown in the design.
- Export: This exports the contents of the table into a spreadsheet and prompts the user to save the file.
Screen Requirements
A) Entering basic information used by all dashboards (screens required)
There are some data sets that are common across all 3 dashboards that show the different companies included within the customer’s overall business group – these are called ‘Components’ and ‘Entities’. The hierarchy is as follows:
Top: Group (there is only 1 Group – this is the highest level)
Sub-level: Component (there can be many Components within the Group)
Sub-sub-level Entity (there can be many Entities within each Component)
Screens
- group_information_external shows the view to the external users (should be based on the group_information.jpg)
- group_information_internal shows the view to the internal users (should be based on the group_information.jpg)
Functionality
An internal user should be able to enter this data in a table and this information will then be available in the drop down menus in each of the dashboards where required. Designs are provided showing this screen and the side panel required for adding new items including behaviour for adding a new item in this table.
Each ‘Component’ should have a collapsible section to reveal / hide any ‘Entities’ included within. Note that there will be one ‘Group’ row and this should remain at the top of the table.
The user can enter the data for each Component and Entity using the ‘New’ button which opens the side pane with a blank entry ready for the data to be entered (see designs). An option is included on the side pane allowing the user to import items from a spreadsheet (“Add from file”). If selected this prompts the user to upload a file which is used to populate the table.
Refer to “dashboard-table1.png” for The contents of the table that the internal user will enter on this screen is.
B) Detailed information on the 3 dashboards
1. SIGNIFICANT RISKS DASHBOARD
This dashboard enables our client to share with their customers the status of work being performed in investigating a set of risks. It is expected that there will be around 10-20 risks in the dashboard.
Screens
- dashboard_significantrisks_external shows the view to the external users (design 4a)
- dashboard_significantrisks_internal shows the view to the internal users (design 4b)
Functionality
Add new (internal users only)
An internal user can add a new Significant Risk to the dashboard by clicking on the ‘New’ button and using the side pane window to add a new item. Internal users can edit existing information by clicking on a row and editing the fields in the side pane. Editable data fields are set out in the table below.
An additional option should be added near the top of this side pane allowing the user to import items from a spreadsheet (“Add from file” link text required to be added to the design or other suitable icon). If selected this prompts the user to upload a file which is used to populate the table.
Refer to “dashboard-table2.png” for column headings and data fields required.
2. ADJUSTMENTS DASHBOARD
This dashboard enables our client to share with their customers a list of financial errors found during investigations. It is expected that there could be around 10-50 such items in the dashboard.
Screens
- dashboard_adjustments_external shows the view to the external users
- dashboard_adjustments_internal shows the view to the internal users
Functionality
Add new (internal users only)
An internal user can add a new Adjustment to the dashboard by clicking on the ‘New’ button and using the side pane window to add a new item. Internal users can edit existing information by clicking on a row and editing the fields in the side pane. Editable data fields are set out in the table below.
An additional option should be added near the top of this side pane allowing the user to import items from a spreadsheet (“Add from file” link text required to be added to the design or other suitable icon). If selected this prompts the user to upload a file which is used to populate the table.
Refer to “dashboard-table3.png” for column headings and data fields required.
3. COMPONENTS TRACKER (called “entity tracker” in designs but to be renamed ‘Components tracker’)
This dashboard enables our client to share with their customers the status of work being performed on a number of different parts of the business group (the Group, Components, and Entities – see above for their relationship and hierarchy). It is expected that there could be around 1-200 rows in the dashboard.
The data for this screen should be a copy of all information held in group_information that has:
- a Status marked as ‘Confirmed’
- AND DOES NOT have the Audit Requirement marked as ‘Not in scope for group audit’ OR ‘No audit required’
The style of this screen should also replicate the group_information screen designs (i.e. with groupings and collapsible sections). Any additional fields required are described below.
Screens
- dashboard_componenttracker_external shows the view to the external users
- dashboard_ componenttracker _internal shows the view to the internal users
Functionality
Add new (internal users only)
Group, Components and Entities are defined by the internal user in the group_information screen.
See note above about use of this screen to add/edit items that can be used across all 3 dashboards.
Users should be able to access the group_information page from this dashboard by using the button on the top right of the main screen - currently the designs show this button as “NEW” but this should be change to read “EDIT GROUP STRUCTURE”.
An internal user can edit the detailed information in a row of the table by clicking on a row and editing the fields in the side pane. Editable data fields from this dashboard are set out in the table below (note that the table below supersedes the design in terms of editable fields).
Refer to “dashboard-table4.png” for column headings and data fields required.
- Modern experience for searching and selecting available charities (think of marketplaces)
Competition Task Overview
- The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements
- Replicate the design of the approved Storyboardsfor all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure your submission clear of HTML and CSS Validation errors and warnings.
- Test in all the required browsers.
- Date Formats: Please use “DD-MM-YYYY”.
Code Requirements
- 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.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- All JavaScript must not have a copyright by a third party.
- Create separate files if you plan to create custom functions
- You are allowed to use Bootstrap/AngularJS for this challenge.
- If a plugin is need for charts or table sorting options, you can use it as long is free licensed for commercial use. Declare the source on your declaration file. You won't be scored down for using 3rd parties plugins on this challenge.
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
Documentation Provided:
- Storyboards and All necessary flows.
- Tables Contents
Welcome to the “Dinnaco – Sharepoint UI Prototype Dashboard Challenge”. The Sharepoint application (“add-in”) will be used by Dinnaco employees and their customers to monitor 3 key areas of their project work that require visually engaging dashboards.
We have a design and in this challenge we need to build a UI prototype that can be further developed for Sharepoint Enterprise 2013. At the end of this challenge, we want to have a solid UI prototype result following all UI/UX best practices.
All data must be read from JSON files and stubbed in a manner so it can be easily replaced with appropriate backend calls in future. Provide a flag or different dummy credentials to test out the ‘Internal’ and ‘External’ flows
Details on the required functionality of the 3 dashboards is set out below along with general guidance on UX common to all.
Background information
The designs should provide a clear guide to the UX required. However please note the following to help with your work.
The 3 dashboards will be displayed within a frame in Dinnaco’s existing SharePoint site pages. Because of this, the existing SharePoint header and navigation menus are retained and therefore no further menus, headers, or footers are required – as correctly shown in the designs provided.
Different user types
The dashboards have a different UI depending on the user - i.e. Dinnaco’s own team will need a different UI to that of their customer.
Let’s call Dinnaco’s own team ‘internal users’ and their customers ‘external users’.
In general, internal users will have the following user experience:
1. Able to enter the detailed information used for the dashboards in a draft environment
2. Able to review and quickly edit the information once entered
3. Able to make notes against each item for collaborative discussions
4. Able to turn on/off the visibility of each item to the external users (i.e. show/hide each item)
5. Able to export the data into a well-designed report for offline use
Whereas, in general, external users will have the following user experience:
1. Able to view the information in the dashboards (i.e. no adding / editing data)
Dashboard tables (main body of data shown in tables)
In general, if a user clicks on a row in the table then the detailed side pane opens as shown in the designs (designs show Significant risks, but all dashboards should present similar style of side pane).
The tables also have the following features as shown by the icons in the top right of the table:
- Search: performs a filter on the table based on the search term
- Filter: we would like a neat and intuitive suggestion of how this functionality could be performed and reset. There is an icon in the existing design, however no detail of the process is show in the designs. This could be incorporated in the column headings instead of a separate icon.
- Sort: There is an icon in the existing design to perform an ascending / descending sort however we would like this functionality included in the column headings (click to sort ascending, click again to sort descending).
- Tile view: this view is NOT REQUIRED and the icon should be removed.
- View settings: As per the designs shown, this feature should allow the user to select the columns to be viewed by opening a pop up menu with column headings that can be selected or not selected to customise the table. The default column headings to be displayed should as shown in the design.
- Export: This exports the contents of the table into a spreadsheet and prompts the user to save the File.
Dashboard tables (main body of data shown in tables)
In general, if a user clicks on a row in the table then the detailed side pane opens as shown in the
designs (designs show Significant risks, but all dashboards should present similar style of side pane).
The tables also have the following features as shown by the icons in the top right of the table:
- Search: performs a filter on the table based on the search term
- Filter: we would like a neat and intuitive suggestion of how this functionality could be performed and reset. There is an icon in the existing design, however no detail of the process is show in the designs. As there is not design/storyboards for this, we need that you can provide/propose the best filtering option here.
This could be incorporated in the column headings instead of a separate icon.
- Sort: There is an icon in the existing design to perform an ascending / descending sort however we would like this functionality included in the column headings (click to sort ascending, click again to sort descending).
- Tile view: this view is NOT REQUIRED and the icon should be removed.
- View settings: As per the designs shown, this feature should allow the user to select the columns to be viewed by opening a pop up menu with column headings that can be selected or not selected to customise the table. The default column headings to be displayed should as shown in the design.
- Export: This exports the contents of the table into a spreadsheet and prompts the user to save the file.
Screen Requirements
A) Entering basic information used by all dashboards (screens required)
There are some data sets that are common across all 3 dashboards that show the different companies included within the customer’s overall business group – these are called ‘Components’ and ‘Entities’. The hierarchy is as follows:
Top: Group (there is only 1 Group – this is the highest level)
Sub-level: Component (there can be many Components within the Group)
Sub-sub-level Entity (there can be many Entities within each Component)
Screens
- group_information_external shows the view to the external users (should be based on the group_information.jpg)
- group_information_internal shows the view to the internal users (should be based on the group_information.jpg)
Functionality
An internal user should be able to enter this data in a table and this information will then be available in the drop down menus in each of the dashboards where required. Designs are provided showing this screen and the side panel required for adding new items including behaviour for adding a new item in this table.
Each ‘Component’ should have a collapsible section to reveal / hide any ‘Entities’ included within. Note that there will be one ‘Group’ row and this should remain at the top of the table.
The user can enter the data for each Component and Entity using the ‘New’ button which opens the side pane with a blank entry ready for the data to be entered (see designs). An option is included on the side pane allowing the user to import items from a spreadsheet (“Add from file”). If selected this prompts the user to upload a file which is used to populate the table.
Refer to “dashboard-table1.png” for The contents of the table that the internal user will enter on this screen is.
B) Detailed information on the 3 dashboards
1. SIGNIFICANT RISKS DASHBOARD
This dashboard enables our client to share with their customers the status of work being performed in investigating a set of risks. It is expected that there will be around 10-20 risks in the dashboard.
Screens
- dashboard_significantrisks_external shows the view to the external users (design 4a)
- dashboard_significantrisks_internal shows the view to the internal users (design 4b)
Functionality
Add new (internal users only)
An internal user can add a new Significant Risk to the dashboard by clicking on the ‘New’ button and using the side pane window to add a new item. Internal users can edit existing information by clicking on a row and editing the fields in the side pane. Editable data fields are set out in the table below.
An additional option should be added near the top of this side pane allowing the user to import items from a spreadsheet (“Add from file” link text required to be added to the design or other suitable icon). If selected this prompts the user to upload a file which is used to populate the table.
Refer to “dashboard-table2.png” for column headings and data fields required.
2. ADJUSTMENTS DASHBOARD
This dashboard enables our client to share with their customers a list of financial errors found during investigations. It is expected that there could be around 10-50 such items in the dashboard.
Screens
- dashboard_adjustments_external shows the view to the external users
- dashboard_adjustments_internal shows the view to the internal users
Functionality
Add new (internal users only)
An internal user can add a new Adjustment to the dashboard by clicking on the ‘New’ button and using the side pane window to add a new item. Internal users can edit existing information by clicking on a row and editing the fields in the side pane. Editable data fields are set out in the table below.
An additional option should be added near the top of this side pane allowing the user to import items from a spreadsheet (“Add from file” link text required to be added to the design or other suitable icon). If selected this prompts the user to upload a file which is used to populate the table.
Refer to “dashboard-table3.png” for column headings and data fields required.
3. COMPONENTS TRACKER (called “entity tracker” in designs but to be renamed ‘Components tracker’)
This dashboard enables our client to share with their customers the status of work being performed on a number of different parts of the business group (the Group, Components, and Entities – see above for their relationship and hierarchy). It is expected that there could be around 1-200 rows in the dashboard.
The data for this screen should be a copy of all information held in group_information that has:
- a Status marked as ‘Confirmed’
- AND DOES NOT have the Audit Requirement marked as ‘Not in scope for group audit’ OR ‘No audit required’
The style of this screen should also replicate the group_information screen designs (i.e. with groupings and collapsible sections). Any additional fields required are described below.
Screens
- dashboard_componenttracker_external shows the view to the external users
- dashboard_ componenttracker _internal shows the view to the internal users
Functionality
Add new (internal users only)
Group, Components and Entities are defined by the internal user in the group_information screen.
See note above about use of this screen to add/edit items that can be used across all 3 dashboards.
Users should be able to access the group_information page from this dashboard by using the button on the top right of the main screen - currently the designs show this button as “NEW” but this should be change to read “EDIT GROUP STRUCTURE”.
An internal user can edit the detailed information in a row of the table by clicking on a row and editing the fields in the side pane. Editable data fields from this dashboard are set out in the table below (note that the table below supersedes the design in terms of editable fields).
Refer to “dashboard-table4.png” for column headings and data fields required.
Final Submission Guidelines
Challenge Goals- Modern experience for searching and selecting available charities (think of marketplaces)
Competition Task Overview
- The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements
- Replicate the design of the approved Storyboardsfor all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure your submission clear of HTML and CSS Validation errors and warnings.
- Test in all the required browsers.
- Date Formats: Please use “DD-MM-YYYY”.
Code Requirements
- 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.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- All JavaScript must not have a copyright by a third party.
- Create separate files if you plan to create custom functions
- You are allowed to use Bootstrap/AngularJS for this challenge.
- If a plugin is need for charts or table sorting options, you can use it as long is free licensed for commercial use. Declare the source on your declaration file. You won't be scored down for using 3rd parties plugins on this challenge.
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
Documentation Provided:
- Storyboards and All necessary flows.
- Tables Contents
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.
Payments
Topcoder will compensate members in accordance with the payment structure of this challenge. Initial payment for the winning member will be distributed in two installments. The first payment will be made at the closure of the approval phase. The second payment will be made at the completion of the support period.
Reliability Rating and Bonus
For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
Read more.