SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early...
Transcript of SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early...
![Page 1: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/1.jpg)
![Page 2: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/2.jpg)
Visualizations DemoFedCASIC 2018
Chris GriggsRoger Jesrani
Bharathi Jayanthi GollaJorgen WaldermoRebecca Watkins
Presenter:Author:
Contributors:
![Page 3: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/3.jpg)
Agenda
3
SPARS
Team
UX themes
Programming Stack
Demo
![Page 4: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/4.jpg)
SPARS
4
SAMHSASubstance Abuse and Mental Health Services Administration
CSATCenter for Substance Abuse Treatment promotes community-based substance abuse treatment and recovery services for individuals and families
SPARS• SPARS is a new online data entry, reporting, technical
assistance and training system to support grantees in reporting timely and accurate data
• SPARS replaces systems used by these centers:• CSAT – Center for Substance Abuse Treatment (SAIS)• CMHS – Center for Mental Health Services (TRAC)• CSAP – Center for Substance Abuse Prevention (PMRTS)
![Page 5: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/5.jpg)
Visualization Team
5
UX Designers
• Mockups• Information
Architecture• Early user
feedback
Subject Matter Experts
• Domain knowledge
• User knowledge
Front End Developers
• Visualization coding
• Web site & security
• Standards
Database
• Dedicated data warehouse
• Query optimization
Quality Assurance
• Testing• Compliance
testing
• Multidisciplinary team
• Agile like development
• Regular client demos during development
• Iterative QA testing
![Page 6: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/6.jpg)
User Experience Goals
6
Immediacy
Information vs Data
Encourage Exploration
Early mockup
![Page 7: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/7.jpg)
User Experience - Immediacy
Select a Report
Fill in filter criteria 1
Fill in filter criteria 2 Etc. See the
report
7
The goal of the design is to reduce friction; to makes the charts more usable (quicker, easier, approachable).
Friction is caused when the user has to pause, think, click, tab, type, consider, etc.
Select a Visualization
See the visualization
Filter if needed
The reporting workflow tends to be filter first, view second:
The visualization workflow tends to be view first, filter second:
![Page 8: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/8.jpg)
User Experience – Information vs Data
8
Look for opportunities to give meaning and context to data.
What does chart mean? Is this good or bad? Better or worse than before?
How does this lead the user to action?
![Page 9: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/9.jpg)
User Experience – Encourage Exploration
9
Encourage the user to interact
• Start with a chart
• Provide selection defaults
• Make refresh fast enough to encourage use
• Make easy to start over
• Provide selection examples
![Page 10: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/10.jpg)
Visualization Programming Stack
10
Web ServerIIS, ASP.Net MVC, EF, D3.js, C3.js
ClientWeb browsers
Data WarehouseSQL Server
Database ServerSQL Server
![Page 11: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/11.jpg)
Programming Stack - Charts
11
D3JS Charting Library https://d3js.org/
C3JS Charting Library http://c3js.org/
![Page 12: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/12.jpg)
SPARS Website
12
![Page 13: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/13.jpg)
Demographics Visualization
13
• The Demographics visualization provides descriptions of the populations being served through SAMHSA programs.
• Demographic information is collected during the initial client intake interview.
• Common UI elements across all visualizations
• SPARS branding
• Minimal chrome
• Charts are the stars
![Page 14: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/14.jpg)
GPO, Program, Grant filter
14
![Page 15: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/15.jpg)
Regions Filter
15
![Page 16: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/16.jpg)
Viewing filter details
16
![Page 17: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/17.jpg)
Intake Coverage
17
• Intake Coverage is a performance monitoring visualization
• Each grant has specific a service level in which they will provide service to a minimum number of clients.
• Users can quickly see which programs and grants are meeting client target expectations and which ones need improvement.
![Page 18: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/18.jpg)
Follow-Up Rate
18
• Follow-up Rate is also performance monitoring visualization
• 6 month follow-up
• Grants are required to follow-up with the client at set intervals. The goal is to follow-up with at least 80% of the clients. This visualization shows if the programs and grants are meeting this goal.
• In this screen shot, a single program is filtered so the grants that make up the program are shown.
![Page 19: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/19.jpg)
Outcome Change
19
• Outcome Change shows which programs and grants are making a positive change for their clients
• Changes across 6 different measures
• Compares intake interview % to selected interview period and outcome
![Page 20: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/20.jpg)
Print output
20
![Page 21: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/21.jpg)
Q & A
21
Presenter: Chris Griggs
Author: Roger Jesrani
Contributors: Bharathi Jayanthi GollaJorgen WaldermoRebecca Watkins
![Page 22: SPARS Visualizations Demo Q1 2018UX Designers • Mockups • Information Architecture • Early user feedback. Subject Matter Experts • Domain knowledge • User knowledge. Front](https://reader033.fdocuments.in/reader033/viewer/2022042809/5f8e6077dcba044de126491e/html5/thumbnails/22.jpg)
RTI International
22