Assignment 6: Meat on the bones


Functionality functionality functionality! Continue developing your interactive prototypes in accordance with your development plan. Also, update your development plan as you discover more about what you want to prioritize, what you can expect to implement, and what you may need to mock up. The goal is for you to complete the interaction flow this week.


This week is all about - that's right - functionality. You should be spending your time fleshing out your interactive prototype. Focus on getting the flow of your interaction working. Don't worry about making it look pretty yet. Don't stall or get too caught up in the look and feel of things. Fonts, colors, and pixel-perfect layout can come later. This week, you'll need to make good progress on the interaction design.

Using the handlebars techniques you learned in lab, read data from JSON to customize the presentation of pages and deliver rich interactivity. By now you should have a good idea the kinds of data your app will utilize. This week, your app should be able to read JSON data and use it to customize templated pages. (Eventually, your app will also persistently store data.) As you learned in Lab 5, this means you will have a file like data.json that has data pre-stored, and your job is to retrieve that data and populate your app with it and add new objects to the data variable. You do not need to dynamically update the data.json file with new data. As an example, imagine you're developing Yelp, then you should have a list for each restaurant and each restaurant page fully rendered, but no need to track ratings or reviews.

Follow the development plan you created last week, and update it as you go. Mark tasks that have been completed and add new ones if you need to. Make sure that your next week is planned out with goals and who is responsible for each task. (If you'd like to give yourself the option of "late days", set an early deadline so your schedule has some flexibility.) Re-evaluate your stretch goals and what's feasible and what isn't. You may decide that your plan is too ambitious, or you may decide that your plan is too conservative; maneuver accordingly.

In Studio

When you arrive to studio this week, your studio leader will have your design loaded on a mobile device, plugged into the shared display. A member of your studio who is not on your team will walk through your prototype and think out loud as they do so. You will receive feedback, and then discuss your development plan with your studio.

Student Examples

Here are some examples of development plans: (1) is very stylized, dynamic, and mostly thorough, (2) is fairly thorough, colorful, but is missing time estimates and has only one stretch goal listed, (3) is a mediocre plan that's mostly thorough, where most tasks are broken down into less than 1 hour chunks, (4) is very thorough, with time estimates and time costs, but some tasks could be more actionable, (5) is a great video of the dynamic nature of implementation plans throughout the project.

In this assignment, we want to emphasize the user task at this stage of development. The interface should be fluid with respect to a particular task made intuitively easy to step through as a user. Here we see a good example of an app that is fully centered on the user's task. For this assignment, this team would complete functionality by capturing all of the relevant information entered into the text boxes, and updating the content of each page with that new information.

GradeSource++: This example project from last year abstracts GradeSource for you and works with the data to show you where you are in a class.

Balancr: This app helps people balance their time between work and play. They have done a wonderful job making the app functional-- you can create a sign-up, add activities, and see it reflected on the pie chart.

For both examples above, simply imagine that the data that undergirds the functionality of the apps are only temporarily stored in a data variable that is pre-populated with data from a .json file.


  • The URL of the prototype (preferably on heroku) that you want us to see. Note: the URL must work at least until your assignment is graded. If it doesn't work, you'll receive no credit. (Interaction Flow, Use of Data in Prototype)
  • The PDF of your development plan that you submitted last week. (Goals)
  • The PDF of your updated development plan. (We recommend making a Google spreadsheet and saving it as a pdf; this gives you a snapshot for comparison.) (Updated Development Plan)
  • A ~2-sentence description of the task you'd like us to try. This should include any needed login/password information. (Supporting Info)
  • The shared Github URL for your project. (Supporting Info)

Note: since we may grade your assignment up to a few days after submission, per the honor code, we expect that the prototype URL show the state of your prototype at the time of submission. You will very likely be updating your prototype after submission, but please do so on another version.

Submit your formatted pdf here

Evaluation criteria & Grading rubric

Category Nope Weak Proficient Mastery
Interaction Flow
4 points
0: No pages are connected and interactive. 1: Few pages are connected interactive. 3: Most pages are connected and interactive. 4: Overall flow and navigation are complete. Pages are fleshed out and interactive.
Reading data w/JSON & Handlebars (or equivalent)
3 points
0: No pages read JSON data with Handlebars (or equivalent). 1: A few pages read data. OR header/footer included programmatically, as opposed to copy&paste (either sufficient). Handlebars were used only sometimes. 2: Most pages read JSON data OR login/other rich interactivity implemented (either sufficient). Handlebars were used. 3: The entire prototype uses Handlebars to read JSON data and deliver rich interactivity.
Goals Met
4 points
0: No goals were met. 1: Only a few goals or equivalent were met. 3: Most, but not all, of the goals or equivalent were met. 4: All goals or equivalent were met. Stretch goals need not be met.
Development Plan: Quality & Updates
3 points
No updates to plan. Aspects of the plan remain are not actionable or overly vague; changes were insufficient. For example, "working on the home page" is much too vague as a line item :)
And/or only one member did the majority of the work.
Plan is mostly updated, but is lacking some detail or deadlines seem unreasonable. Only two members did the majority of the work, excepting external constraints that were identified. Plan items are comprehensive and actionable (like "Implement allergies as a search parameter"). Plan reflects progress, new tasks, and any changes to previous tasks. All three members contributed by taking into account external constraints and thoughtfully distributing workload.

Supporting Info
1 point.
Github Repo URL & 2-sentence task description present.

Outside the Box
1 pt. Reserved for unusually impressive submissions.
Pages are complete and all functionality is in place. Weekly stretch goals are met. The team is way ahead of the curve with respect to the interactions in their application.