GEOG 583
Geospatial System Analysis and Design

Prototyping Assignment


In this assignment, I would like you to develop a static digital mockup of a GIS interface of your choice using the Balsamiq online tool. You could design one that would provide spatial analysis tools, one that would help users compare two maps to each other, etc... It's really up to you.

Follow these steps to complete the assignment:

To Do

To embed an image, see the figure below. First, click on the picture icon to view the image embedding dialog.

WYSIWYG editor with the image icon called out with a red box.

Then you will click "browse server" in the pop-up window:

Image properties window highlighting the Browse server button.

Then, navigate to the root/Spring_2015 folder, upload your mockup image to the server, and select it to be embedded on the page:

The three steps to insert an image: click browse to locate the image file, click upload, then click insert file.

Next, you can set the size of the image. I recommend clicking on the padlock icon to constrain proportions and setting a maximum width for your image to between 5 - 700 pixels wide.

Setting the image properties: width and height dimensions.
  1. Go to the Balsamiq site to launch the Balsamiq mockup creator demo version. Note that the demo version is only active for an hour.
  2. To get started with a blank canvas, use the menu bar at the top of the interface and go to Mockup --> Clear Mockup to remove the default objects and notes that are initially loaded on the canvas.
  3. To develop your mockup, simply click and drag components from the different UI component collections onto your canvas. Most components can then be edited by simply hovering over them with your mouse and selecting options from the context menu that appears.
  4. When you're finished, use the menu bar at the top and go to Project -> Export -> Current Mockup to PNG to save your mockup on your computer as an image file.
  5. You will add your image and a brief caption describing it. Then write 1-2 paragraphs describing your prototype and which design constraints / tradeoffs influenced your prototype the most. Provide enough details so that your colleagues and I can understand what you did and why you did it. Post it as a 'Reply' in the Lesson 3 Prototyping Assignment discussion in Canvas.
  6. Finally, save your edits by clicking the "Save" button at the bottom of the editor page.

If you have problems editing/submitting content using the comment editor, post in the General Questions Discussion Forum in Canvas or e-mail me so I can help!

Prototyping Assignment Grading Criteria

Your grade will be based on your work's impact, content, clarity, and meets criteria. For each of these criteria, I will assign points on a scale from 1-5, with 5 being excellent and 1 being very poor.

I define "Impact" as the strength and logic of the arguments and analytical insights you provide with your writing. For example, explaining the extent to which your proposed design solves a current problem that hasn't already been addressed, focuses on a novel way of doing something that already exists, or making a process more efficient. In other words, I expect to see a clear articulation on how your approach makes an impact (rather than duplicate what already exists).

I define "Content" as the level of understanding and knowledge of relevant topics you demonstrate with your writing. Included in your discussion should be specific reference to topics covered in the class thus far. What about design stages, needs assessment, VGI, prototyping, etc.? In other words, make it clear to me that you are absorbing the class material and are able to apply it to your prototype.

I define "Clarity" as the readability and organization of your writing (including formatting and appropriate graphic design where applicable). I have to be able to follow your discussion points. Clear, concise, and well thought out arguments will help in that matter. Make sure that someone who is not familiar with your system can follow the different steps when using the system. This may include showing multiple screens of your prototype.

I define "Meets Criteria" as whether or not you have met the overall goals of this assignment.

Prototype Rubric
Criteria Excellent Very Good Satisfactory Poor Very Poor
Impact 5 4 3 2 1
Content 5 4 3 2 1
Clarity 5 4 3 2 1
Meets Criteria 5 4 3 2 1