Major Projects

Project One: Onboarding Due Wednesday, March 1, 11:59pm CT

Project Description

You will create a compelling single-page design that features a sign-up process to get new users to join some type of project, such as an email list, a software beta test, or an open-source community. Focus on designing for an effortless, engaging entry of personal information; and friendly, frictionless client-side tests and alerts for malformed, missing, or incomplete information. The goal of this project is to experiment with patterns of interaction that persuade someone to sign up for whatever it is you’re offering, which is not at all an easy task.

Project Goals

  • Create a touch-friendly, mobile-first responsive web design
  • Experiment with design and interaction patterns for pleasing user experience
  • Design and execute a progressively enhanced page focused on system users and tasks
  • Apply design principles including typography, color, and material design
  • Engage in agile, iterative web design and development, supported by version control

Deliverables & Milestones

  1. A video presentation of your work in progress, hosted on YouTube, Vimeo, or another similar service and posted to Basecamp. Your Basecamp post should include the URL to your GitHub repository. Include in the text of your post one or two specific things you would like feedback or help on from the instructor and other students in the class (due no later than February 8, 11:59pm).
  2. Substantive comments critiquing at least three other student projects. (by Febraury 15, 11:59pm CT)
  3. An email to the instructor containing the projects two final deliverables (by March 1, 11:59pm CT):
    1. A 4-5 sentence self-critique memo of your project and your progress in class to this point
    2. The https:// link to your project’s GitHub repository


  • Project must be built with only one valid well-formed HTML file, one valid CSS file, and one JavaScript file.
  • All source files in UTF-8/Unicode character encoding with Unix-style line endings (LF)
  • Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf HTML or CSS frameworks)
  • HTML, CSS, and JavaScript files should both be indented with 2 spaces per level of indent; indent all CSS style rules inside the declaring block, and further indent all rules and blocks inside your media queries
  • HTML requirements:
    1. Only structural, semantic uses of HTML elements and attributes. Absolutely no table markup, break tags, or any other use of HTML to achieve a particular page layout.
    2. At least three HTML form elements, written in conjunction with <label> tags and the for attribute
    3. Semantically structured text-based HTML content to accompany any media elements (image, audio, video)
  • CSS requirements:
    1. CSS file should open with a set of reset styles (such as the minified Eric Meyer resets from class demos)
    2. Only relative units (em, rem, vm, %) in your CSS; no px, pt, or other absolute units allowed
    3. Use at least two min-width media queries to enhance your mobile-first styles for larger screens
  • JavaScript requirements:
    1. JavaScript that throws no uncaught errors and is loaded unobtrusively (no JavaScript event attributes in your HTML, in other words; attach events to any elements requiring interaction)
    2. JavaScript that uses function closures and other techniques to avoid polluting the global window namespace
    3. JavaScript that uses only asynchronous methods and callbacks
  • Git requirements:
    1. A Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
    2. Use of the command-line Git program on your computer; no commits made through the GitHub web interface (this isn’t kindergarten)
    3. GitHub repository must contain only the files and commits from this project

Project Two: Web-Portal Redesign Due Wednesday, March 22, 11:59pm CT

Project Description

Some of the very worst designed websites you’ll come across are for banking, credit card payment, HR portals, and other non-optional websites for certain classes of customers or workers. Self-selected teams of 3-4 students will redesign the MyIIT login page, the welcome page/tab, and all necessary pages for achieving a specific student-user task (some examples: generating a class schedule, dropping a class, paying a tuition bill, removing a registration hold, or any other task that you achive through MyIIT as a student). Your redesigned portal should be designed and developed according to sound principles of human-computer interaction, user experience, and emotional design.

Project Three: User-Tested, Revised Web Portal Due Wednesday, May 3, 11:59pm CT

Project Description

The final project of the course asks you to subject your group’s Web Portal Redesign project to a series of low-stakes user tests, and to make agile, incremental improvements to the Web Portal Redesign project based on what you learn through your user tests.