Challenge Summary
Welcome to DDP Social Analytics 1-Page Dashboard Concept Design Challenge
For this challenge we need you to explore, think and create concept design of 1(One) Dashboard page to provide analysis of social media interactions of the company brand with end consumers. The insights can be furthered sliced and diced using any of the some functionalities explained more details below. Remember your submission design for this challenge need have 2 version for Dark & Light Theme
Read more details information on challenge specification. Let’s discuss any questions you have!
Also Styleguide screen that will explains your design elements
General Requirements
For this challenge, we are focused on innovative visuals, and possibly make user interaction with the Company Social Analytics 1-Page Dashboard very pleasing.
Chart Design Guidelines
- We will use D3JS to build the chart for this application: https://d3js.org/
- Suggest any chart styling for all required pages. Here are some reference of D3JS charts examples:
-- https://github.com/d3/d3/wiki/gallery
-- https://bl.ocks.org/mbostock
- Suggest the best and possible chart or visualization for the dashboard
- You may use custom styling for the chart, but make sure its possible to build with D3JS
- Please put url example of chart used on your design submission.
DDP Store Social Analytics Dashboard Functionalities
1). General
- Please put logo placeholder and title on your design page.
- This dashboard will use world map to display the social engagement related to selected entity/organization
- There should be a way/option to change a company to view its social engagement analysis around the world.
- For this challenge, you need create Dark & Light theme of your design submission
- Below are the required functionalities needed for this dashboard design:
2). Map:
- Location distribution of the most socially present users along with social ids.
- We will use OpenstreetMap to build the map on dashboard: https://www.openstreetmap.org/#map=5/-2.546/118.016
- Refer to this website for some options of Map styling:
-- https://openmaptiles.org/styles/
-- https://userstyles.org/styles/browse/openstreetmap
- Need clear design to explain location on the map with high and low density of Social Analytics
3). Sentiment:
- Distribution of interactions between positive, negative and neutral sentiments.
- You can use different color set to indicate the sentiment differences
- Create clear design to explains about the positive, negative and neutral sentiments on map.
4). Emotions:
- Significant emotions expressed by the users. This may be depicted in the form of keywords.
- You can use different sentiment color set for the keywords
- Keyword examples: congrats, great, happy, like, crazy, better, boycott, efficiency, action, thanks, action, awesome, bad, love, suck, help, recommended, worse, etc.
5). Topics:
- The interactions are classified into industry specific Topics.
- Here are some Topics sample data: Perception, Commendation, Features, Perception, Apple, Software, Purchase, iPhone, Software, Mobile App, Perception, etc.
- You might need add percentage for each captured topic
6). Gender:
- Distribution of sentiments by gender.
- Gender values are Male & Female
- Maybe we need some way to toggle these Male and Female options?
7). Data Source:
- Distribution of interactions between Facebook, Twitter & LinkedIn
8). Timeline:
- Distribution of sentiments and interaction volumes over time. Spikes usually correspond to campaigns and viral posts.
- Need display a horizontal line threshold for average number of mentions
- Need display a vertical line threshold to indicate current selected date/time
- Need some way to see timeline monthly, weekly, and daily
- User need able to drag the timeline and change the map based on selected timeline
9). Styleguide Screen
- As part of this challenge, you need create a separate styleguide screen that will explains your design elements for:
-- Colors
-- Fonts
-- Layout
-- Interactions
-- Anything else?
- Check this website for Styleguide Reference: https://speckyboy.com/inspirational-examples-ui-style-guides/
Design Submission Formats:
a). Screen Sizes:
- Desktop Screen Size: 1280px(w) × 720px(h)
b). Design theme, colors, typography.
- Design Theme: Clean, Professional and Creative design.
- Color palette is up to designer
- Fonts is up to designer
c). Submission Design Presentation
- As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your submission notes
Target User
- Internal Users
Judging Criteria
- How well you create Company Social Engagement Dashboard Design!
- Cleanliness of your graphics and design.
- User Experience.
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/Sketch and saved as 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.
For this challenge we need you to explore, think and create concept design of 1(One) Dashboard page to provide analysis of social media interactions of the company brand with end consumers. The insights can be furthered sliced and diced using any of the some functionalities explained more details below. Remember your submission design for this challenge need have 2 version for Dark & Light Theme
Read more details information on challenge specification. Let’s discuss any questions you have!
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.
Round 1
Initial DDP Social Analytics 1-Page Dashboard on Desktop screen size on Dark & Light ThemeRound 2
Final DDP Social Analytics 1-Page Dashboard on Desktop screen size combined with Checkpoint Feedback on Dark & Light ThemeAlso Styleguide screen that will explains your design elements
General Requirements
For this challenge, we are focused on innovative visuals, and possibly make user interaction with the Company Social Analytics 1-Page Dashboard very pleasing.
Chart Design Guidelines
- We will use D3JS to build the chart for this application: https://d3js.org/
- Suggest any chart styling for all required pages. Here are some reference of D3JS charts examples:
-- https://github.com/d3/d3/wiki/gallery
-- https://bl.ocks.org/mbostock
- Suggest the best and possible chart or visualization for the dashboard
- You may use custom styling for the chart, but make sure its possible to build with D3JS
- Please put url example of chart used on your design submission.
DDP Store Social Analytics Dashboard Functionalities
1). General
- Please put logo placeholder and title on your design page.
- This dashboard will use world map to display the social engagement related to selected entity/organization
- There should be a way/option to change a company to view its social engagement analysis around the world.
- For this challenge, you need create Dark & Light theme of your design submission
- Below are the required functionalities needed for this dashboard design:
2). Map:
- Location distribution of the most socially present users along with social ids.
- We will use OpenstreetMap to build the map on dashboard: https://www.openstreetmap.org/#map=5/-2.546/118.016
- Refer to this website for some options of Map styling:
-- https://openmaptiles.org/styles/
-- https://userstyles.org/styles/browse/openstreetmap
- Need clear design to explain location on the map with high and low density of Social Analytics
3). Sentiment:
- Distribution of interactions between positive, negative and neutral sentiments.
- You can use different color set to indicate the sentiment differences
- Create clear design to explains about the positive, negative and neutral sentiments on map.
4). Emotions:
- Significant emotions expressed by the users. This may be depicted in the form of keywords.
- You can use different sentiment color set for the keywords
- Keyword examples: congrats, great, happy, like, crazy, better, boycott, efficiency, action, thanks, action, awesome, bad, love, suck, help, recommended, worse, etc.
5). Topics:
- The interactions are classified into industry specific Topics.
- Here are some Topics sample data: Perception, Commendation, Features, Perception, Apple, Software, Purchase, iPhone, Software, Mobile App, Perception, etc.
- You might need add percentage for each captured topic
6). Gender:
- Distribution of sentiments by gender.
- Gender values are Male & Female
- Maybe we need some way to toggle these Male and Female options?
7). Data Source:
- Distribution of interactions between Facebook, Twitter & LinkedIn
8). Timeline:
- Distribution of sentiments and interaction volumes over time. Spikes usually correspond to campaigns and viral posts.
- Need display a horizontal line threshold for average number of mentions
- Need display a vertical line threshold to indicate current selected date/time
- Need some way to see timeline monthly, weekly, and daily
- User need able to drag the timeline and change the map based on selected timeline
9). Styleguide Screen
- As part of this challenge, you need create a separate styleguide screen that will explains your design elements for:
-- Colors
-- Fonts
-- Layout
-- Interactions
-- Anything else?
- Check this website for Styleguide Reference: https://speckyboy.com/inspirational-examples-ui-style-guides/
Design Submission Formats:
a). Screen Sizes:
- Desktop Screen Size: 1280px(w) × 720px(h)
b). Design theme, colors, typography.
- Design Theme: Clean, Professional and Creative design.
- Color palette is up to designer
- Fonts is up to designer
c). Submission Design Presentation
- As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your submission notes
Target User
- Internal Users
Judging Criteria
- How well you create Company Social Engagement Dashboard Design!
- Cleanliness of your graphics and design.
- User Experience.
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/Sketch and saved as 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.