Challenge Summary
Welcome to "Hestia - DViz Portfolio Performance Dashboard Design Concepts Challenge". In this challenge, we are looking to explore design concepts for a new Data Visualization Dashboard that will ultimately be implemented using "Microsoft Power BI".
We recommend you to start by digging into data visualization design best practices, research Microsoft Power BI, review the provided Hestia data visualization guidelines and think about cool & creative ways to provide data visualization experiences.
Round 1
Submit your initial designs for checkpoint feedback.
01 Portfolio Performance Dashboard (Desktop)
01 Portfolio Performance Dashboard (Phone)
01 1 Milestone Items (Desktop)
01 2 Checklist & Data (Desktop)
- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final designs with all checkpoint feedback implemented
01 Portfolio Performance Dashboard (Desktop)
01 Portfolio Performance Dashboard (Phone)
01 1 Milestone Items (Desktop)
01 1 Milestone Items (Phone)
01 2 Checklist & Data (Desktop)
01 2 Checklist & Data (Phone)
- As a part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03)
In this challenge, we are looking to design a clean, easy and simple data visualization dashboard which will make it easy for the respective users to get a snapshot view of their portfolio performance, and also dive-in to analyze the supporting data.
Background Overview
The Hestia team is currently using outdated documents and spreadsheets to view this information. It is currently not visually clear or easily consumed by the executive stakeholders who need this information. They are looking for a more robust and user-friendly method to see key data, and the details that impact the performance of their strategic initiatives.
Design Consideration
- We are looking for a simple, easy-to-use, informative, modern design
- Try not to squeeze too much information onto your dashboard. Your designs can be compelling by making the visualization elements interactive. Enable users to walk through or drill into the different insight
- Use color, visual comparison, and drill-down charts to highlight the comparison
- We will need concepts presented for Desktop and Phone view. Create your screens for viewports: 1366px x 768px (Desktop), 750px x 1334px (Phone, @326ppi)
- Please follow the provided branding guidelines and documentation.
Branding Guidelines
- The design should follow Power BI Design Best Practices. Also take a look at the Power BI Design Tips
- Please do some research on the Power BI software and get familiar with its purpose, limitations, and what's possible.
- Refer to the provided Hestia Data Visualization guidelines.
Required Dashboard Design:
We are looking for you to design the screens outlined below:
01 Portfolio Performance Dashboard (Desktop, Phone):
Reference: Portfolio-Image.png
- Executives should be able to see the overall performance of the portfolio at this screen. This is the current high-level view of the performance on 5 Strategic Initiatives.
- The “5 Strategic Initiatives” are
- - - Thought Leadership
- - - Innovation + Disruption
- - - Omni Channel
- - - Efficient Operating Model
- - - Culture of Best Associates
- Consider creating an icon for each of the Initiatives. We are open to your thoughts and ideas.
- Each Strategic Initiative must include some type of visual indication of its performance status. This status is defined by a number of factors put together, for example: all tasks tracking on schedule, financial measurements meeting expectations, etc. The success of each Initiative will be determined by meeting these criteria. We are looking for ideas of how best to display this performance status. It could be: Bad/OK/Good, or Red/Yellow/Green, or Lagging/On Track/Leading. Get creative with this and try to make it interesting!
- Each Strategic Initiative will have “Milestones” associated with it. This is data the user should be able to view in more detail (see the Milestones described below). Be creative about how the user will drill into this data and access the information moving to the next screens. Could the views be combined? What changes happen on the current screen to allow the new information to be easily viewed?
- Users should have the ability to view Portfolio performance for previous years. Consider what filters might be required and how the view would change with this option
01 1 Milestone Items (Drill-down Level 1) (Desktop, Phone):
Reference: Portfolio-Image.png
- Several "Milestones" are associated with each Strategic Initiative. This screen should display all of the Milestones for a Strategic Initiative and allow the user to navigate to more detail. For example, the Strategic Initiative “Efficient Operating Model” includes the Milestones “Sales Centers, Blended Org Design, Centralized Estimating Team Development, WIG Org design, WIG East”
- We should see a performance indicator for each of the Milestones at this detail level. As with the Strategic Initiatives status, this indicator will be based on a number of inputs from tasks and financials.
- Each of the tracked Milestones can be explored to view more details about the tasks that are being performed under them and the data that is influencing their performance (next screen).
01 2 Checklist & Data (Drill-down Level 2) (Desktop, Phone):
Reference for Tasks: SAMPLE_Blended Org Design.docx
Reference for Financials: SAMPLE_KPIs.xlsx
- Within each Milestone, there will be a list of tasks and a financial plan. Please use the example Milestone: "Blended Org Design" for your concepts.
- On this screen, we suggest displaying a list of the Tasks on the left side, and the Financial details (data visualization) on the right side. If you have an alternative layout that you think works, please give it a try!
- Tasks: This will simply be a checklist showing the status of each task! You might include the target date, “complete”, or some other clear status indicator.
- Financials: In this area, we are hoping to see metrics as clear data visualization elements. Our team is still gathering and planning the actual data that would be represented here. We have provided a reference document with a few sets of sample metrics (3 tabs in the .xlsx file). Here’s where your Power BI research will come in handy and your creativity will make a difference! What is the best way to show the data info? dials, gauges, bar graphs? We are looking forward to seeing your suggestions.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Focus on User Experience / how the user interacts within the dashboard.
Reference
Example dashboards designs reference for your considerations:
- https://community.powerbi.com/t5/Data-Stories-Gallery/bd-p/DataStoriesGallery
- https://docs.microsoft.com/en-us/power-bi/service-dashboard-create
- https://id.pinterest.com/steffuhnee/power-bi-dashboards/?lp=true
- https://dribbble.com/powerbidesign
MarvelApp Prototype
- We need you to upload your screens to Marvel App
- Please send your Marvel app request to csystic@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).
Target Audience
- Executives of the company
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design
- The overall design, UI and user experience.
- Consistency across the UX/UI
- How well you interpret the example screens (business relevance) 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
- Submit Marvelap as part of your submission.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD, or Sketch!
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.