Major Projects

Project One: Onboarding Due Friday, March 3, 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 3, 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

Requirements

  • 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, April 12, 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 steps 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 students complete through MyIIT). Your redesigned portal should be designed and developed according to sound principles of human-computer interaction, user experience, and emotional design.

Project Goals

  • Conduct task analysis and apply the information gained to a user-centered design
  • Build interface modules/elements from a basic design foundation of alignment, contrast, proximity, and repetition
  • Apply design principles including color/material, typography, accessible media, and grid-based design
  • Execute a progressively enhanced, touch-friendly, mobile-first responsive design focused on system users and tasks
  • Write informative text content; catch error conditions and guide users accordingly
  • Experiment with design and interaction patterns for pleasing user experience
  • Engage in agile, iterative web design and development within a team-based workflow on GitHub, via pull requests and code reviews

Deliverables & Milestones

  1. Whole team: A screen-by-screen task analysis of your chosen MyIIT task (again, e.g., generating a class schedule, dropping a class, paying a tuition bill, removing a registration hold) posted to Basecamp, with relevant anonymized screen shots (black out any personally identifiable information). Post to Basecamp (due no later than March 22, 11:59pm CT).
  2. Whole team: A video presentation of your team’s work in progress, hosted on YouTube, Vimeo, or another similar service and posted to Basecamp. Your Basecamp post should include the URL to your team’s 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 April 5, 11:59pm CT).
  3. Each team member: Substantive comments critiquing at least three other team projects (by April 10, 11:59pm CT).
  4. Each team member: an email to the instructor containing the project’s three final deliverables (by April 12, 11:59pm CT):
    1. A 4-5 sentence self-critique memo of your project and your progress in class to this point
    2. A 2-3 sentence critique of each group member’s work on the project
    3. The https:// links to your individual and group GitHub repositories

Requirements

  • 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 all 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. Valid 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); consider also the Normalize.css styles for forms
    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. Whole team: A shared team Git repository with frequent commits from each team member and meaningful commit messages that accurately reflect each set of changes
    2. Each team member: An individual Git repository with feature branches, frequent commits, and meaningful commit messages that accurately reflect each set of changes that you make, including experimental work that you ultimately might not push upstream to the shared group repository
    3. All GitHub repositories (team and individual) must contain only the files and commits from this project
    4. Use of the command-line Git program on your computer; no commits made through the GitHub web interface (this isn’t kindergarten), apart from merge commits created as part of code reviews/pull requests

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.