Challenge Summary
Welcome to Living Progress - World Wildlife Fund - Design Updates Challenge
This challenge is part of the HPE Living Progress Challenge Blitz Series. Competitors who win challenges in this series will compete in a leaderboard and earn points towards additional cash prizes.
This is a follow-up challenge, this time we need you to continue create some missing screens by following completed storyboard style, wireframe layout and specification below. In the end of this challenge, your submissions need appear as single set of storyboard design.
Basically you need re-use existing storyboard design from previous challenge, and create some new screens based on wireframe and specification below.
Pay attention to challenge requirements. And let us know if you have some questions
1). Data Comparison Details - Partner Country Tab
2). Case Studies
3). Case Studies Details
4). Tips & Best Practices
5). News
6). Species Database
7). Species Details
- Compress all images and source files. Keep your submission size compact!
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
1). Data Comparison Details - Partner Country Tab
2). Data Comparison Details - Reporter Country Report
3). Data Comparison Details - Product Report
4). Case Studies
5). Case Studies Details
6). Tips & Best Practices
7). Tips & Best Practices Details
8). News
9). News Details
10). Species Database
11). Species Details
- Compress all images and source files. Keep your submission size compact!
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03)
Design 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).
General Requirements
- This application is going to be a responsive web application. Keep this in mind in your approach.
- Wireframe is just initial layout, for this storyboard challenge, please suggest any best practice design features
- You must follow/re-use completed storyboard. In the end of this challenge, Design screen from this challenge must appear as one set of storyboard.
- Design Guidelines as Reference: Mood Board
- Refer 07 - Style Tile.jpg to make sure your existing UI element design that you can re-use
- Color Theme: Stick with provided storyboard
- Fonts: Stick with provided storyboard
- Required Screen Size: Desktop Standard Size (1280px x Height up to your design)
Challenge Downloadable
https://drive.google.com/folderview?id=0B31nrwic_6z0Z0RtSWlIOGhnWkE&usp=sharing
Wireframe.zip - Wireframe Layout
Storyboard.zip - Storyboard as Base Design Updates
Submission Requirements
For this challenge you need build Living Progress - World Wildlife Fund storyboard screens for the following features and roles based on our completed wireframe (wireframe.zip).
1). Data Comparison Details - Partner Country Tab
- User landed on this tab from Data Comparison Details then go to Partner Country Tab
- Right Sidebar need consistent like on storyboard
- Tab contains these following sub tab:
Chart View
- Build chart look based on wireframe
- Comments area placed on the bottom
Map View
- Re-use consistent map element
Table View
- Match table like wireframe content
2). Data Comparison Details - Reporter Country Report
- User landed on this tab from Data Comparison Details then go to Reporter Country Report Tab
- Right Sidebar need consistent like on storyboard
- Tab contains these following sub tab:
Chart View
- Build chart look based on wireframe
- Comments area placed on the bottom
Map View
- Re-use consistent map element
Table View
- Match table like wireframe content
3). Data Comparison Details - Product Report
- User landed on this tab from Data Comparison Details then go to Product Report Tab
- Right Sidebar need consistent like on storyboard
- Tab contains these following sub tab:
Chart View
- Build chart look based on wireframe
- Comments area placed on the bottom
Map View
- Re-use consistent map element
Table View
- Match table like wireframe content
4). Case Studies
- Make sure you highlight top navigation for Case Studies
- This shows the list of case-studies, featured case-studies, etc
- Match 2 columns layout
- We need a way to filter this list.
- Suggest design how datepicker look for Date Published
- Clicking on a case-study takes the user to case-study details page.
5). Case Studies Details
- How do you think this page need to be displayed? Looking for your thoughts to make this page interesting and should be clear enough for the user to understand it.
- Match Case Study information below the title
- User should be able to rate a case-study, print and download it!
- On top of case details should place image/video. How they should look?
- User need able to comment
- Display comment list on the bottom
- On the right side, display some related case studies
6). Tips & Best Practices
- Make sure you highlight top navigation for Tips and Best Practics
- Not everyone who uses this application will know the ins and outs of how to look at and analyze the data. We’ll provide a section of the app that will contain insight and a knowledge base that our app users can draw upon to help them maximize the benefit of using this application
- This section will also contain case studies and success stories detailing how users have utilized this application to find illegal activity and the result/ impact of this is
- Display content as separated rows
- Featured Tips placed on the right side
- Create separated screen when user expand the Filter
7). Tips & Best Practices Details
- This is basically use same layout like Case Studies Details
- Match content like wireframe
8). News
- This need to show the list of news, come up with a layout for this!
- We need a way to filter this list.
- Should also show the featured news items
- Clicking on a news item will take the user to news details view..
9). News Details
- This is basically use same layout like Case Studies Details
- Match content like wireframe
10). Species Database
- Make sure this screen stand up
- This screen shows the list of species, how do you think these can be shown?
- We need a way to filter this Species of Database.
11). Species Details
- This shows the details of the species
- Details will include some photos/images, Names, HTS Codes, specific information.
- There’s map to indicate the Habitats and Markets
- More detail Species Information displayed on the bottom
- This screen should allow the user to Print and download the details.
- Related News & Case Studies placed on the right side
Target User
- 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
- Consistency with existing Storyboard design
- Cleanliness of your graphics and design.
- 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 image files based on Challenge submission requirements stated above.
Source Files
All source files of all graphics created in Adobe Photoshop and saved as editable layer and text.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
This challenge is part of the HPE Living Progress Challenge Blitz Series. Competitors who win challenges in this series will compete in a leaderboard and earn points towards additional cash prizes.
This is a follow-up challenge, this time we need you to continue create some missing screens by following completed storyboard style, wireframe layout and specification below. In the end of this challenge, your submissions need appear as single set of storyboard design.
Basically you need re-use existing storyboard design from previous challenge, and create some new screens based on wireframe and specification below.
Pay attention to challenge requirements. And let us know if you have some questions
Round 1
Initial Living Progress - World Wildlife Fund - Design Updates for these following screens on required sizes below on Desktop Size:1). Data Comparison Details - Partner Country Tab
2). Case Studies
3). Case Studies Details
4). Tips & Best Practices
5). News
6). Species Database
7). Species Details
- Compress all images and source files. Keep your submission size compact!
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
Round 2
Final Living Progress - World Wildlife Fund - Design Updates combined with Checkpoint Feedback for these following screens on Desktop Size:1). Data Comparison Details - Partner Country Tab
2). Data Comparison Details - Reporter Country Report
3). Data Comparison Details - Product Report
4). Case Studies
5). Case Studies Details
6). Tips & Best Practices
7). Tips & Best Practices Details
8). News
9). News Details
10). Species Database
11). Species Details
- Compress all images and source files. Keep your submission size compact!
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03)
Design 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).
General Requirements
- This application is going to be a responsive web application. Keep this in mind in your approach.
- Wireframe is just initial layout, for this storyboard challenge, please suggest any best practice design features
- You must follow/re-use completed storyboard. In the end of this challenge, Design screen from this challenge must appear as one set of storyboard.
- Design Guidelines as Reference: Mood Board
- Refer 07 - Style Tile.jpg to make sure your existing UI element design that you can re-use
- Color Theme: Stick with provided storyboard
- Fonts: Stick with provided storyboard
- Required Screen Size: Desktop Standard Size (1280px x Height up to your design)
Challenge Downloadable
https://drive.google.com/folderview?id=0B31nrwic_6z0Z0RtSWlIOGhnWkE&usp=sharing
Wireframe.zip - Wireframe Layout
Storyboard.zip - Storyboard as Base Design Updates
Submission Requirements
For this challenge you need build Living Progress - World Wildlife Fund storyboard screens for the following features and roles based on our completed wireframe (wireframe.zip).
1). Data Comparison Details - Partner Country Tab
- User landed on this tab from Data Comparison Details then go to Partner Country Tab
- Right Sidebar need consistent like on storyboard
- Tab contains these following sub tab:
Chart View
- Build chart look based on wireframe
- Comments area placed on the bottom
Map View
- Re-use consistent map element
Table View
- Match table like wireframe content
2). Data Comparison Details - Reporter Country Report
- User landed on this tab from Data Comparison Details then go to Reporter Country Report Tab
- Right Sidebar need consistent like on storyboard
- Tab contains these following sub tab:
Chart View
- Build chart look based on wireframe
- Comments area placed on the bottom
Map View
- Re-use consistent map element
Table View
- Match table like wireframe content
3). Data Comparison Details - Product Report
- User landed on this tab from Data Comparison Details then go to Product Report Tab
- Right Sidebar need consistent like on storyboard
- Tab contains these following sub tab:
Chart View
- Build chart look based on wireframe
- Comments area placed on the bottom
Map View
- Re-use consistent map element
Table View
- Match table like wireframe content
4). Case Studies
- Make sure you highlight top navigation for Case Studies
- This shows the list of case-studies, featured case-studies, etc
- Match 2 columns layout
- We need a way to filter this list.
- Suggest design how datepicker look for Date Published
- Clicking on a case-study takes the user to case-study details page.
5). Case Studies Details
- How do you think this page need to be displayed? Looking for your thoughts to make this page interesting and should be clear enough for the user to understand it.
- Match Case Study information below the title
- User should be able to rate a case-study, print and download it!
- On top of case details should place image/video. How they should look?
- User need able to comment
- Display comment list on the bottom
- On the right side, display some related case studies
6). Tips & Best Practices
- Make sure you highlight top navigation for Tips and Best Practics
- Not everyone who uses this application will know the ins and outs of how to look at and analyze the data. We’ll provide a section of the app that will contain insight and a knowledge base that our app users can draw upon to help them maximize the benefit of using this application
- This section will also contain case studies and success stories detailing how users have utilized this application to find illegal activity and the result/ impact of this is
- Display content as separated rows
- Featured Tips placed on the right side
- Create separated screen when user expand the Filter
7). Tips & Best Practices Details
- This is basically use same layout like Case Studies Details
- Match content like wireframe
8). News
- This need to show the list of news, come up with a layout for this!
- We need a way to filter this list.
- Should also show the featured news items
- Clicking on a news item will take the user to news details view..
9). News Details
- This is basically use same layout like Case Studies Details
- Match content like wireframe
10). Species Database
- Make sure this screen stand up
- This screen shows the list of species, how do you think these can be shown?
- We need a way to filter this Species of Database.
11). Species Details
- This shows the details of the species
- Details will include some photos/images, Names, HTS Codes, specific information.
- There’s map to indicate the Habitats and Markets
- More detail Species Information displayed on the bottom
- This screen should allow the user to Print and download the details.
- Related News & Case Studies placed on the right side
Target User
- 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
- Consistency with existing Storyboard design
- Cleanliness of your graphics and design.
- 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 image files based on Challenge submission requirements stated above.
Source Files
All source files of all graphics created in Adobe Photoshop and saved as editable layer and text.
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.