zingchart fantasy football dashboard design process
DESCRIPTION
ZingChart shares the data visualization process used to develop their fantasy football dashboard. The dashboard relies on principles for dataviz including chart selection, color palette, and user feedback. The dashboard is constructed with the ZingChart JavaScript charting library.TRANSCRIPT
![Page 1: ZingChart Fantasy Football Dashboard Design Process](https://reader036.vdocuments.site/reader036/viewer/2022062707/5580b2b8d8b42ac6088b4881/html5/thumbnails/1.jpg)
Fantasy Football Dashboard
![Page 2: ZingChart Fantasy Football Dashboard Design Process](https://reader036.vdocuments.site/reader036/viewer/2022062707/5580b2b8d8b42ac6088b4881/html5/thumbnails/2.jpg)
Fantasy Football Dashboard
A visualization of data found in tables and grids in popular sites.
Fantasy Football Dashboard
![Page 3: ZingChart Fantasy Football Dashboard Design Process](https://reader036.vdocuments.site/reader036/viewer/2022062707/5580b2b8d8b42ac6088b4881/html5/thumbnails/3.jpg)
Overall Design Process
Initial sketch Refinement Wireframe 1 Coded Draft Final Product
Fantasy Football Dashboard
![Page 4: ZingChart Fantasy Football Dashboard Design Process](https://reader036.vdocuments.site/reader036/viewer/2022062707/5580b2b8d8b42ac6088b4881/html5/thumbnails/4.jpg)
AudienceWhat story do fantasy football players care about?
And how do they flow through the data each week?
Fantasy Football Dashboard
![Page 5: ZingChart Fantasy Football Dashboard Design Process](https://reader036.vdocuments.site/reader036/viewer/2022062707/5580b2b8d8b42ac6088b4881/html5/thumbnails/5.jpg)
Chart 1: High Level Overview
Most sites show general stats for top players. We wanted the structure to be familiar.
Fantasy Football Dashboard
![Page 6: ZingChart Fantasy Football Dashboard Design Process](https://reader036.vdocuments.site/reader036/viewer/2022062707/5580b2b8d8b42ac6088b4881/html5/thumbnails/6.jpg)
Source: Metro.co.uk
Chart 2: Position Focus
Digging into each position’s metrics by difficulty of matchup.
What question do fantasy players care about?
Fantasy Football Dashboard
![Page 7: ZingChart Fantasy Football Dashboard Design Process](https://reader036.vdocuments.site/reader036/viewer/2022062707/5580b2b8d8b42ac6088b4881/html5/thumbnails/7.jpg)
Chart 3: Defense metrics
Fantasy Football Players recognize grids. We used them to look deeper into position performance.
Fantasy Football Dashboard
![Page 8: ZingChart Fantasy Football Dashboard Design Process](https://reader036.vdocuments.site/reader036/viewer/2022062707/5580b2b8d8b42ac6088b4881/html5/thumbnails/8.jpg)
Chart 4: Let’s socializeFantasy Sharks reports on who its members start weekly by position. We reflect this through stacked bars.
QB RB WR TE D/ST
Fantasy Football Dashboard
![Page 9: ZingChart Fantasy Football Dashboard Design Process](https://reader036.vdocuments.site/reader036/viewer/2022062707/5580b2b8d8b42ac6088b4881/html5/thumbnails/9.jpg)
Visual Design: Colors
Qualitative data palette works for this application.
Dribble has examples of existing fantasy dashboards.
Fantasy Football Dashboard
![Page 10: ZingChart Fantasy Football Dashboard Design Process](https://reader036.vdocuments.site/reader036/viewer/2022062707/5580b2b8d8b42ac6088b4881/html5/thumbnails/10.jpg)
Feedback and improvements
24 User Ideas collected from
5 Social Networks
How did we improve the design?
Fantasy Football Dashboard
![Page 11: ZingChart Fantasy Football Dashboard Design Process](https://reader036.vdocuments.site/reader036/viewer/2022062707/5580b2b8d8b42ac6088b4881/html5/thumbnails/11.jpg)
What’s next?
Fantasy Football Dashboard
![Page 12: ZingChart Fantasy Football Dashboard Design Process](https://reader036.vdocuments.site/reader036/viewer/2022062707/5580b2b8d8b42ac6088b4881/html5/thumbnails/12.jpg)
Read more
Try a dashboard with your data
http://www.zingchart.com/blog/2014/10/30/fantasy-football-dashboard-data-visualization/
http://www.zingchart.com/try
Fantasy Football Dashboard