Skip to content

Latest commit

 

History

History
 
 

design

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Hack the Budget Design Process & Iterations

Below, we outline and reference artifacts created throughout the process of designing this interactive city budget game/app.

Initial Whiteboard Sketches

  • v1 contains the initial whiteboard drawing and sketches from @graceatkins of Glasshouse Policy. These sketches introduce the basic pattern of using sliders as a way to change budget inputs. They also reference the idea for real time feedback about the effect or tradeoff of the user's decision reflected in updating budget figures and overall qualitative tradeoffs.
  • v2 contains new whiteboard sketches of content layout ideas from @mateoclarke of Open Austin.
  • v3 contains whiteboard from Open Austin's July 2nd Civic Hack Saturday. These assets introduce an idea to use City collected performance measure data for departments. A user needs to learn more about a department and whether that organization should get more/less funding. We also discussed linking to Austin Monitor articles by theme/department for contextual understanding of key issues within each department.
  • v4 contains Balsamic mockups by @mateoclarke composed at/just after 7/2 CHS. These were the first wireframes and hints at the user flow for a mobile first screen.

Digital Wireframing

At this point in the process, @VictoriaODell of Open Austin contributed high-fidelity wireframes and prototypes

  • v5 consists of two Wireframe.cc prototypes. The first wireframe shows a basic layout with a Welcome page and an example of a "Taxes & Fees" page. The second wireframe introduces a UI pattern inspired by Duolingo (language learning game) where circular modules represent a new screen. Each new screen contains activities for the user.

Prototype

  • v6 is an Invision Prototype that provides the first start to finish implementation of the app design. Of note, this prototype provides guidance for the inclusion of a sticky header with current budget figures and also a sticky footer which provides navigation in some case, or the interactive slider component in others. It also provide an example for a "Report" Screen that breaks into "Overview" sections prompting the user to refine their selection and submit their results.