Challenge Summary
Welcome to the Dragonet Ad-Hoc Query Dashboard Responsive Design Challenge!
In this challenge we need your help to design a ad-hoc query web tool that will generate reports, which can be later scheduled or shared with the team.The client is looking for your UX skills to come with different user flows on how the user should accomplish this.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum!
1. Dashboard (desktop)
2. Configuration (desktop )
3. Result (desktop)
4. Export as PDF (desktop)
5. Export as Ad-Hoc PDF (desktop)
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
1. Dashboard (desktop + tablet)
2. Configuration (desktop + tablet)
3. Result (desktop + tablet)
4. Export as PDF (desktop + tablet)
5. Export as Ad-Hoc PDF (desktop + tablet)
6. Share Project (desktop + tablet)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Design Problem
The goal of this application is to come up with a great UX design that would allow the business administration teams to generate reports fast in response to their immediate business need.
User Story
Luke Evans is a CFO at Dragonet. Every week he has meetings with the director and the other managers, where he has to present which are the most riskiest Exposures at the Ultimate Parent within each Industry (Exposure refers how much of the revenue as % will be affected in relation to the Ultimate Parent, which is the highest controlling company within a group – read more details here). He would like a weekly report that provides that information for this particular situation (ad hoc report) and without having to involve the IT team. He just found this new tool that allows him to generate reports on the go with just few clicks.
First, he goes to the dashboard where he creates a new project and then he configures his project. Once he adds a name for it and a short description, he then choses how he wants his data represented: grid or pie chart, bar chart, etc. He picks up the grid option (note: he can only pick the grid or one chart type, but not two options at same time).
Luke has to add the dimensions and measurements next. These are both fields in the database that user already knows are available. The difference between dimension and measurement is that is that you can do mathematical operations only with measurements (example of dimension: “Industry” - Mining , measurement: “Capital”: 30 billions). When he starts typing, the autosuggest option shows him fields that match. He selects the dimensions: “Credit Rating”, “Code Industry”, “Industry Name”, “Ultimate Parent” and measurements: “Exposure” and “Capital”.
Next step is adding calculation and filters. Calculation types refers to functions like Average, Min, Max, Total, Floor, etc. and he can define individual calculations based on selected measurements. Filters are the logical operators that are added to calculation. For example, in our case, he wants the Exposure: “Maximum” AND Credit Rating to be below “A-”. He uses the AND operator because he wants both of these conditions to be true so he can determine the most riskiest exposures. In the final step he can sort which is the order of columns in his table and he defines the column by which all table will be sorted.
All this time, Luke can see a preview of his selected options, with a sample data so he knows how the final result will look like.
Now he is ready to see his grid with real data from the database. He is happy with the result so he wants to share it with his team and also schedule it to see it every week, so he goes and exports it as PDF Report, where he can configure how often it will be generated.
He is almost ready, but he remembers he wants to build a composite report, to include this one and a few other modules/reports (these are pre-defined either by a central team, or as saved ad-hoc queries that have been defined as PDFs) together for next meeting. He then goes to Export as Ad-Hoc PDF, where he can choose which other module to includes in the composite report an he can also select heading page, table of contents etc.
Required Pages
In this challenge we are asking for couple of responsive desktop and tablet design pages to illustrate the above scenario. We are attaching wireframes, but remember to use them as guide for content and not copy the layout. They should be a starting point only, and you should think at other user flows where user can use a lower number of clicks to get the result.
1. Dashboard
Show a list of projects the user can access per different categories he has (Favorites, My Projects, My Drafts, Shared with Me, All Projects). For each project, the user should be able to see the following:
-Name
-Description
-Author
-Date Created
-The persons or team it was shared with or should show global
-Category: Favorite, Draft, Shared, etc
User can also edit, duplicate, delete, share a project and he can add a new project as well.
The user should be able to access the reports he has on this page, as per the categories.
2. Configuration (New Project)
As user wants to create a new project, he will go and configure it first. The project info he needs to customize if the following:
-Project name
-Project description
-Representation
-Dimensions
-Measurements
-Calculations (example of calculations types are Min, Max, Total, Floor, etc)
-Filter (which includes logical operators: AND, OR, XOR, NOT, etc.)
-Column Ordering
-Column Sorting
Note: While we displayed one way to show calculations and filters in the wireframes, we need you to improve that, so the user can add parentheses in order to manage the order of priority.You can see here some ideas to inspire you.
User will also have a preview area where he can see the changes he does, real time with mockup data.
3. Result
On this page user will see the grid/chart with real data from the database along with project title and description. He can then Export it as PDF Report or Export as Ad-Hoc PDF Report.
4. Export as PDF
User should be able to add a title and subtitle to his report and also configure the scheduling of the reports – how often they will be generated. He can see the status of the previous generated reports. Check the wireframes to see the exact content.
5. Export as Ad-Hoc PDF
When user generates and Ad-Hoc Report he can choose to add another modules to it and also schedule it as he desire. He can customize the heading on first page, the table of content and can chose to share the article with a few members, a group, or by email. Check the wireframes to see the exact content.
The Table of Content is driven by selection of certain options (e.g. Title Page, Show TOC, etc) plus the modules selected to be included in the big report – there may need to be a TOC name field for ad-hoc generated report and predefined report modules(reports) to be used in the TOC.
Terms clarification:
A module is a previously saved ad-hoc PDF buy our user or it can be predefined by a central team. A view is a grid or chart. A Composite is a selection of multiple ad-hoc PDF reports merged into a big report.
6. Share Project
As a user, I’d like to share my project with my team members either individual or per group. I need to see the following fields:
-Name of person or group to share the project with
-Short description
-Button to share
Branding
We have provided the Dragonet Branding. Look to follow their colors and text guiding. You should use Arial as your only font for this challenge.
Input Files
- Wireframes
- Branding Guidelines
- Table Data
- Alternative User Flows
Stock Artwork & Icons
- Stock photo and icons are allowed for this challenge. Please remember to declare them so you don’t fail screening.
Target Devices
Responsive web for desktop and tablet application:
- Desktop: 1280px width and height as much as needed
- Tablet: 2048px x 1536px
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
-Business Administration Teams who needs quick access to information
Judging Criteria
- How fast can the user generate reports? Does he needs many clicks or just few?
- How good is the user Experience
- Does the design follows the branding guidelines?
- Hierarchy and organization of content
- Cleanliness of your graphics and design.
In this challenge we need your help to design a ad-hoc query web tool that will generate reports, which can be later scheduled or shared with the team.The client is looking for your UX skills to come with different user flows on how the user should accomplish this.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback1. Dashboard (desktop)
2. Configuration (desktop )
3. Result (desktop)
4. Export as PDF (desktop)
5. Export as Ad-Hoc PDF (desktop)
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App 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 Updates1. Dashboard (desktop + tablet)
2. Configuration (desktop + tablet)
3. Result (desktop + tablet)
4. Export as PDF (desktop + tablet)
5. Export as Ad-Hoc PDF (desktop + tablet)
6. Share Project (desktop + tablet)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Design Problem
The goal of this application is to come up with a great UX design that would allow the business administration teams to generate reports fast in response to their immediate business need.
User Story
Luke Evans is a CFO at Dragonet. Every week he has meetings with the director and the other managers, where he has to present which are the most riskiest Exposures at the Ultimate Parent within each Industry (Exposure refers how much of the revenue as % will be affected in relation to the Ultimate Parent, which is the highest controlling company within a group – read more details here). He would like a weekly report that provides that information for this particular situation (ad hoc report) and without having to involve the IT team. He just found this new tool that allows him to generate reports on the go with just few clicks.
First, he goes to the dashboard where he creates a new project and then he configures his project. Once he adds a name for it and a short description, he then choses how he wants his data represented: grid or pie chart, bar chart, etc. He picks up the grid option (note: he can only pick the grid or one chart type, but not two options at same time).
Luke has to add the dimensions and measurements next. These are both fields in the database that user already knows are available. The difference between dimension and measurement is that is that you can do mathematical operations only with measurements (example of dimension: “Industry” - Mining , measurement: “Capital”: 30 billions). When he starts typing, the autosuggest option shows him fields that match. He selects the dimensions: “Credit Rating”, “Code Industry”, “Industry Name”, “Ultimate Parent” and measurements: “Exposure” and “Capital”.
Next step is adding calculation and filters. Calculation types refers to functions like Average, Min, Max, Total, Floor, etc. and he can define individual calculations based on selected measurements. Filters are the logical operators that are added to calculation. For example, in our case, he wants the Exposure: “Maximum” AND Credit Rating to be below “A-”. He uses the AND operator because he wants both of these conditions to be true so he can determine the most riskiest exposures. In the final step he can sort which is the order of columns in his table and he defines the column by which all table will be sorted.
All this time, Luke can see a preview of his selected options, with a sample data so he knows how the final result will look like.
Now he is ready to see his grid with real data from the database. He is happy with the result so he wants to share it with his team and also schedule it to see it every week, so he goes and exports it as PDF Report, where he can configure how often it will be generated.
He is almost ready, but he remembers he wants to build a composite report, to include this one and a few other modules/reports (these are pre-defined either by a central team, or as saved ad-hoc queries that have been defined as PDFs) together for next meeting. He then goes to Export as Ad-Hoc PDF, where he can choose which other module to includes in the composite report an he can also select heading page, table of contents etc.
Required Pages
In this challenge we are asking for couple of responsive desktop and tablet design pages to illustrate the above scenario. We are attaching wireframes, but remember to use them as guide for content and not copy the layout. They should be a starting point only, and you should think at other user flows where user can use a lower number of clicks to get the result.
1. Dashboard
Show a list of projects the user can access per different categories he has (Favorites, My Projects, My Drafts, Shared with Me, All Projects). For each project, the user should be able to see the following:
-Name
-Description
-Author
-Date Created
-The persons or team it was shared with or should show global
-Category: Favorite, Draft, Shared, etc
User can also edit, duplicate, delete, share a project and he can add a new project as well.
The user should be able to access the reports he has on this page, as per the categories.
2. Configuration (New Project)
As user wants to create a new project, he will go and configure it first. The project info he needs to customize if the following:
-Project name
-Project description
-Representation
-Dimensions
-Measurements
-Calculations (example of calculations types are Min, Max, Total, Floor, etc)
-Filter (which includes logical operators: AND, OR, XOR, NOT, etc.)
-Column Ordering
-Column Sorting
Note: While we displayed one way to show calculations and filters in the wireframes, we need you to improve that, so the user can add parentheses in order to manage the order of priority.You can see here some ideas to inspire you.
User will also have a preview area where he can see the changes he does, real time with mockup data.
3. Result
On this page user will see the grid/chart with real data from the database along with project title and description. He can then Export it as PDF Report or Export as Ad-Hoc PDF Report.
4. Export as PDF
User should be able to add a title and subtitle to his report and also configure the scheduling of the reports – how often they will be generated. He can see the status of the previous generated reports. Check the wireframes to see the exact content.
5. Export as Ad-Hoc PDF
When user generates and Ad-Hoc Report he can choose to add another modules to it and also schedule it as he desire. He can customize the heading on first page, the table of content and can chose to share the article with a few members, a group, or by email. Check the wireframes to see the exact content.
The Table of Content is driven by selection of certain options (e.g. Title Page, Show TOC, etc) plus the modules selected to be included in the big report – there may need to be a TOC name field for ad-hoc generated report and predefined report modules(reports) to be used in the TOC.
Terms clarification:
A module is a previously saved ad-hoc PDF buy our user or it can be predefined by a central team. A view is a grid or chart. A Composite is a selection of multiple ad-hoc PDF reports merged into a big report.
6. Share Project
As a user, I’d like to share my project with my team members either individual or per group. I need to see the following fields:
-Name of person or group to share the project with
-Short description
-Button to share
Branding
We have provided the Dragonet Branding. Look to follow their colors and text guiding. You should use Arial as your only font for this challenge.
Input Files
- Wireframes
- Branding Guidelines
- Table Data
- Alternative User Flows
Stock Artwork & Icons
- Stock photo and icons are allowed for this challenge. Please remember to declare them so you don’t fail screening.
Target Devices
Responsive web for desktop and tablet application:
- Desktop: 1280px width and height as much as needed
- Tablet: 2048px x 1536px
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
-Business Administration Teams who needs quick access to information
Judging Criteria
- How fast can the user generate reports? Does he needs many clicks or just few?
- How good is the user Experience
- Does the design follows the branding guidelines?
- Hierarchy and organization of content
- Cleanliness of your graphics and design.
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.