[The workload for the rest of the assignments will ramp up significantly since you will need to start writing code and working toward creating a fully-functional web application. Please plan accordingly and get up to speed on web programming by working through the code labs.]
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.
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 to give us an idea of how you expect users to interact with it.
For now, you do not need to worry about aesthetics for either screen. These are important to help you organize your app and decide how you would like to implement it in code.
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 that 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.
After creating the full skeleton of your app (Step 3), you will create the home page (the first page you created a wireframe for) in HTML/CSS/JavaScript code. Then, you will flesh out one more major screen (the other one you created a wireframe for) by adding in all the details of that screen. Add the content and set up the functionality that will be required on those pages. For example, if the functionality includes an upvote button, you should create the button, though the upvoting functionality does not need to work yet (though you're always encouraged to get extra work done early if you want). Remember, when functionality is peripheral to your web application, you may Wizard of Oz it. See the FAQ for guidance.
Refer back to your labs for HTML, CSS, Bootstrap, and JavaScript help. Lab 1 is also helpful for understanding how to keep good source control habits with your team on GitHub. We recommend that you create a public GitHub repository for your code right now, since in later assignments, you will be required to have a public repository for your TA to grade your code.
Write 3-4 sentences summarizing how well your project fits your studio's brief, why, and the 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.
The prototype is a very powerful tool, but it can also be a nightmare to implement and demonstrate to a client. Often they will approach it like they would a finished product, and expect every link, every tool and every function to work. If it did....we may as well just build the final product, and it can be hard to find the balance.
Always remember; a prototype is a mock up, it’s to test a solution. Prototypes can be incredibly comprehensive, or very basic - it depends on what you want to test. However, make sure it is clear - using comment bubbles, instructions or tool tips - what functionality you are trying to test.
DON’T tell a user how your application is supposed to work, of course....a good prototype will be intuitive. We have experienced "spot-the-click" with some users, who will simply move their mouse around until the pointer turns to the tell tell finger appego, a working link! Users will often work their way along a navigation bar in a prototype, clicking each button from one end to the other.
Make sure that your application isn’t going to throw an error because you forgot to implement a holding page - make it feel real, even if it’s not! If you have an online store where only one product works for testing purposes, make sure that is clear to your user.
-- Mike Davison, UX Project Manager
For this assignment, ONE person will submit the assignment for their team, listing every team member's name and student ID number (PID) in the assignment submission.
Your write-up will contain the following in one single PDF:
Submit your single formatted PDF in Gradescope.
The rubric below contains criteria that are worth one point each and will be graded independently and in a binary fashion.
During studio, click here to self-assess your team's work as a collective unit.
During studio, click here to assess how each of your teammates contributed to this assignment.