URGON - Geospatial Analysis Platform Design Challenge

Welcome to "URGON - Geospatial Analysis Platform Design Challenge". In this challenge, we need your help and creativity to redesign the URGON application which serves geospatial data reports to customers via ad-hoc request and transform it to a full self-service application that is more user friendly and has a better user experience for our customers.

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!

Round 1

Submit your initial designs for checkpoint feedback
00) Base Template
01) Login Screen
02) Dashboard Screen
03) Search Screen

• 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented
00) Base Template
01) Login Screen
02) Dashboard Screen
03) Search Screen 04) Search Result Screen
 

• 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

CHALLENGE OBJECTIVE

• Transform URGON application to become self-service portal and make it more user friendly with better user experience for customers
• 4 Main screens + All interactions (Web/Desktop Design)

BACKGROUND OVERVIEW

• URGON is an application that provides Geospatial data reports to customers
• Every customer report requests are fulfilled on an ad-hoc basis using an internal web application which currently only our employees can use it due to various reasons
• The objective of this project is to build a web enabled frontend for the platform that can be used as a self-service portal by our customers
• Inspiration for the UX/UI will be based on the existing internal web application
• The UI is important and required to be redesigned but the UX functionality will follow principles that currently exist, with the changes highlighted in this challenge implemented to the design

PROJECT GOALS

• Redesign the URGON Geospatial Analysis platform and transform it to a self-service portal
• Elevating the UI design and make it more user friendly for our customers
• Making UX improvements with the same functionality today
• Ideas to increase the effectiveness and efficiency for users when using the application

TARGET AUDIENCE

• Anyone - Security engineer, Authority, etc

SCREEN REQUIREMENTS

00) Base Template and General Design 
Wireframe screen 3 and 4 and Branding Doc page 1

• The overall theme of the design need to be a widget/container grid style
• Please use the proposed template as the basis of your design, the base template is basically a bottom navigation that needs to be present in all screens and will contain four navigation links:
  • Dashboard
  • Search
  • Settings
  • Sign out

01) Login Screen
Wireframe screen 1 and 2

• Ordinary login screen with username and password for user authentication
• Need error scenario when user enter wrong username or password
• Provide forgot password screen as well
• Logo can be dummy image or placeholder

02) Dashboard Screen
Wireframe screen 5 to 8

• Once user logged in successfully, they will landed in their Dashboard screen
• This screen will displays user projects (users will only able to see their own projects)
• The dashboard will only contain saved projects and also displays number of searches a user has consumed from their entitlements
• ‘Project’ is basically a search queries that users do in previous activity on the app and then saved as a project. Saving a query as a project is important because users will be charged based on the number of queries they performed in the application that connected with the app back-end, saving it as projects will save users' budget because it will show the result without need to connect with the back end anymore   
• If user opening a project from their dashboard, it will loads data into the map container
• The user is able to interact with each project using the actions to open, edit and delete
• User also need ability to rename projects in the dashboard
• The user is able to select the search button to create a new project, this will go to the search screen
• On selecting a project, an onclick action should show a container displaying the project information.
• When a user selects to delete a project, they should be prompted with a modal component before removing the project.
• When a user selects to rename a project, they should be prompted with a modal component to specify the new name
• When a user opens a project, the data should be loaded and displayed as a result, this will go to the search results screen

03) Search Screen
Wireframe screen 9 to 11

• The main goal of the search page should be to maximize the map container on the canvas.
• When opening the search page, the right hand container should be visible, and should provide a button to collapse the container
• The page is displayed in a tabular view where users may have one or more queries available
• The map container, by default should display the following controls:
  • Zoom In
  • Zoom Out
  • Map Tile Selection
• The user should be prompted to select a search type. The available options are:
  • Device (out of scope)
  • IP Address (out of scope)
  • Location
• Rename "Pattern of Life" feature to "Device"
• Rename "Geofence" feature to  "Location"
• Remove the functionality to perform a single/batch search, a search will merge functionality of both actions
• In the existing application there is an options to "Show Markers" section, this should be removed
• The GeoFence type of None in a Location Search should be removed. The Polygon type should have the same behavior
• Each search type will show different type of feature in the map, please make sure to check the existing screenshot to capture them 
• Provide as much as possible interaction screens to simulate customer activity when using this application feature

03.1) Location Search
Wireframe screen 30 to 34

• On selecting Location as the search type, additional map controls are added to the map container:
  • Circle drawing tool
  • Polygon drawing tool
  • Trash
• If customers selects Location, the Location section of the menu should be displayed, where they can add Locations to search for
• Need ability to add Location by specify a location by coordinates (latitude, longitude) or by address name
• Offer features to simplify customers interactions, from google Maps location autocomplete, etc
• A user can specify the location type as an area or the polygon. By default ‘area’ will be selected
• If a user selects Polygon as the Location Type, the area radius should be hidden on the component
• Capture all interactions needed in the application, please see wireframes for more details about the required interactions needed for this search feature
• Provide as much as possible interaction screens to simulate customer activity when using this application feature

03.1.1) Area Search 
Wireframe screen 35 to 36

• Capture all interactions needed in the application, please see wireframes for more details about the required interactions needed for this search feature

03.1.2) Polygon Search
Wireframe screen 37 to 47

• Capture all interactions needed in the application, please see wireframes for more details about the required interactions needed for this search feature

04) Search Result Screen
Wireframe screen 48 to 66

• Need functionality to export all data data results to the results container/widget section
• Optimize the results real estate, it can be by hidden other widget like the search menu or making the maps shrink when the result container appear, etc
• Need ability to return to the original search parameters should customers wish to edit and re-run the search
• Show the results data  where circles are added as a layer for each event returned based on the latitude, longitude
• The map should use cluster functions to visualize points in a circle layer as clusters, styled using step expressions
• The goal is to maximize the map container displayed. A user can collapse the results container. By default, this should be expanded
• When a click or zoom event occurs on cluster the map should easeTo the event displayed as a circle
• A user can click on a circle a popup should be displayed containing the properties of an event
• Make sure to watch the existing app walkthrough video and see how the result shown from clusters and then drilled down to individual signal, it is important to capture these interactions in your design
• More details are available in the wireframes, please read the details in the pdf

DOCUMENTATION 

• Available in Challenge Forum!
  • Existing app walkthrough (video, as reference, UI needs to be redesigned but functionality remain)
  • wireframes
  • Branding guidelines document

CHALLENGE FORUM

• If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: https://discussions.topcoder.com/categories/e631baae-9291-424b-9389-cb5f4af0da7f

DEVICE SPECIFICATIONS

• Web/Desktop application
• Minimum 1400px Width with height adjusted accordingly

DESIGN GOALS AND PRINCIPLES

• Follow best practice for Web/Desktop app
• Please use google maps as your design base for the map
• Widget Grid design style with modern, simple, easy to use, and clean design
• Seamless Navigation and enhanced Features
• Reduce the number of interactions required from users as much as possible
• Use color or great visual comparison to highlight a comparison of important information
• Intuitive for the user; should never be left asking "what do I do next?"
• Easy viewing for pages that may be over overcrowded with information
• Keep things consistent. This means all graphics styles should work together
• All of the graphics should have a similar feel and general aesthetic appearance

BRANDING GUIDELINES

• Please follow branding_doc.pdf

JUDGING CRITERIA

• Creativity: Impactful - the solution is different or unique from what is already out there and can be implemented
• Exploration: Flexible - follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals
• Aesthetics: Hi-fidelity design - provide a top-notch finished looking visual design
• Branding: Flexible - follow the provided guidelines and suggest improvements where seem appropriate and inline with the goals

FINAL DELIVERABLES

Submission File

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• Create Marvel Prototype to showcase your design
• Declaration files document contains the following information:
  • Stock Photos Name and Links from allowed sources
  • Stock Art/Icons Name and Links from allowed sources
  • Fonts Name and Links source from allowed sources
• Full Details of the Topcoder Policy can be found in this LINK

Source Files

• All source files of all graphics created in Sketch, Adobe XD, or Figma and saved as an editable layer

FINAL FIXES

• As part of the final fixes phase, you may be asked to modify your files, add or remove screens or combine details to create a final presentation