Major Projects

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. 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 mobile-first responsive web design using two media queries
  • Apply design principles including typography, color, and material design
  • Engage in agile, iterative development; documented with at least 20 commits with informative 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
    • Screen shot of your html and css validations
    • Two questions eliciting feedback on from fellow students
  2. Second Deliverable: Give constructive comments to help at least three other students.
    • Post a screen shot of your three comments to the comments folder in your personal Basecamp folder.
  3. Third Deliverable: You will receive a list on your Basecamp post of required fixes from the professor. Fix your code and edit your original Basecamp post with the words "FINAL TURN IN"

Requirements

  • Project must be built with only one valid well-formed HTML file, one css reset file, one user CSS file, and one JavaScript file.
  • All source files in UTF-8/Unicode character encoding.
  • Do not use any pre-build code or frameworks. Write it all from scratch.
  • 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
  • CSS requirements:
    1. One css file for resetes (Meyers and the Form section of Normalize). A second css file for your unique css code.
    2. Use at least two min-width media queries to enhance your mobile-first styles for larger screens
    3. Much of your grade depends on design principles of typography, color, and material design that are discussed in this class. Make sure to demonstrate some grasp of these concepts.
  • JavaScript requirements:
    1. Add at least one interactive JavaScript feature. Interactive means something other than changing class="nojs" to class="hasjs".
    2. JavaScript must load and achieve the intended behavior.
    3. No JavaScript loaded directly in your HTML file)
    4. Use the asynchronous attribute to attach JavaScript within your html head
  • Git requirements:
    1. A Git repository with at least 20 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 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 a website assigned in class. 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
  • Select 3 page of the website to redo. Two content pages and one process page. The process page should be a html form page. Like a sign up page or a purchase page. One content page should be the home page.
  • 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:

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 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