Challenge Summary
Welcome to DDP Store Performance Dashboard Concepts Design Challenge
For this challenge we need you to create design of Store Performance portal to provide enhanced User Experience to the customers. As part of this design challenge you need to ensure the designs are compatible with the OpenstreetMap and D3js libraries; as these would be required for the development phase.
We are providing sketches that are illustrative of the concepts we want to see, but we do not want to constrain the ideas to the provided sketches. The sketches can work as wireframe on what data need to be included, DO NOT copy paste the sketch as is.
Read more details information on challenge specification. Let’s discuss any questions you have!
1). Store Financial Performance
2). Store Performance
Note: Feel free to submit more screens for early feedback
1). Store Financial Performance
2). Store Fragmentation
3). Store Performance
4). Store Performance Insights
The objectives of this challenge is to create design to ensure that all the store parameters are depicted with advanced visualizations.
Business Objective
- We need you to provide interactive dashboards to categorize and analyze internal and external factors and determine the relevance of each to a store’s performance and provide recommendations for improvement.
Benefit
The application process should mediates the relationship between planning & performance for different stores, which in turn is positively related to financial performance.
Expected Outputs
- The application should able to monitor and analyze visitor numbers, operating cost, sales, etc. in each store. It should be able to benchmark, compare stores and decide on the operational parameters. The application should be able to predict and provide insights on areas of improvement.
- On the map we need use the clusters stores into homogeneous groups
- Display ranking for each stores within the groups according to performance
Map Design Guidelines
- 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
- Do some research, make sure your design possible to build with this Map library
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 to design on every pages when we move this to the next development phase.
Design Page Requirements
Note: Refer to this Presentation Deck for screen reference pointed below
General
- For this challenge, we are looking for innovative visuals which can get better end user buy in, and possibly make their interaction with the application very pleasing.
- Create design that will boost the user experiences of Performance Dashboard Page.
- Make sure all elements/buttons/chart is easy to use/understand.
- Suggest best color palette for all dashboard pages.
- You need put logo placeholder and application title on page also spot for User welcome area
Main Navigation
- Create how main navigation look on the header bar
- Create different active and inactive state for the main navigation
- These are main navigation need to use for this application:
-- Landing Page (out of challenge scope)
-- Store Financial Performance
-- Store Fragmentation
-- Store Performance
-- Store Performance Insights
- For more details information for each page, read description below:
1). Store Financial Performance
Wireframe Reference: Deck pg.1
- This page will consolidated value of KPIs ( Sales, COGS, Profit, CSAT) across stores, select single store (on map) for individual view
- These are some elements need displayed in page:
KPI values
- This KPI need clearly visible on page
-- COGS (Cost of Goods Sold): $869M
-- Sales: $731M
-- Profit: $138M
-- CSAT (Customer Satisfaction Score): 73.78
- This dashboard will display a map that will inform Store Performance by Location
Store Performance by Location
- Create map clusters to explain Geo spatial location of stores,
- Use different size on cluster indicates sales value,
- Use different color indicates margin per unit area
Store Distribution
- This is Store Distribution with respect to sales per square
- User need able to change Drivers dropdown to display different data on Store Distribution chart
- You need create a chart to inform “No of Stores” and “Sales per square feet”
- Sales per square feet data: 100 - 8300 (create some random values between) - X Axis
- No of Stores: 0 - 120 (create some random values between) - Y Axis
2). Store Fragmentation
Wireframe Reference: Deck pg.2
- This view provides a segmentation of the stores based on store demographics like Location, Store sales and margin, sales distribution, margin distribution
- These are some elements need displayed in page:
Store Segment Performance Across Locations
- This Store segment Performance need covers State per capita Income for Store Segment Key.
- Create a map to show different Clusters of stores based on demographics and Segment Key type.
- Use different size on cluster indicates Store Segment sales value,
- Use different color indicates different Store Segment Key
- Store Segment Key types:
-- Rural-Fuel
-- Rural-Merch
-- Rural-Urban-Fuel
-- Rural-Urban-Merch
-- Urban-Fuel
-- Urban-Merch
Drop downs for Segments, Various formats, Store Evaluation Metric
- We need some dropdowns above the map that will change data being displayed
a). Select an option: (Store Segment and Format)
b). Format: (All)
c). Store Evaluation Metric: (Sales per Sq.ft)
Distribution of stores across sales and margin
- Suggest chart type for this section
- You need create a chart to inform “Sales in $” and “Total Margin”
- Sales in $: 0M - 5M (create some random values between) - X Axis
- Total Margin: 0 - 100K (create some random values between) - Y Axis
- Different color of Store Segment Key need captured on this chart
Distribution of sales
- Suggest chart type for this section
- Sample data: create random data from different Store Segment Key types with %(percentage)
- Different color of Store Segment Key need captured on this chart
Distribution of margin
- Suggest chart type for this section
- Sample data: create random data from different Store Segment Key types with %(percentage)
- Different color of Store Segment Key need captured on this chart
3). Store Performance
Wireframe Reference: Deck pg.3
- The page will contains of visualization shows the various performance metrics of the store selected and compares it with the top store out of all clusters, the top store and the worst store in the cluster that has been selected.
- These are some elements need displayed in page:
Dropdowns options:
- Dropdown to select Store Segment & Format: (Urban Fuel)
- Dropdown to select Store/Cluster/Area: (All)
- Performance Metric: (Sales Per Area)
Performance Metrics
- The various performance metrics are:
-- Sales Per Area
-- Margin per Area
-- Gross Margin
-- Obsolete Inventory
-- Operating Expenses
-- CSAT
-- Avg Performance Score
- Create columns for each metrics to capture these: Best Store in Cluster, Worst Store in Cluster, Best Store & Comparing Store
- Design how this performance should look to display all the scoring differences. You can use these as review scoring: very good, good, neutral, bad, worse. Feel free to explore the design!
4). Store Performance Insights
Wireframe Reference: Deck pg.4
- This page will contains of visualization provides a comprehensive understanding of stores in various segments and different formats and it enables suggestion of factors to be altered to increase the probability of the store falling within the top 2 performing stores.
- These are some elements need displayed in page:
Dropdowns options
- Dropdown Segments,
- Dropdown Various formats,
- Dropdown Selected Store,
- Dropdown Store Positioning
Please suggest alternatives for dropdown options
Factors affecting Sales
- Sample data:
Merchandising Sales (67%)
Financial & Sales (9%)
Non-Merchandising Sales (7%)
Service Level (7%)
etc
Factor Strength
- Sample data:
Weak (40.35%)
Medium (29.69%)
Strong (29.96%)
For a selected cluster and a store there are 4 variables and percentile for each variable depicted.
- The variables for Urban Fuel cluster:
-- AF Productive percent, (20% - 40%)
-- SEM per Unit Merchandise Sales, (0% - 20%)
-- Opex per unit sales, (20% - 40%)
-- Fem per unit fuel sales (20% - 40%)
- There are various variables for each cluster; There has to be a slider or any other visualization to modify the 4 variable parameters as the cluster changes
Odds Improvement
- There is an odds improvement figure that gets calculated based on the slider variables selected. The sliders are within the percentage limits.
- Sample value: 1.00000
Current sales of selected store
- Sample value: $97
Top performing Bucket threshold value
- Sample value: $848
Top Performing Bucket Average Sales
- Sample value: $1130
Depiction for influential factors describes the performance of selected store with respect to a store ranked above and below
- There is a selection for store and the performance rank who would be the comparative for the selected store. The metric, significant variables and the dictionary associated gets refreshed.
- Chart example: https://bl.ocks.org/micahstubbs/a772306d6fd49874ec92/ab05005d3eca72d45632cbe2f12ba13fc33a628d
- Sample data (Store/Performance Rank)
-- S001/564
-- S002/563
-- S003/565
-- etc
Metric informations sample variables
1) AM Productive Percentage
2) Health Beauty Sales Retail
3) Ice create Novelty Sales Retails
4) Opex Per Unit Sales
5) Prepaid Ticket Sales
6) Slurpee Sales Percentage
Design Submission Formats:
a). Screen Sizes:
- Desktop Screen Size: 1280px(w) × Height up to your design
b). Design theme, colors, typography.
- Design Theme: Clean, Professional and Business-like 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
- CMO Organization
- Store Manager
Judging Criteria
- How well you create DDP Store Performance Dashboard Concepts 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 create design of Store Performance portal to provide enhanced User Experience to the customers. As part of this design challenge you need to ensure the designs are compatible with the OpenstreetMap and D3js libraries; as these would be required for the development phase.
We are providing sketches that are illustrative of the concepts we want to see, but we do not want to constrain the ideas to the provided sketches. The sketches can work as wireframe on what data need to be included, DO NOT copy paste the sketch as is.
Read more details information on challenge specification. Let’s discuss any questions you have!
Round 1
Initial DDP Store Performance Dashboard Concepts Design for these following screens on Desktop screen size1). Store Financial Performance
2). Store Performance
Note: Feel free to submit more screens for early feedback
Round 2
Final DDP Store Performance Dashboard Concepts Design for these following screens on Desktop screen size combined with Checkpoint Feedback1). Store Financial Performance
2). Store Fragmentation
3). Store Performance
4). Store Performance Insights
The objectives of this challenge is to create design to ensure that all the store parameters are depicted with advanced visualizations.
Business Objective
- We need you to provide interactive dashboards to categorize and analyze internal and external factors and determine the relevance of each to a store’s performance and provide recommendations for improvement.
Benefit
The application process should mediates the relationship between planning & performance for different stores, which in turn is positively related to financial performance.
Expected Outputs
- The application should able to monitor and analyze visitor numbers, operating cost, sales, etc. in each store. It should be able to benchmark, compare stores and decide on the operational parameters. The application should be able to predict and provide insights on areas of improvement.
- On the map we need use the clusters stores into homogeneous groups
- Display ranking for each stores within the groups according to performance
Map Design Guidelines
- 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
- Do some research, make sure your design possible to build with this Map library
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 to design on every pages when we move this to the next development phase.
Design Page Requirements
Note: Refer to this Presentation Deck for screen reference pointed below
General
- For this challenge, we are looking for innovative visuals which can get better end user buy in, and possibly make their interaction with the application very pleasing.
- Create design that will boost the user experiences of Performance Dashboard Page.
- Make sure all elements/buttons/chart is easy to use/understand.
- Suggest best color palette for all dashboard pages.
- You need put logo placeholder and application title on page also spot for User welcome area
Main Navigation
- Create how main navigation look on the header bar
- Create different active and inactive state for the main navigation
- These are main navigation need to use for this application:
-- Landing Page (out of challenge scope)
-- Store Financial Performance
-- Store Fragmentation
-- Store Performance
-- Store Performance Insights
- For more details information for each page, read description below:
1). Store Financial Performance
Wireframe Reference: Deck pg.1
- This page will consolidated value of KPIs ( Sales, COGS, Profit, CSAT) across stores, select single store (on map) for individual view
- These are some elements need displayed in page:
KPI values
- This KPI need clearly visible on page
-- COGS (Cost of Goods Sold): $869M
-- Sales: $731M
-- Profit: $138M
-- CSAT (Customer Satisfaction Score): 73.78
- This dashboard will display a map that will inform Store Performance by Location
Store Performance by Location
- Create map clusters to explain Geo spatial location of stores,
- Use different size on cluster indicates sales value,
- Use different color indicates margin per unit area
Store Distribution
- This is Store Distribution with respect to sales per square
- User need able to change Drivers dropdown to display different data on Store Distribution chart
- You need create a chart to inform “No of Stores” and “Sales per square feet”
- Sales per square feet data: 100 - 8300 (create some random values between) - X Axis
- No of Stores: 0 - 120 (create some random values between) - Y Axis
2). Store Fragmentation
Wireframe Reference: Deck pg.2
- This view provides a segmentation of the stores based on store demographics like Location, Store sales and margin, sales distribution, margin distribution
- These are some elements need displayed in page:
Store Segment Performance Across Locations
- This Store segment Performance need covers State per capita Income for Store Segment Key.
- Create a map to show different Clusters of stores based on demographics and Segment Key type.
- Use different size on cluster indicates Store Segment sales value,
- Use different color indicates different Store Segment Key
- Store Segment Key types:
-- Rural-Fuel
-- Rural-Merch
-- Rural-Urban-Fuel
-- Rural-Urban-Merch
-- Urban-Fuel
-- Urban-Merch
Drop downs for Segments, Various formats, Store Evaluation Metric
- We need some dropdowns above the map that will change data being displayed
a). Select an option: (Store Segment and Format)
b). Format: (All)
c). Store Evaluation Metric: (Sales per Sq.ft)
Distribution of stores across sales and margin
- Suggest chart type for this section
- You need create a chart to inform “Sales in $” and “Total Margin”
- Sales in $: 0M - 5M (create some random values between) - X Axis
- Total Margin: 0 - 100K (create some random values between) - Y Axis
- Different color of Store Segment Key need captured on this chart
Distribution of sales
- Suggest chart type for this section
- Sample data: create random data from different Store Segment Key types with %(percentage)
- Different color of Store Segment Key need captured on this chart
Distribution of margin
- Suggest chart type for this section
- Sample data: create random data from different Store Segment Key types with %(percentage)
- Different color of Store Segment Key need captured on this chart
3). Store Performance
Wireframe Reference: Deck pg.3
- The page will contains of visualization shows the various performance metrics of the store selected and compares it with the top store out of all clusters, the top store and the worst store in the cluster that has been selected.
- These are some elements need displayed in page:
Dropdowns options:
- Dropdown to select Store Segment & Format: (Urban Fuel)
- Dropdown to select Store/Cluster/Area: (All)
- Performance Metric: (Sales Per Area)
Performance Metrics
- The various performance metrics are:
-- Sales Per Area
-- Margin per Area
-- Gross Margin
-- Obsolete Inventory
-- Operating Expenses
-- CSAT
-- Avg Performance Score
- Create columns for each metrics to capture these: Best Store in Cluster, Worst Store in Cluster, Best Store & Comparing Store
- Design how this performance should look to display all the scoring differences. You can use these as review scoring: very good, good, neutral, bad, worse. Feel free to explore the design!
4). Store Performance Insights
Wireframe Reference: Deck pg.4
- This page will contains of visualization provides a comprehensive understanding of stores in various segments and different formats and it enables suggestion of factors to be altered to increase the probability of the store falling within the top 2 performing stores.
- These are some elements need displayed in page:
Dropdowns options
- Dropdown Segments,
- Dropdown Various formats,
- Dropdown Selected Store,
- Dropdown Store Positioning
Please suggest alternatives for dropdown options
Factors affecting Sales
- Sample data:
Merchandising Sales (67%)
Financial & Sales (9%)
Non-Merchandising Sales (7%)
Service Level (7%)
etc
Factor Strength
- Sample data:
Weak (40.35%)
Medium (29.69%)
Strong (29.96%)
For a selected cluster and a store there are 4 variables and percentile for each variable depicted.
- The variables for Urban Fuel cluster:
-- AF Productive percent, (20% - 40%)
-- SEM per Unit Merchandise Sales, (0% - 20%)
-- Opex per unit sales, (20% - 40%)
-- Fem per unit fuel sales (20% - 40%)
- There are various variables for each cluster; There has to be a slider or any other visualization to modify the 4 variable parameters as the cluster changes
Odds Improvement
- There is an odds improvement figure that gets calculated based on the slider variables selected. The sliders are within the percentage limits.
- Sample value: 1.00000
Current sales of selected store
- Sample value: $97
Top performing Bucket threshold value
- Sample value: $848
Top Performing Bucket Average Sales
- Sample value: $1130
Depiction for influential factors describes the performance of selected store with respect to a store ranked above and below
- There is a selection for store and the performance rank who would be the comparative for the selected store. The metric, significant variables and the dictionary associated gets refreshed.
- Chart example: https://bl.ocks.org/micahstubbs/a772306d6fd49874ec92/ab05005d3eca72d45632cbe2f12ba13fc33a628d
- Sample data (Store/Performance Rank)
-- S001/564
-- S002/563
-- S003/565
-- etc
Metric informations sample variables
1) AM Productive Percentage
2) Health Beauty Sales Retail
3) Ice create Novelty Sales Retails
4) Opex Per Unit Sales
5) Prepaid Ticket Sales
6) Slurpee Sales Percentage
Design Submission Formats:
a). Screen Sizes:
- Desktop Screen Size: 1280px(w) × Height up to your design
b). Design theme, colors, typography.
- Design Theme: Clean, Professional and Business-like 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
- CMO Organization
- Store Manager
Judging Criteria
- How well you create DDP Store Performance Dashboard Concepts 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.