Paper Prototypes

Design Architecture | Sketches | Initial Prototypes | Consolidation Process | Final Prototype

Design Architecture:

Based on our research, we developed a high-level architecture for the system we planned to implement for our client.

• We designed a Central Database to pull in data from the Foreman System and other sources. The database would export this data to excel templates and our data analysis and visualization tool
• Change Interface: provides an easier way to update CitiStat templates
• Input Interface: allows city workers to directly add new data each month into the central database
• Analysis Interface: allows budget analysts and managers an easy way to see trends, visualize and graph data

Sketches

With a solid architecture design in mind, we did some research on different interaction styles and brainstormed individually on how to design some of the interfaces we had discussed. We regrouped after a few days, armed with sketches and examples and shared our ideas with the group. These are some of the sketches we developed that day.

Initial Prototypes

High Level Comparison chart of all 5 prototypes

Pivot

Summary: Modeled off of the interactive dragging style of Microsoft Excel pivot charts Drop-down menus for department, category, and chart type Dialog boxes for x-axis control Data points organized in hierarchy Creates graph based on location of drag-and-drop data points Load and save charts Provides ability for multi-variable comparisons Flexibility highlighted over speed and simplicity View the Powerpoint Demo

 

Mac

Summary: Modeled off of the Mac browser interaction Hierarchy expands in each column to more specific information Direct manipulation of X-axis Ability to add additional data lines Graph and data chart preview Export to Excel

 

Tree

Summary: Maximum speed of access prioritized over flexibility Screen divided between metrics and visualizations Metrics organized in a tree for fast, orderly access Visualization area depends on tree selection Charts can easily be copied into briefing book document

 

Excel Plus

Summary: An outside graphing program integrated with current excel documents Highlight information needed for graph Add the highlighted information to a new graph Program shows the possible charts for the data in selection Includes a dialog box to adjust settings

 

Tabs

Summary: Metrics organized in the same fashion as CitiStat templates Add or delete data to be graphed by checking or unchecking boxes Map automatically populates with data Switch between tabs to see other divisions Allows for comparison between years Legend provides feedback on what each bar refers to

 

Consolidation process

The team went through a rigorous process of testing, evaluating, and refining our prototypes to come up with our final solution. This process included affinity diagramming, heuristic evaluation, and think-aloud protocols, with our actual users and stakeholders and also more casual "man on the street" users. Please see the User Testing section of the site for more details on our process.

Browser Vs. Builder Mode

The idea behind the browser builder mode was to combine the Tree and Pivot table interaction to support different interaction types. The Builder mode was quick, analytical and passive. Builder mode was task-directed, exploratory and active. We believed the dual functionality would give our users great flexibility in creating charts and graphs. However there are some big drawbacks associated with modality, including propensity for errors and unclear mental models of use. We weighed the pros and cons of each mode and decided to scrap the dual modality and focus on the browser mode.

Additional Links

High-Level User Needs (from affinity diagramming session)

Design Consolidation Considerations

 

Final Paper Prototype

MetroViz

Our data visualization and analysis interface, MetroViz, supports such features as multi-selections on the metric tree, comparing data by years, totals or divisions, saving canned graphs and exporting data or graphs to Excel for more detailed manipulation. We also developed the Input and Change interface we mentioned in our design architecture.

For more details on the completed MetroViz prototype, see Our Solution under Implementation.