Challenge Summary
Welcome to "E2E Maps Process - New Map Interaction Design Challenge". In this challenge, we need your creative skills to help us by adding new map interactIons to our existing E2E Process Map. We need you to think and imagine the best UI/UX for the new interaction requirements needed in the Map. Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
This application is hosted in the cloud and accessible via browser and mobile, and for the first phase, we are starting with browser access from a standard windows laptop, as mobile app use at this company is not completely mature yet. We will, however, roll out a mobile app version of this software, and ask that the web app is created with future capability with tablets/phones in mind.
This project has the following Business Objective that needs to accomplish:
- Create a platform that delivers insights into the state of robotic process automation ("bots") and artificial intelligence software deployments at our company.
- Better visibility into process health, volume throughput, and other metrics, in real time
- Offer a visual, interactive UI for executives to use to zoom in and out of end-to-end business process areas, with a capability to reveal data as zooming and panning changes dynamically or by switching a toggle, as well as being touch-sensitive for screens that allow it, and the ability to display icons, text, or links to further information on the map itself
-- D3.js PoC example here with toggle functionality on the bottom right of the screen – each end-to-end process name can be clicked to get a more detailed view, and the toggle can be used to change the icons displayed
-- This example is static, but the future version of this view should contain a portal for super users/admins to add/delete/modify embedded content, icons, and information (we are going to create it in this challenge!)
- Have a customizable front-end dashboard of various reports, alerts, graphics, or other “bricks” of content that an executive could choose to display or hide as he or she sees fit
- Overall, the main goal is to give executive management the ability to access the latest data relevant to automation whenever they need it – any data around ongoing projects, new automation opportunities in our pipeline, performance metrics, embedded reference files in the form of PDF or MS Office documents, or other reports.
Challenge Goal
Our goal is to create the best UI/UX for map interactions needed for the E2E Maps Process. The Key Requirement is - having more interactive and able to control the content, moving nodes around the maps.
Design Consideration
- Consistency with our existing design.
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Simple, clean, modern.
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
- Looking forward to seeing some ideas beyond our concepts (Feel free to add more screen ideas related to our product!)
Screen Requirements:
In this challenge, we need you to provide the following interactions to the map:
1) Open the Map Screenshot (available in challenge attachment) or you can directly simulate it from https://maps-process.herokuapp.com/, grab the map screenshot as the base of your design
2) By default, you will see the overall/complete map view for E2E Map Process, for a note, each dot in the process is clickable and there is a menu Upload file, view uploaded data and remove data, this was a feature that our client tried and isn't working, so we can remove that from the Prototype. However, they do still want to be able to upload a PDF at the "dots". (01A - Main Map.png, 01B - Main Map Legend.png, 01C - Main Map - Asset Acquire to Retire.png, 01D - Main Map - Interaction clicking node.png)
3) Now, click on any process listed in the left side from the main map view (legend), it will drill down and show that particular process in larger view (02A - Details View - Asset Acquire to Retire.png, 02B - Details View - Quote to Cash.png, 02C - Details View - Plan to Forecast.png, 02D - Details View - Legend and View Different Maps.png)
3) In the process details, there is a button at the right bottom to show 3 view: Deployment, Opportunities, and Use Case view (02A1 - Details View - Asset Acquire to Retire - Deployment View.png, 02A2 - Details View - Asset Acquire to-Retire - Opportunities View.png, 02A3 - Details View - Asset Acquire to Retire - Use Case View.png)
4) In these 3 views, we need the think and create the following UI/UX interaction features:
- Overall - more interactive and ability to control the content
- Move nodes around
- Allow a user to add new icons and manage/maintain the icon: i.e.Modify, Replace, Move:
-- Need to handing for zooming
-- Handle for add text, icon, and both (icon and text)
-- Your icon size needs to have the same size ratio with the current prototype, the image needs to be created using 50x50 size or so, and it needs to be under a certain KB size...Please take a look at the current images as guidelines.
-- We don't need to create any icons in here, what we need is the interactions on how the user can upload the icons to the maps
-- Let us know the best way to upload the icons, is it via URL, local upload from PC, import from 3rd party service, etc?
- Allow a user to place and remove icons in a sub-process (which are along the dotted gray lines)
- Allow a user a user to control the copy of the pop-up boxes for the icons (trigger the interactions on the line):
-- Allow for hyperlink
-- Headings
-- Bullet points
-- Copy can be an image or PDF
- This is for the All view for all process
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
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Target Audience
The primary users of this application will be Manager to VP level executives. That being said, we could develop for now four categories of users:
- Managers – Primary users with a limited set of access in terms of changing the interface of changing any data. These users would access the platform to see data or download a report, but not execute work or adjust anything beyond adjusting their "view" by using filters/toggles/etc. We would want to be able to segment multiple groups here so that we could hide/unhide data from certain groups but not from others (for example, one manager who belongs to security/access group A won’t see data for Europe if Group A is for North America users and data only – we should be able to flag every piece of data or UI attribute that would be potentially restricted to certain groups of users
- Superusers – Backend access, ability to change permissions, add users, change some key settings, etc. Exposure to more information that would be considered clutter to Executives/Management who would have more minimalist views and fewer customization options
Branding Guidelines
- Font, Colors, Style Needs to follow our existing Process Map
Target Devices
- Desktop: 1366px(w) & height up to your design
Documentation
- Map Screenshot
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
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 image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (might need to convert it to photoshop later), XD, or Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Round 1
Submit your initial Map Interaction design for a Checkpoint Feedback- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp 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 Map Interaction design plus Checkpoint Updates- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
This application is hosted in the cloud and accessible via browser and mobile, and for the first phase, we are starting with browser access from a standard windows laptop, as mobile app use at this company is not completely mature yet. We will, however, roll out a mobile app version of this software, and ask that the web app is created with future capability with tablets/phones in mind.
This project has the following Business Objective that needs to accomplish:
- Create a platform that delivers insights into the state of robotic process automation ("bots") and artificial intelligence software deployments at our company.
- Better visibility into process health, volume throughput, and other metrics, in real time
- Offer a visual, interactive UI for executives to use to zoom in and out of end-to-end business process areas, with a capability to reveal data as zooming and panning changes dynamically or by switching a toggle, as well as being touch-sensitive for screens that allow it, and the ability to display icons, text, or links to further information on the map itself
-- D3.js PoC example here with toggle functionality on the bottom right of the screen – each end-to-end process name can be clicked to get a more detailed view, and the toggle can be used to change the icons displayed
-- This example is static, but the future version of this view should contain a portal for super users/admins to add/delete/modify embedded content, icons, and information (we are going to create it in this challenge!)
- Have a customizable front-end dashboard of various reports, alerts, graphics, or other “bricks” of content that an executive could choose to display or hide as he or she sees fit
- Overall, the main goal is to give executive management the ability to access the latest data relevant to automation whenever they need it – any data around ongoing projects, new automation opportunities in our pipeline, performance metrics, embedded reference files in the form of PDF or MS Office documents, or other reports.
Challenge Goal
Our goal is to create the best UI/UX for map interactions needed for the E2E Maps Process. The Key Requirement is - having more interactive and able to control the content, moving nodes around the maps.
Design Consideration
- Consistency with our existing design.
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Simple, clean, modern.
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
- Looking forward to seeing some ideas beyond our concepts (Feel free to add more screen ideas related to our product!)
Screen Requirements:
In this challenge, we need you to provide the following interactions to the map:
1) Open the Map Screenshot (available in challenge attachment) or you can directly simulate it from https://maps-process.herokuapp.com/, grab the map screenshot as the base of your design
2) By default, you will see the overall/complete map view for E2E Map Process, for a note, each dot in the process is clickable and there is a menu Upload file, view uploaded data and remove data, this was a feature that our client tried and isn't working, so we can remove that from the Prototype. However, they do still want to be able to upload a PDF at the "dots". (01A - Main Map.png, 01B - Main Map Legend.png, 01C - Main Map - Asset Acquire to Retire.png, 01D - Main Map - Interaction clicking node.png)
3) Now, click on any process listed in the left side from the main map view (legend), it will drill down and show that particular process in larger view (02A - Details View - Asset Acquire to Retire.png, 02B - Details View - Quote to Cash.png, 02C - Details View - Plan to Forecast.png, 02D - Details View - Legend and View Different Maps.png)
3) In the process details, there is a button at the right bottom to show 3 view: Deployment, Opportunities, and Use Case view (02A1 - Details View - Asset Acquire to Retire - Deployment View.png, 02A2 - Details View - Asset Acquire to-Retire - Opportunities View.png, 02A3 - Details View - Asset Acquire to Retire - Use Case View.png)
4) In these 3 views, we need the think and create the following UI/UX interaction features:
- Overall - more interactive and ability to control the content
- Move nodes around
- Allow a user to add new icons and manage/maintain the icon: i.e.Modify, Replace, Move:
-- Need to handing for zooming
-- Handle for add text, icon, and both (icon and text)
-- Your icon size needs to have the same size ratio with the current prototype, the image needs to be created using 50x50 size or so, and it needs to be under a certain KB size...Please take a look at the current images as guidelines.
-- We don't need to create any icons in here, what we need is the interactions on how the user can upload the icons to the maps
-- Let us know the best way to upload the icons, is it via URL, local upload from PC, import from 3rd party service, etc?
- Allow a user to place and remove icons in a sub-process (which are along the dotted gray lines)
- Allow a user a user to control the copy of the pop-up boxes for the icons (trigger the interactions on the line):
-- Allow for hyperlink
-- Headings
-- Bullet points
-- Copy can be an image or PDF
- This is for the All view for all process
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
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Target Audience
The primary users of this application will be Manager to VP level executives. That being said, we could develop for now four categories of users:
- Managers – Primary users with a limited set of access in terms of changing the interface of changing any data. These users would access the platform to see data or download a report, but not execute work or adjust anything beyond adjusting their "view" by using filters/toggles/etc. We would want to be able to segment multiple groups here so that we could hide/unhide data from certain groups but not from others (for example, one manager who belongs to security/access group A won’t see data for Europe if Group A is for North America users and data only – we should be able to flag every piece of data or UI attribute that would be potentially restricted to certain groups of users
- Superusers – Backend access, ability to change permissions, add users, change some key settings, etc. Exposure to more information that would be considered clutter to Executives/Management who would have more minimalist views and fewer customization options
Branding Guidelines
- Font, Colors, Style Needs to follow our existing Process Map
Target Devices
- Desktop: 1366px(w) & height up to your design
Documentation
- Map Screenshot
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
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 image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (might need to convert it to photoshop later), XD, or Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.