A4: A skeleton and a plan – DUE Wednesday, Nov. 1 @ 12:30am
[The workload for the rest of the assignments will ramp up significantly since you need to start writing code and working toward creating a fully-functional web application. Please plan accordingly and get up to speed on frontend web programming.]
Step 1: Make a Development Plan
Using a Google spreadsheet, create a development plan for building your interactive app prototype. Provide a detailed plan for the next three assignments (A4, A5, and A6), and briefly summarize goals for the remaining assignments. By the end of A6, you will have a prototype that is interaction-design complete and ready for testing.
Your development plan should show a detailed and comprehensive task list for the next three weeks (A4, A5, A6) and briefly summarize goals for the last three weeks (A7, A8). For each, clearly state what needs to get done, what deadline, and how long you estimate it will take.
Make two task groups: 1) a conservative set that gives you a basic, design-complete application for testing; and 2) a stretch goal that you hope to accomplish. Write your component tasks so they are actionable and can be easily verified. They should be concrete enough for your peers to assess if they have been completed. "Set up results page" is too vague. "Display train times on results page" is better. In addition to basic and necessary tasks, also set stretch goals that you hope to accomplish and outside constraints that could slow your progress (i.e. out of town one weekend, busy with midterms during week 6, job interviews, etc). The exact structure/layout of the plan is up to you; do whatever will be the most clear to readers (such as your TA who will be grading your assignment).
Again, try to make your tasks as specific as possible, and avoid vagueness at all costs. The value of having specific tasks is that they will help remind your team of what exactly needs to be done each week. Tasks such as "Code up a profile page" are not good. Instead, try to write something more specific such as "Display user's username, email, and profile picture on the profile page".
See the Student Examples section for example development plan templates that you can adapt for your own.
Step 2: Wireframes
With your team, create TWO low-fidelity digital wireframes: 1.) the first page of your app, and 2.) an additional page. A low-fidelity wireframe provides the main details about the layout of a screen in your app and the rough information it holds, but leaves out smaller details and styling. You may use PowerPoint, Keynote, or Google Slides to create your wireframe (or use more advanced wireframe/mockup creation software if you like).
In your wireframe, the first page of your app should NOT be a login screen. Assume that the user has already logged in. What does the first page that contains substantial content look like? That is the "home page" you should be designing. It should include suggestions that you found valuable from heuristic evaluators on your paper prototypes (A3).
The second page in your wireframe should illustrate a major screen, displaying the core functionality. The purpose of that screen is to give us an idea of how you expect users to interact with it.
For now, you don't need to worry about aesthetics for either screen. These wireframes are important to help you organize your app and decide how you would like to implement it in code later.
Step 3: Create Skeleton and All Links
Create a webpage prototype of all screens of your app, with one HTML webpage for each screen. Include a complete set of navigation links on all webpages. This means that every link and button is functional; there are no dead ends (i.e. where a user cannot go back) and no dead links (i.e. a non-working link/button). Although the links should all work, the pages they lead to need not be complete or filled with content yet–you can use empty placeholder pages instead. Now you should have a 'skeleton' for your web application.
Make sure your TA can visit your webpage prototype at a public URL and click around to navigate to all webpages within your prototype without getting stuck on any particular dead-end page.
Step 4: Code up Two Screens of Your App
Remember, when functionality is peripheral to your web application, you may Wizard-of-Oz it. See the FAQ for guidance.
Note: Do not put your PIDs on any public documents such as those in your GitHub repository.
Step 5: Revisit the Design Theme
Carefully re-read the design theme for this year. Write 3–4 sentences summarizing how well your project fits this year's theme, why it fits, and what specific users you are designing for.
Here are some examples of development plans. If you want, use File -> Make a copy... to copy over the formatting for each spreadsheet to form the basis for your own plan.
Submit a single well-formatted PDF file for your entire team with the following items concatenated within it:
Submit your single formatted PDF in Gradescope to the bin for your studio section. Only one team member needs to submit on behalf of the entire team.
Evaluation criteria & Grading rubric
The rubric below contains criteria that are worth one point each and will be graded independently and in a binary fashion.
Due In Studio: Teammate Assessment
Frequently Asked Questions
Q: What are guidelines on using Wizard of Oz in our project?
A: The reason we implement things is to learn about how to better design the interaction, not to do busy work. By making your project more realistic, you will uncover design issues that may not be apparent with Wizard of Oz alone. Your final project will be evaluated on the design of the interactions, and you are certain to produce a better interaction if it is more realistic. Good heuristics to decide what to implement:
To make this more concrete, consider the following two examples:
While implementing GPS functionality would take the same amount of effort in both cases, there is a much larger potential payoff for implementing it in the first case because it impacts a much larger portion of the interaction design.
Make sure to think about the easiest way to approximate the functionality you seek. For example, if you need basic phone call or message functionality, you may be able to make something sufficient just by using e.g., <a href="sms:">Send a SMS</a>
Frequently Asked Questions
Q: What web frameworks or open-source tools can we use?
A: Anything you want, as long as you can meet the requirements of each assignment's rubric. Note that the teaching staff may not be able to help you beyond what is covered in the labs, so choose wisely (i.e., make sure the entire group is comfortable with the stack and none of you is burdened to handle things alone). We will only officially support the web stack that we teach in labs, so if you go above and beyond this basic stack, then make sure your team is fully comfortable using your chosen tools.
Q: Where can I find more web development tutorials and resources?
A: As a starting point, check out our web dev resources section.