Living Progress - World Wildlife Fund (WWF) - Responsive Application Design Challenge

Welcome to  Living Progress - World Wildlife Fund (WWF)  - Responsive Application Design Challenge!

In this challenge, we are looking for your  help to design a web application that allows comparison of reported trade data to identify discrepancies in reports of imports and exports between countries.

We have provided wireframes for content references, please do not copy them!
Also please don’t just color the wireframes, we are looking for you to improve the overall layout, interaction and user experience of the this application.

This challenge is part of the HPE Living Progress Challenge Blitz Program (Secure top placements in the leaderboard to grab additional cash prizes).

Good luck and we look forward to your design!

Round 1

Submit your initial designs for Checkpoint Feedback

01 Landing Home Page
02 Profile
03 Dashboard/Landing Screen
04 Search Data
05 Data Comparison Details

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.

01 Landing Home Page
02 Profile
03 Dashboard/Landing Screen
04 Search Data
04.1 Notification/Alert Configuration Details
05 Data Comparison Details
06 Query List
07 Style Tile

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

The Purpose of this challenge is to come up with the the look & feel and flow for this web application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).

Problem:
Our forests, fisheries and wildlife are subject to many pressures, but illegal activities are especially damaging due to their scale and scope. WWF has developed a methodology to identify products moving through global trade routes that are suspected as illegal by comparing import and export data. For example: if Russia reports significantly less exports of king crab to South Korea than South Korea reports in imports of king crab from Russia, this suggests there may be some illegal trade occurring in king crab between the two countries.

We propose using HPE’s technology to enable large- scale use of this approach through powerful data analytics, processing, and management capabilities.

Solution:
The solution is to ideally develop an online tool that is able to access reported trade data based on the harmonized tariff schedule (HTS) codes for internationally traded commodities to identify discrepancies between imports and exports that might suggest illegal trade flows of products.

The data sources needed include reported trade data (imports, exports, and re-exports) between countries.
- The tool will access reported data from individual country databases ideally, or in circumstances where the data is not accessible via an online database, from reported trade data from the UNCOMTRADE international statistics database (http://comtrade.un.org/) or the Eurostat trade database (http://ec.europa.eu/eurostat/data/database).

Design Ideas:
- Looking for modern, intuitive user interface
- Focus on the design being a great user experience, think simple but effective solutions!
- Come up with designs that shows out-of-the-box solutions.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Please make sure your capture every details in the wireframe.
- Branding is open to the designers!

Design Size:
- Please have your designs of size 1280px width and height as required.

References:
- Inspiration and Mood Board

Required Screens:

01 Landing Home Page:
- This is the landing page, make this page exciting and engaging for the users!
- This will be an overview page describing what the WWF Application will do and point out features that are included in the application such as the dashboard and analytics and reporting.
- This page needs to at a high level be very visual and inviting while giving a great overview of the WWF app experience. It should answer the Who, the What, and the Why should someone use this application.
- How will the user know the key features of this application?
- Provide options for the user to login or register with the app.
- We would like you to do your research, take a look at successful landing page designs.

Registration:
- Provide a way for the user to register into the app
- Should include basic information about the user (name), username, password, retype password.

Login:
- Provide a way for the user to login into the application
- User will need to enter username / password
- How does the error page look like?

02 Profile:
- We’ll create a basic profile for our users that will include name, company name, contact information, and country
- Should allow the user to edit the profile.

03 Dashboard/Landing Screen:
- Trends for a Country: It will be helpful to have a view for a specific country user (e.g., customs official interested in trends across multiple species/products that flow in or out of their country). Make sure the visualization allows users to view both exports/imports by year or monthly. Provide options to print, download data (CSV, Excel, PDF), Set Country List (allow users to search and add countries to the list), Timeframe for the graph (Monthly or Yearly).
- Global Trends for Species in Multiple Countries: Have a view for someone more focused on the species/product itself across multiple countries, it would be great if the user can modify which view they can have that would be ideal, so that both options would be available. Ideally looking at as many options as possible is good. Country or product driven queries. Regional issues to account for displacement from one place to a different place nearby, trading partner patterns, price driven changes.
- Show top 10 active trading partners that the user is viewing, as well as recent past partners to account for changes that may signal a problem.
- Show saved queries and visualizations
- Show alerts for species codes that are flagged for review.
- They should be able to refresh/update the data.
- Notifications of updates to the data.
- Show recent news and case studies- Provide options to create a new query (this goes to a page similar to “Search Data” below)

04 Search Data:
- Allow the user to initiate a search that is able to extract the following data and provide a summary of annual trade data by product (specific HTS code for fish) between countries:
- Periods (year): Allow multiple years or a year range to be selected
- Fisheries Product: Allow selection of HTS commodity code / description. The HTS codes selection should be flexible, given the range often employed to apply to products. How do we show the details about each of the fisheries product that being selected (in wireframes on mouse hover on each of the fisheries products in the drop-down..you could see the details of it).
- Reporter Country: This refers to the country that reports the data, should allow multiple countries to be selected (provide the ability to select all countries by providing “All” as an option).
- Partner Country: Based on the selected reporter country, the list gets filtered with the partners, should allow multiple countries (provide the ability to select all countries by providing “All” as an option) to be selected.
- Trade Flow: Import, Export, Re-export (this refers to the reporter country trade flow).
- Difference Type: Volume or value
- Request Notification: Notify me when discrepancies exceeds (textbox - percentage) and Notify me when marked changes from historical trade trends exceed (textbox - percentage)
- Having the ability to generate graphs as well as tables would be very useful.
- Functionality for the application to generate reports based on a more complex query that would allow users to request ‘notifications’ of unusual trade events or trends. For example: significant discrepancies between trade datasets, or marked changes from historical trade trends.
- Allow the user to save the query, if are updating existing query then while saving - it will show a confirmation that you are about to overwrite the query...show us how this can be shown!
- Clicking on “Run Query” will take the user to Data Comparison Details screen!

04.1 Notification/Alert Configuration Details
- Searching through the trade data from various partners, reporters, and commodities is a bit like finding a needle in a haystack.  There are huge amounts of data, so while the ability to perform manual searching is helpful -- a key feature of the application will be to search for irregularities behind the scenes to identify problems in an automated fashion.   Once problem areas have been identified users can perform manual searches to get further details.

There are two basic scenarios which we’d like to focus on initially:
 -Discrepancies between import data for a reporting country from a particular partner and export data from the same partner country (now a reporter) to the importing partner.   In other words, we’re comparing both sides of a trading partner relationship to see if they match up.  (e.g.  US as reporter importer from UK as partner compared with UK as reporter exporter to US importer).  We’ll want to create an “alert” record if there is more than a 30% difference between the import and export records for a particular commodity.  The level of threshold alert should be configurable.
- Large changes in imports or exports.  If a particular commodity has a large change in import or export levels this could be a sign that something is amiss.  Our application will monitor import and export levels over a designated time period.  If there is a 20% or more increase in a particular commodity from the previous 3 or 4 years we’ll create an alert record.   The percentage level of threshold alert should be configurable.

05 Data Comparison Details:
- We are looking for your thoughts on how the comparison data can be shown to help the user visualize the trade data and know the discrepancies between export and import between countries, For example: Imagine a user is looking at a line chart, tables, graphs, or any visuals are useful for the initial user but even more valuable as that user tries to explain the problem to others who need to act on these trends. These visualizations will highlight the differences between the import and export data for a fish species for a country would really help in understanding discrepancy. 
- In the wireframes, we have some really good ideas on how to show: 

Collaborators:
- This shows the list of users who have the ability to edit the query.
- We need a way to filter this list, think on how these can be put up! (make sure show us how the drop-down style will look like)
- For each of the collaborator, they should be able to “Edit Permission and Remove Collaborator”..think on how these can be shown? (should it be use icons…? looking forward to your ideas). Note: removal should ask for a confirmation.
- Clicking on any collaborator needs to show their profile information.

Comments:
- Users could discuss about the query.
- How the user enter his comments..what need to be shown in this view?

Activity Log:
- This shows the list of actions/changes that has been done to the query by various collaborators.
- A user will have the ability to filter through the log based on date range, show us how the date-picker need to look like?

Data Visualization description: There are many examples in the daily work of customs officials and other authorities who get involved in this type of work, such as data analysts who work for the fisheries departments or military as well as trade analysts. They would be looking for various things: unusual or unexpected changes over time or "sudden" spikes in volumes or types of products coming in or going out. This could be shown both by increases and decreases. It could signal that trade patterns (the illegal type) had changed due to various factors like enforcement pressure one place pushing trade elsewhere (known as displacement). This is a reason to also look at the activity of trading partners and neighbors or other destination markets as well as other similar species or those which could be fraudulently substituted or mislabeled. In other words, existing markets rarely dry up quickly and if there is illegal product, the methods used to get that to the buyers or processors may need to be adjusted to account for risk of detection. Those changes should be able to be detected by looking at the numbers and patterns of where things are being shipped, imported and exported. Resorting to country data in addition to the UN data may be valuable as some is uploaded more frequently than once per year.

- The application will need to be able to calculate differences of reported trade between countries. If there are multiple large discrepancies over a set time period (i.e multiple years in a decade), the application should be able to highlight or notify the user of that.
- Provide ability to export the report as a CSV, PDF or Excel.
- Allow for a user to share the data visualization with other users of the ap, click on share in wireframes to see how this works!

06 Query List:
- User will be able to view the list of queries.
- How do we need to a show a query, in wireframe it shows a small visual of the query (kind of a preview of the graph they will view), then includes the name and other informations (Last updated by, Last updated on, Created by, created on, Number of collaborators)
- Provide option for the user to Edit and delete the query (think we don’t need “View” button, probably clicking on the name should show the query details).
- Allow the user to filter these list of queries.
- User should be able to view the list of queries that they have joined as collaborators.

07 Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles: Reference 1,  Reference 2

Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)

Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers
- Paragraphs
- etc.

Stock Artwork:
- For this challenge, you can use icons from the other sources as mentioned in the stock artwork policy below!
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN

Target Audience:
- The application should be an open-access resource with key users being National Customs, Fisheries, Tax authorities and Enforcement officials; non-governmental organizations (NGOs); academics; seafood businesses; Intergovernmental organizations such as INTERPOL, UNODC, WCO and CITES.

Judging Criteria:
- Is the design styled to be appealing and desirable?
- Is the design visually resolved and does it evoke an emotional connection with the user?
- Does the design convey the function and use unambiguously and intuitively
- Does it clearly convey what the app is supposed to let you achieve / what problem it is designed to solve.
- Is the design easy to use and understand?

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.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

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.