BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to “EPM - Internal Tool Design Concept Challenge"!

Enterprise Management Tool is developed for Retails store analysis Application and it is a very useful tool to get the performance of the Product sales data year to year. As per performance, results data management can take necessary actions/changes in the retail company to satisfy the customer and improve the sales and Quality of the products.

Currently, we have an existing app that is implemented using Adobe Flash which is outdated and end of life, so we will no longer be supporting it starting in 2020. 

In this challenge, we need to replicate the existing UI in Vue.JS new coding to remove all flash components. In this application, there are many various links, reporting, downloads, and modification/customization settings available in the EPM tool, we are looking to improve the UI and UX of the application.

We are really excited to kick off this Design Challenge.

Round 1

Submit your initial designs for a checkpoint feedback
01 Home
02 Create New Content
02 1 Create Report
03 View “Cube Report” (Please include a few screens from this, especially if you want any feedbacks on combining some screens)

- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Submit your final designs with all checkpoint feedback implemented.
01 Home
02 Create New Content
02 1 Create Report
03 View “Cube Report”

- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03)


The purpose of this challenge is to come up with a refreshing UI and provide a better user experience to the users.

Design Considerations
- We are looking for a simple, easy-to-use, Informative, modern design.
- Please follow the supplied branding
- Have your designs of size, 1366px width, and height as required
- We are supplying screens from the existing app, please do not copy as we are trying to improve the UX and overall UI of this application.
- Please make sure the number of screens in the app does not exceed 15 screens.

Required Dashboard Designs
Below screens are in scope for this challenge.
NOTE: Please refer the existing app screenshots, make sure to incorporate all features from that.

00 Login
- User will be able to log in the internal app using an SSO
- User will enter the username and password

A. Admin
The Admin is a superuser, they have access to manage, edit, see creation info, usage reports, MDX coding, remove and delete capabilities.

  • They also have the capability to impersonate other users and see the App in their permissions settings.

  • Last reports viewed folder shows the users last viewed reports, so similarly to the marked items you can access frequently used reports from this folder

01 Home
Please refer Screen no: 1

  • Base User has the option to filter the data in the report displayed initially by choosing a specific period, department and location/branding group. 

  • The daily performance plan is the default landing page report.

Main Navigation:

  • The main navigation can contain these Folders, Smart Folders, Collections

  • A folder could have a File, Link, report and Document Set.

  • Anything that is starred comes under smart folders

  • User should be able to create a new folder or collections.

  • When a user selects a folder in the main navigation, how do you think the content within it need to be shown?

  • There will be a smart folder group, under which we will have sub-folders "Last Updated, Last Viewed, and Marked Items"

  • In addition to the above, we also have an administrative folder - this will have just the reports and items specific to admin in the folder pane and has the same functionality as other folders in the tree.

Admin will have these options “+”, “-“ and “Edit” buttons and will be seen by anyone who is having Admin rights for this application

  • “+” With this button Admin user able to add new own folder/report/Link/File, please see more details below

  • “-“ With this button user able remove the selected folders

  • “Edit”: This will allow the user to re-arrange the folder/drag and rearrange the folders as required.

View Folder Content:
Please refer Screen no: 2

  • User will be able to choose the folder and see the content within it.

  • They should be able to choose an item in the folder and view more details under it

  • Based on the item chosen (Report, Links, File Type and Document Set), corresponding details are shown..please see below to know the appropriate details shown for each item.

Settings:

  • Include an option for setting in an appropriate position, it will have the option to impersonate other users and might have other options.

Folder Navigation of EPM application has three different panes or frames and each pane has different functionality as shown. Customer is open to the design ideas of merging some of the panes with logical grouping into a lesser number of panes. Hence, please consider this scenario in your design approach.

In the existing app, this is put up as a tree structure - you can change the tree view, combine tree or anything you want,  but make sure access to all mentioned functionalities is available.

02 Create New Content

  • User should be able to create new reports (File, Link, report and Document Set)

  • Show us how the user will initiate creating a new content

02 1 Create Report:  
Please refer Screen no: 3

  • If they are planning to create a new report then we need to choose the folder, 

  • User will need to enter the name, description, and enter the query.

NOTE: All newly created reports (Cube Report, Document sets, link, and file type) will be part of “Unpublished” folder under Administrative section because all newly created reports will be on unpublished mode. If the admin user wants to publish it then he needs to select “publish” from the drop-down setting menu / they will also have the option to “delete” it.

03 View “Cube Report”: 
Please refer Screen no: 4

  • The user selects the cube report from the top pane under the title section.

  • Data in the table is collapsed, so provide a way to expand all data in the table, once all data is expanded - then there needs to be a way to collapse all data.

  • Against each of the rows, there should be an option to show specific department data which will be a pop-up on clicking an arrow (please see reference screenshot)

  • Include slicers (filters) to filter the table data

  • If we could add a search bar next to the slicer for store number or district in the example above to key off of or even Department to point to a row column in the window that would help save users time.

  • User will be able to know the “Print, View, Expand All, Export, View”

  • (New Feature) Currently, we don’t have a way to search within the report, please include it.

  • (New Feature) There needs to be a way to allow the user to view the Graphical Representation of the table data.

  • Provide ways to print, export to excel

Usage 
Please refer Screen no: 5

  • We are looking to combine the content from usage and Get info tab and count that as 1 screen

  • Usage helps to show for each report the number of views and who exactly viewed each item. 

  • By selecting the recent viewer's tab under usage you can see exactly who viewed, how many times, and the time of the last vie

Get Info

  • This will display the item details regarding who created, when they did so, what content type etc

  • You can think of combining this with any other tab.

Edit
- This is where most of the customization comes into play for all the reports as you can edit all parameters for how it’s displayed in the report pane.
- Edit Section of cube reports has five different tabs and each tab as shown below has different UI and functionality, Customer is open to the design ideas of merging some of the tabs with logical grouping into a lesser number of the screen (s). Hence, please consider this scenario in your design approach.

Overview
Please refer Screen no: 6

  • This shows the name, description, Cube (drop-down), Domain (drop-down) and columns table

Query Editor:

  • Just include this tab/content for this is not in scope for this challenge

Slicers:
Please refer Screen no: 7

  • This allows you to set the parameters for the filters in reports like “location” “time period” “departments”.

Preview: 
Please refer Screen no: 8

  • This shows a preview of what the report will display like

Related Reports:
Please refer Screen no: 9

  • If user Double click-on related report under Title section at Related report

  • Tab MODIFY Report pop-up window will open.

  • If user click-on “+” button, as shown above, a pop-up window will open to add New report to the “Related Reports”.

  • Provide a way for the user to add or remove reports that are related to the currently viewed report.

Manage:
The manage tab is important for managing access to who can see what reports.

    Overview: 

  • Just include this tab/content for this is not in scope for this challenge
     

Viewers/Collaborators:
Please refer Screen no: 10

Viewers

  • If the user wants to see the "content is available for all the users", they need to uncheck this check-box (refer screenshot)

  • Double click-on any group name under Group name column shows the “Edit Group pop-up Window “

  • Click on “+” under “User ID” column to add users to the Group at Viewers tab.

  • User can select a checkbox that says “Content is available to all users”

  • If the above check box is not selected then we see the option to choose appropriate users who are allowed to access the content

  • User can choose between brands or preset groups, and the other windows display which groups have been selected and the corresponding user id’s falling in those groups. You can then click and select the radio buttons to choose who gains access

Collaborators:
The collaborator's tab is an important tab under manage because you can manage who can see and alter the content in the report.

        -  This is the same as Viewers Tab

Auditing & Scheduling:
Please refer Screen no: 11 

  • Auditing allows you to set intervals and dates for when the report would be flagged to undergo an audit to ensure it’s current and up to date or if we need it anymore.

Scheduling:

  • The scheduling tab under manage then allows you to set release schedules or time periods where the report wouldn’t be visible such as holidays.

Important:
- Keep things consistent. This means all graphics styles should work together
- All of the graphics should have a similar feel and general aesthetic appearance.
- Focus on User Experience / how the user interacts within the dashboard.

MarvelApp Prototype
- We need you to upload your screens to the Marvel App
- Please send your Marvel app request to csystic@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload)

Target Audience
- Internal Employees (standard user and admin user)

Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- The overall design, UI and user experience
- Consistency across the UX/UI

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
- Submit Marvelapp as part of your submission.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD, or Sketch!

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

Topcoder Open 2019

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar
  • Sketch
  • Adobe XD

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30095023