Challenge Summary
Welcome to "Living Progress - CrowdAnalytics - Application Storyboard Design Challenge". In this challenge, we are looking for your help to create the best possible app UI/UX for analyzing civic input in crowdsourced ideation, commenting, and to help user easily analyze unstructured data in an efficient manner. In this Living Progress challenge we are looking for you to explore a new project and team collaboration site for the Crowd Analytics APP.
We want you to critically think about the problem and propose the best UI/UX solution on how content information should be displayed, arrange the best navigation structure, and how should the user moves through the site. Your designs should have a simple, modern, and responsive UI and UX to allow for the user to quickly move through the application. The goal is to keep the experience intuitive, easy to use, and above all, allow the end user to source talent more easily. As always, reach out in the forum with any questions. Good luck and looking forward to your design ideas!
02. Dashboard Screen
03. Create New Project Screen
05. Data File Dashboard
Background information
Governments across the world are increasingly applying open government practices such as crowdsourcing to develop stronger policies and to engage citizens, providing access to civic influencing beyond election cycle. When hundreds of ideas from citizens flow in, the crowdsourcers are facing a problem: Lack of efficient analysis and synthesis tools.
By using HPE big data analysis tools for natural language processing and machine learning, "Civic CrowdAnalytics" tools automates the analysis and synthesis of crowdsourced civic input. Citizens input will be used more efficiently in crowdsourced policymaking, when governments and NGOs have a reliable and efficient analysis tool for to use. Thousands of ideas will be refined very efficiently to an executive summary and compelling visualizations.
"Civic CrowdAnalytics" application will solve the problem, and thus we will take steps towards a more participatory, inclusive and transparent democratic society, making sure that every citizen has an equal opportunity to get their voices heard.
Challenge Goals
- Develop a collaborative data analytics tool that allows users to import analyze and collaborate on data projects.
- Create a tool that provides transparency to data analytics by showing the parameters that are used in the analysis, and the data will be public too. Therefore potential data manipulation can be detected more easily.
- Develop a web application which allows users to search and analyze crowdsourced civic ideas and comments for public policies
Focus Area:
Civic participation, Governance, Participatory democracy, Policymaking, Data analysis, Education.
Key Features:
Must Have Features
- Categorizing data by identifying keywords
- Categorizing data by identifying semantic entities
- Categorizing data by detecting relationships in expressions
- Analyzing data by detecting sentiments (positive/negative)
- Identifying patterns and outliers in the data
Nice to Have Features
- API integration with output sharing apps such as SlideShare and storing apps like Dropbox and Box
- More advanced data analytics features, e.g. analytics recommendations, in the line of: "Try adding these variables to analysis", giving users, agency to work with analytics
Use Cases:
- Use Case 1: As a city staff member, I want to analyze a crowdsourced dataset and produce a report about the civic input from the last two weeks;
- Use Case 2: As a city staff member, I want to import the data in an csv format from crowdsourcing platform.
- Use Case 3: As a city staff member, I want to choose parameters with which to analyze the data. The parameters include: idea categories, frequency of occurrence of ideas, and the sentiment of feedback (positive/negative) in comments.
- Use Case 4: As a city staff member, I want to see the breakdown of the analysis in a simple summarized format. The summary tells me e.g. the number of ideas in each category (the categories can be for instance: public transit, private transit, infrastructure), idea clusters that are closely related to each other, and the sentiment (positive/negative) about the ideas.
- System Use Case: Content categorization will be done by using content and entity extraction through HPE Haven OnDemand APIs. Starting with supervised machine learning, the algorithms will be trained to fit to datasets in civic crowdsourcing. When the analysis reaches a good reliability level, the analysis proceeds to unsupervised machine learning, based on the patterns detected in the first step. The data analysis will be powered by HPE Vertica and IDOL, ensuring the scalability of the analysis and stellar visual outputs. It also enables integrations with other analysis tools such as R, which can be useful in the data analysis.
- System Use Case: System will analyze and display association relationships between words in the crowd-sourced entries.
Screen Requirements:
01. Homepage Screen
- Default screen that user will see every time they open the site.
- Consider what a new user experience is like for a first time visitor to this site. This initial landing page should serve as a one page overview/ onboarding experience that familiarizes the user with what Crowd Analytics can do as well as how the user can start creating projects and assigning team members to start working with Crowd Analytics.
- Consider this example of the type of landing page we are looking to design for.
- This will be more of a "Welcome" page introducing a user to Crowd Analytics and providing an overview as to what Crowd Analytics does and how a user can get started with projects using Crowd Analytics. Consider having areas for screenshots of Crowd Analytics, feature descriptions, benefits, and reasons why a user would use Crowd Analytics.
- Perhaps consider showing a "getting started" guide that walks a user thru creating a project and getting started with Crowd Analytics.
- Other items to consider would be any new features or updates for Crowd Analytics that could be updated on this overview landing page
- Review the background information on Crowd Analytics and provide some concepts on how to display this page for a new user and consider how to guide the user along in starting a project and using Crowd Analytics.
- Should show and explain the different types of data visualization offered in the Crowd Analytics site. ( Categorization, Common Entities, Heat Map, Sentiment Analysis, Cluster Map, Associations, Tables, Category Drill Downs)
02. Dashboard Screen
- Once a user has a good understanding of what they can do with Crowd Analytics and has started projects and has assigned team members, the default view for the return user will be a personalized palette containing quick links to their projects, data sets, artifacts, and team collaboration from working with Crowd Analytics. We would like to see 2 different states of this User dashboard:
First Time User Dashboard
- Consider what this dashboard would look like for a first time user who DOES NOT have any projects running with Crowd Analytics. Show a version of the User Home Page with a tile, button, or other call to action that would get the new user to start a new project and add it to their palette. See "Creating a New Project Screen" requirement below for form field details.
Returning User Dashboard
- We want to explore how this page should be appear for user that has a number of projects underway with Crowd Analytics and their palette should focus mainly on access to the projects. It should be a dashboard interface containing list of projects, team members, notifications, messages, and associated data sets.
Other items to consider for the Home Page experience design:
- Ability to add a new project.
- Remove News and updates stream box from right side of screen.
- Remove Team Comments,
- Remove Latest News and Updates box from right side of screen.
- Remove "alerts" from Top Nav.
- A Project list with high level details about the project
-- A project has metadata: The name of the project and other attributes.
-- Team members on the project
-- Data Sets/ associated artifacts
-- Should display Created Date and Last Modified Date of project.
03. Create New Project Screen
- From the project section on the dashboard a user has the ability to create a new project. This will launch a flow where a user will fill out a form with the following information for creating a project within Crowd Analytics.
- Here are the necessary fields for add a new project:
Project
-- Name
-- Description
-- Project owner
-- Remove Start Date field. We’re going to make this field system generated.
- Upon new project creation, user will be asked to choose a data set up upload to the project
Input File Definition
-- After uploading a data set, the users will need to define the format and field types in the file.
-- For example, the data type (String, Numeric) of each field.
-- Also the users should define whether a particular column is text to be analyzed/categorized or whether the input is a category or something else...an ID or other numeric value for example.
-- User's need to designate whether a file is test or training data set as well.
04. Project Details Screen
- Please change all references to Project Start date to “Created Date”.
- Please add a “Last Modified Date” field to the interface.
- Remove alerts functionality from this screen.
05. Data File Dashboard (not found in current wireframes)
- Each data file will have a dashboard which summarizes various kinds of analysis which can be performed upon it.
- The most important screen in the application.
- Reference "crowd_analytics_dashboard.png" and Project Details in the wireframes.
- We've provided an example of the different types of data visualizations that are represented in our application. (crowd_analytics_dashboard.png). Please use this as a reference to how the visualizations should function. It is up to you to work them into your design concept. Please improve upon and provide a design for how these visualizations should look and feel.
- The working versions of the visualizations can be found at the following links below. They just use sample data. CrowdAnalytics has purchased all of the following submissions so you have some flexibility:
-- 1st Place (overall look and feel): http://54.200.157.201:10002/
-- 2nd Place: http://54.200.157.201:9002 The CA team like the Sentiment Analysis Graph here.
-- 3rd Place: http://54.200.157.201:9001. The CA team like the node based approach for related concepts.
-- Additional Purchase: http://54.200.157.201:9006 The sentiment analysis graphic is well thought out here.
- This will serve as a landing page for a project that will contain a list of data sets associated for the project, the data set artifacts (analysis documents, visualizations, groupings, and other assets created within Crowd Analytics) team members, and messages, notifications for the project level.
- There are several actions that they can choose each of which are associated with a particular data file. Users cannot perform these actions if they haven't defined metadata for the input files. The actions are:
-- Category Summary
-- Concepts Extraction
-- Sentiment Analysis
-- Association Analysis/Find Similar Doc
1. Category Summary (PaloAltoPivot.xlsx - Summary tab) - This is simply a pivot table of the category assignments for a particular data set, but this does give a helpful overview and provide some basic context for the submitted content. We also need some link so it can displayed information in the bar graphs to the spreadsheet shown below. So that when you are clicking on ‘Public Transit’, for instance, the relevant categories would be highlighted in the spreadsheet that is below
2. Sentiment Analysis (Sentiment Analysis Sample.xlsx) - This is fairly straightforward. In content column we have the content to be analyzed following by the aggregate sentiment: Positive, Neutral, or Negative. The next column, details, indicate the keywords that indicate sentiment, and finally score which describes the degree or positive or negative sentiment. Positive sentiment values will be positive and negative comments will have negative scores. Neutral comments will be zero. It should be clear on the display about what is positive, what is negative, what is neutral, and the color code needs to be clear: from green to red, for instance, and neutral should have a color too.
3. Concept Extraction (Concept Extraction Sample.xlsx) - This document lists an aggregate of the main concepts found in a particular data set. The two columns are the concepts found and the number of occurrences for each concept in the data set file.
4. Find Similar Documents (Find Similar Documents Sample 1.txt and Find Similar Documents Sample 2.txt) sample documents are JSON responses. By loading all the documents into a Haven OnDemand Text Index you can group a set of entries conceptually. Each of the sample files displays the following information related to each similar entry:
reference number -- the id to other documents in the index.
weight - the strength of the relationship between docs
links - an array of the words or conceptual word roots that relate the docs.
- The chart creation is very important here, each chart components should be reasonably coherent/compatible.
- Clicking on one of the 4 actions above will give user ability to see more data details, opening a subdirectory under the project which takes the name of the data file followed by the Action Name. Each of the actions generates reports/output files which will be contained in the folders. A sample name for one of these subfolders might be "Palo Alto Data Set - Analyze Sentiments".
- Projects folders and subfolders may be shared between users.
- The project details screen should also support the following functions:
-- Ability to edit/ rename/ and delete data sets.
-- Ability to add a new data set (a data set is just a file)
-- Adding a new data set would prompt the user to upload a new data set
- Artifacts such as reports and visualizations will be generated as users execute the various analysis functions. The app should record basic details about the files generated:
-- File Name
-- Date Created
-- Created By
-- Description
Documentation :
- Winning Wireframes
- Visualization Screenshot
- Sample Mood Board to inspire you
Design Direction:
- Branding/ UI Guidelines from client
- Font, Colors, Style
- Moodboard
Screen Size:
Your designs should walk across desktop and mobile devices. However, we are just focusing on Desktop for now.
Desktop : min 1280px width x height can expand based on content
Target Audience:
There are two primary user group that will use this applications:
- Policy makers involved in open policy making (civil servants, government and city staff members, politicians (elected representatives), NGOs using crowdsourcing)
- Citizens who want to analyze the crowd's input in a policy process they are interested in.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience
- How well you interpret the example screens and show us new ideas and concepts
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.
We want you to critically think about the problem and propose the best UI/UX solution on how content information should be displayed, arrange the best navigation structure, and how should the user moves through the site. Your designs should have a simple, modern, and responsive UI and UX to allow for the user to quickly move through the application. The goal is to keep the experience intuitive, easy to use, and above all, allow the end user to source talent more easily. As always, reach out in the forum with any questions. Good luck and looking forward to your design ideas!
Round 1
Your initial design submission for client review02. Dashboard Screen
03. Create New Project Screen
05. Data File Dashboard
Round 2
All requirements as stated in challenge details with client feedback applied
01. Homepage Screen
02. Dashboard Screen
03. Create New Project Screen
04. Project Details Screen
05. Data File Dashboard
Background information
Governments across the world are increasingly applying open government practices such as crowdsourcing to develop stronger policies and to engage citizens, providing access to civic influencing beyond election cycle. When hundreds of ideas from citizens flow in, the crowdsourcers are facing a problem: Lack of efficient analysis and synthesis tools.
By using HPE big data analysis tools for natural language processing and machine learning, "Civic CrowdAnalytics" tools automates the analysis and synthesis of crowdsourced civic input. Citizens input will be used more efficiently in crowdsourced policymaking, when governments and NGOs have a reliable and efficient analysis tool for to use. Thousands of ideas will be refined very efficiently to an executive summary and compelling visualizations.
"Civic CrowdAnalytics" application will solve the problem, and thus we will take steps towards a more participatory, inclusive and transparent democratic society, making sure that every citizen has an equal opportunity to get their voices heard.
Challenge Goals
- Develop a collaborative data analytics tool that allows users to import analyze and collaborate on data projects.
- Create a tool that provides transparency to data analytics by showing the parameters that are used in the analysis, and the data will be public too. Therefore potential data manipulation can be detected more easily.
- Develop a web application which allows users to search and analyze crowdsourced civic ideas and comments for public policies
Focus Area:
Civic participation, Governance, Participatory democracy, Policymaking, Data analysis, Education.
Key Features:
Must Have Features
- Categorizing data by identifying keywords
- Categorizing data by identifying semantic entities
- Categorizing data by detecting relationships in expressions
- Analyzing data by detecting sentiments (positive/negative)
- Identifying patterns and outliers in the data
Nice to Have Features
- API integration with output sharing apps such as SlideShare and storing apps like Dropbox and Box
- More advanced data analytics features, e.g. analytics recommendations, in the line of: "Try adding these variables to analysis", giving users, agency to work with analytics
Use Cases:
- Use Case 1: As a city staff member, I want to analyze a crowdsourced dataset and produce a report about the civic input from the last two weeks;
- Use Case 2: As a city staff member, I want to import the data in an csv format from crowdsourcing platform.
- Use Case 3: As a city staff member, I want to choose parameters with which to analyze the data. The parameters include: idea categories, frequency of occurrence of ideas, and the sentiment of feedback (positive/negative) in comments.
- Use Case 4: As a city staff member, I want to see the breakdown of the analysis in a simple summarized format. The summary tells me e.g. the number of ideas in each category (the categories can be for instance: public transit, private transit, infrastructure), idea clusters that are closely related to each other, and the sentiment (positive/negative) about the ideas.
- System Use Case: Content categorization will be done by using content and entity extraction through HPE Haven OnDemand APIs. Starting with supervised machine learning, the algorithms will be trained to fit to datasets in civic crowdsourcing. When the analysis reaches a good reliability level, the analysis proceeds to unsupervised machine learning, based on the patterns detected in the first step. The data analysis will be powered by HPE Vertica and IDOL, ensuring the scalability of the analysis and stellar visual outputs. It also enables integrations with other analysis tools such as R, which can be useful in the data analysis.
- System Use Case: System will analyze and display association relationships between words in the crowd-sourced entries.
Screen Requirements:
01. Homepage Screen
- Default screen that user will see every time they open the site.
- Consider what a new user experience is like for a first time visitor to this site. This initial landing page should serve as a one page overview/ onboarding experience that familiarizes the user with what Crowd Analytics can do as well as how the user can start creating projects and assigning team members to start working with Crowd Analytics.
- Consider this example of the type of landing page we are looking to design for.
- This will be more of a "Welcome" page introducing a user to Crowd Analytics and providing an overview as to what Crowd Analytics does and how a user can get started with projects using Crowd Analytics. Consider having areas for screenshots of Crowd Analytics, feature descriptions, benefits, and reasons why a user would use Crowd Analytics.
- Perhaps consider showing a "getting started" guide that walks a user thru creating a project and getting started with Crowd Analytics.
- Other items to consider would be any new features or updates for Crowd Analytics that could be updated on this overview landing page
- Review the background information on Crowd Analytics and provide some concepts on how to display this page for a new user and consider how to guide the user along in starting a project and using Crowd Analytics.
- Should show and explain the different types of data visualization offered in the Crowd Analytics site. ( Categorization, Common Entities, Heat Map, Sentiment Analysis, Cluster Map, Associations, Tables, Category Drill Downs)
02. Dashboard Screen
- Once a user has a good understanding of what they can do with Crowd Analytics and has started projects and has assigned team members, the default view for the return user will be a personalized palette containing quick links to their projects, data sets, artifacts, and team collaboration from working with Crowd Analytics. We would like to see 2 different states of this User dashboard:
First Time User Dashboard
- Consider what this dashboard would look like for a first time user who DOES NOT have any projects running with Crowd Analytics. Show a version of the User Home Page with a tile, button, or other call to action that would get the new user to start a new project and add it to their palette. See "Creating a New Project Screen" requirement below for form field details.
Returning User Dashboard
- We want to explore how this page should be appear for user that has a number of projects underway with Crowd Analytics and their palette should focus mainly on access to the projects. It should be a dashboard interface containing list of projects, team members, notifications, messages, and associated data sets.
Other items to consider for the Home Page experience design:
- Ability to add a new project.
- Remove News and updates stream box from right side of screen.
- Remove Team Comments,
- Remove Latest News and Updates box from right side of screen.
- Remove "alerts" from Top Nav.
- A Project list with high level details about the project
-- A project has metadata: The name of the project and other attributes.
-- Team members on the project
-- Data Sets/ associated artifacts
-- Should display Created Date and Last Modified Date of project.
03. Create New Project Screen
- From the project section on the dashboard a user has the ability to create a new project. This will launch a flow where a user will fill out a form with the following information for creating a project within Crowd Analytics.
- Here are the necessary fields for add a new project:
Project
-- Name
-- Description
-- Project owner
-- Remove Start Date field. We’re going to make this field system generated.
- Upon new project creation, user will be asked to choose a data set up upload to the project
Input File Definition
-- After uploading a data set, the users will need to define the format and field types in the file.
-- For example, the data type (String, Numeric) of each field.
-- Also the users should define whether a particular column is text to be analyzed/categorized or whether the input is a category or something else...an ID or other numeric value for example.
-- User's need to designate whether a file is test or training data set as well.
04. Project Details Screen
- Please change all references to Project Start date to “Created Date”.
- Please add a “Last Modified Date” field to the interface.
- Remove alerts functionality from this screen.
05. Data File Dashboard (not found in current wireframes)
- Each data file will have a dashboard which summarizes various kinds of analysis which can be performed upon it.
- The most important screen in the application.
- Reference "crowd_analytics_dashboard.png" and Project Details in the wireframes.
- We've provided an example of the different types of data visualizations that are represented in our application. (crowd_analytics_dashboard.png). Please use this as a reference to how the visualizations should function. It is up to you to work them into your design concept. Please improve upon and provide a design for how these visualizations should look and feel.
- The working versions of the visualizations can be found at the following links below. They just use sample data. CrowdAnalytics has purchased all of the following submissions so you have some flexibility:
-- 1st Place (overall look and feel): http://54.200.157.201:10002/
-- 2nd Place: http://54.200.157.201:9002 The CA team like the Sentiment Analysis Graph here.
-- 3rd Place: http://54.200.157.201:9001. The CA team like the node based approach for related concepts.
-- Additional Purchase: http://54.200.157.201:9006 The sentiment analysis graphic is well thought out here.
- This will serve as a landing page for a project that will contain a list of data sets associated for the project, the data set artifacts (analysis documents, visualizations, groupings, and other assets created within Crowd Analytics) team members, and messages, notifications for the project level.
- There are several actions that they can choose each of which are associated with a particular data file. Users cannot perform these actions if they haven't defined metadata for the input files. The actions are:
-- Category Summary
-- Concepts Extraction
-- Sentiment Analysis
-- Association Analysis/Find Similar Doc
1. Category Summary (PaloAltoPivot.xlsx - Summary tab) - This is simply a pivot table of the category assignments for a particular data set, but this does give a helpful overview and provide some basic context for the submitted content. We also need some link so it can displayed information in the bar graphs to the spreadsheet shown below. So that when you are clicking on ‘Public Transit’, for instance, the relevant categories would be highlighted in the spreadsheet that is below
2. Sentiment Analysis (Sentiment Analysis Sample.xlsx) - This is fairly straightforward. In content column we have the content to be analyzed following by the aggregate sentiment: Positive, Neutral, or Negative. The next column, details, indicate the keywords that indicate sentiment, and finally score which describes the degree or positive or negative sentiment. Positive sentiment values will be positive and negative comments will have negative scores. Neutral comments will be zero. It should be clear on the display about what is positive, what is negative, what is neutral, and the color code needs to be clear: from green to red, for instance, and neutral should have a color too.
3. Concept Extraction (Concept Extraction Sample.xlsx) - This document lists an aggregate of the main concepts found in a particular data set. The two columns are the concepts found and the number of occurrences for each concept in the data set file.
4. Find Similar Documents (Find Similar Documents Sample 1.txt and Find Similar Documents Sample 2.txt) sample documents are JSON responses. By loading all the documents into a Haven OnDemand Text Index you can group a set of entries conceptually. Each of the sample files displays the following information related to each similar entry:
reference number -- the id to other documents in the index.
weight - the strength of the relationship between docs
links - an array of the words or conceptual word roots that relate the docs.
- The chart creation is very important here, each chart components should be reasonably coherent/compatible.
- Clicking on one of the 4 actions above will give user ability to see more data details, opening a subdirectory under the project which takes the name of the data file followed by the Action Name. Each of the actions generates reports/output files which will be contained in the folders. A sample name for one of these subfolders might be "Palo Alto Data Set - Analyze Sentiments".
- Projects folders and subfolders may be shared between users.
- The project details screen should also support the following functions:
-- Ability to edit/ rename/ and delete data sets.
-- Ability to add a new data set (a data set is just a file)
-- Adding a new data set would prompt the user to upload a new data set
- Artifacts such as reports and visualizations will be generated as users execute the various analysis functions. The app should record basic details about the files generated:
-- File Name
-- Date Created
-- Created By
-- Description
Documentation :
- Winning Wireframes
- Visualization Screenshot
- Sample Mood Board to inspire you
Design Direction:
- Branding/ UI Guidelines from client
- Font, Colors, Style
- Moodboard
Screen Size:
Your designs should walk across desktop and mobile devices. However, we are just focusing on Desktop for now.
Desktop : min 1280px width x height can expand based on content
Target Audience:
There are two primary user group that will use this applications:
- Policy makers involved in open policy making (civil servants, government and city staff members, politicians (elected representatives), NGOs using crowdsourcing)
- Citizens who want to analyze the crowd's input in a policy process they are interested in.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience
- How well you interpret the example screens and show us new ideas and concepts
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.
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.