Major Projects

Project One: Onboarding

Project Description

You will create a 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 progressively enhanced page using at least two media queries
  • Apply design principles including typography, color, and material design
  • Engage in agile, iterative development; documented with plenty of commit comments

Deliverables & Milestones

  1. First Deliverable: Create a Basecamp post describing your work in progress. Title the post with your name and project number (example Daniel Krieglstein: Project 1). Your post should include:
    • The URL to your GitHub repository, and the URL to your Github Pages live link
    • Two questions eliciting feedback on from fellow students
  2. Second Deliverable: Give constructive comments to help at least three other students.
  3. Third Deliverable: Edit your original Basecamp post under Project 1 by fixing your code based on feedback from the professor and fellow students. Additionally, add the following:
    • Add a 3-4 sentence self-critique memo of your project and your progress in class to this point

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.
  • No code-generators like WYSIWYGs, Bootstrap, or other off-the-shelf 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
  • Must pass HTML and CSS validators!
  • 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. Meyers, and the Form section of Normalize.
    2. 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 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. GitHub repository must contain only the files and commits from this project

Project Two: Redesign THIS Website!

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 students will redesign this website. Additionally, you will add a compelling log in page, as if this were an on-line course for sale. Your redesigned should employ sound principles of human-computer interaction, user experience, and emotional design.

Project Goals

  • Conduct a task analysis for creating a user-centered design
  • 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 work-flow on GitHub, via pull requests and code reviews.

Deliverables & Milestones

  1. Lab 5 Whole team: Create a group or join a group on Basecamp Project 2: Group Sign Up. Groups should be 3 people each. Group names should be creative. Each group member should list their GitHub username and one team member should be chosen to initiate lab 5.
  2. First Deliverable: Task Analysis Whole Team: Create a Basecamp post describing your work in progress. Title the post with your team name and project number (example: Team Wonder Women - Project 2). Your post should include the full names of all team members, and a screen-by-screen task analysis of your redesign. Use screen shots and simple text to explain your plan of action.
  3. Second Deliverable: Whole Team: Update your project 2 Basecamp post with the URL to your group GitHub repository, live link (GitHub pages), and two questions eliciting feedback from fellow students.
  4. Comments: Individual: Give constructive comments to help at least three other teams.
  5. Final Deliverable:Whole Team: Revise your team Basecamp post under Project 2 to add links to each member's individual fork of the group GitHub repository. Individual forks should include README.md files with following:
    • A 3-4 sentence self-critique memo of your project and your progress in class to this point.

Requirements

  • All source files in UTF-8/Unicode character encoding.
  • No code-generators like WYSIWYGs, Bootstrap, or other off-the-shelf 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.
  • Must pass HTML and CSS validators!
  • 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. Meyers, and the Form section of Normalize.
    2. 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 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.

Project Three: User-Tested, Revised Web Portal

Project Description

The final project of the course asks you to subject your group’s redesign project to a series of low-stakes user tests, and to suggest improvements to the website, based on what you learn through your user tests.

You should structure your tests around the guidance in Chapter 9 of Krug’s book. You are welcome to use as a starting point his sample script and recording release form available at Krug’s website. However, your script must be modified to match your specific project and tasks, obviously.

Project Goals

  • Evaluate user interface designs with human subjects.
  • Demonstrate how user-centered concerns can be incorporated into system development life cycles.
  • Explain the need to evaluate system usability.
  • Conduct usability tests on mobile and traditional devices.

Deliverables & Milestones

  1. Create a Basecamp post for the group describing your work. Title the post with the same group name and project 3. Your post should include the names of your group members and the following:
    • Testing script with a welcome to your participant, an explanation of the process, and an outline of the exact tasks you will be asking participants to complete.
    • Testing notes + 3 major issues per participant.
    • A group-authored recommendation report on the three most pressing issues identified through your testing, including:
      • an explanation as to why the issues you’ve selected are most pressing.
      • possible approach to implementing fixes/improvements to address the issue.
      • future usability tests you’d run to ensure the quality of the fix.

Requirements

  • Test your site with three different participants not in our class. At least one participant should use a mobile device (phone or tablet); at least one should use a traditional device (desktop or laptop)
  • When possible, have participants use their own devices (but have a backup device ready to use)
  • Figure out how to best involve online students in your group who cannot be present on campus for testing; include those details in your site plan