6.S063 Design for the Web: Languages and User Interfaces

↑ All assignments

Assignment 9


Submitting your homework

We are going to use Github Classroom for this assignment. You need to have an account on GitHub and be logged in. Authorize Github Classroom here and accept the assignment, then follow the instructions there. Please follow the structure and naming of the starter repo, though you can add any additional files if you need them.

To submit the assignment, please visit Canvas and submit the URL to your final commit that you want us to grade. A commit URL looks like https://github.com/designftw/hw9-username/commit/b59f14ba05869b3067724aa6d2006667a54c8e7d. You can submit as many times as you want. This is important. Your homework is not submitted and is accruing slack hours until you do this!

To make sure your homework is graded correctly, please follow the following:

If you submit after the deadline, it will count towards your slack hours.

Exercise 1: Iterate and implement a Balsamiq/Figma mockup of your Chat/Messaging App (45%)

In HW8, you user tested your paper prototypes. You should now have enough information about which features from each prototype work best to create a medium fidelity prototype.

For this, we will be using Balsamiq or Figma. If you'd prefer another tool that's fine, but make sure it allows you to create interactive prototypes, not just vector graphics.

This mockup must look like your intended user interface. You should also include some interactivity to allow users to interact with this mockup. Just like a paper prototype, you do not need to include every part of the interface.

You will later be conducting user testing on this prototype and in HW10 you will implement a high fidelity prototype of your Chat/Messaging App in HTML and CSS.

Deliverable: An HTML page in prototype with a video showcasing all parts of your mockup that you prototyped. Include a short description of your improvements (compared to your paper prototypes). Please also include the Balsamiq or Figma source files in the same folder.

Exercise 2: Improve Typography on your website (10%)

Use what we learned this week to improve typography on your personal website from past homeworks. Make at least 3 improvements and point them out in a short writeup (~1 sentence for each improvement).

Deliverable: Entire website in homepage. Short writeup in homepage/writeup.html.

Exercise 3: Making a personal tracking application (45%)

Personal tracking applications are useful for keeping track of things about oneself, e.g. mood, medications taken, menstruation start and end, migraines, and many more. While certain things such as sleep, or some kinds of exercise can be tracked automatically, the vast majority of things that people need to track about themselves (or their loved ones, e.g. kids, partners) are tracked manually. In this exercise, you will create such a simple manual personal tracking application that stores its data to GitHub.

In the skeleton we have provided an extremely bare bones tracker where each entry just contains a date and a notes field. There is a button to add new entries and a button to save. Data is "saved" and loaded from a <pre> element instead of a server. No CSS has been included at all.

  1. First, decide what kind of tracker you want to build. Give it a name, and some style relevant to its purpose.
  2. What fields would you need to keep track of for each entry? For example, for a migraine tracker, you would likely need a date & time the migraine ended, an intensity field (e.g. 1-5), and a field for the location of the migraine (left, right, both, etc.). It's ok to simplify the fields you need to track to make the task simpler for you, however your tracker should include more fields than the date and notes of the skeleton. If built-in form fields are not sufficient for your needs, you could use custom elements too (e.g. take a look at Shoelace), but be careful because not all custom elements out there work properly with forms. You can modify the HTML of the skeleton as you see fit, it is there to help you get started.
  3. Include CSS to make this tracking application usable. Make sure you test on smaller screens too, a tracker that can only be used on a large screen is of very reduced utility.
  4. Use madata.dev to store your data in a data.json file in the tracker folder of your hw9 repo, instead of "storing" it in a <pre> element. Similarly, when the page loads, data should be read from that same data.json file instead of the hardcoded contents of the <pre> element. Keep in mind that since this is a private repo, the user will need to log in first to access the data (though this may just happen passively at startup if the user has logged in previously).
  5. You need to provide authentication UI. Madata offers asynchronous methods to make this easy for you. At a minimum, this UI should provide a way to log in, log out, and indicate whether you are logged in and who as.
  6. Whenever asynchronous tasks are running, you should provide feedback to the user about what is happening (the details are up to you). Consider what happens when the user tries to interact with your application while a task is running, and make sure this does not result in bugs.

While most trackers out there include things like calculations, visualizations, or data entry shortcuts, these are out of scope for this exercise (but you are welcome to go further if you want!).

You cannot use Vue or the <ma-data> component for this exercise, the focus is to get familiar with Promises and async/await, and vanilla JS is the best way to do that. Asynchronous JS is often useful in conjunction with Vue or other frameworks, but that would require a much more complex application.

Deliverable: Your tracking application in tracker/. Make sure to save a few entries, so that tracker/data.json is not empty.

Exercise N: HW9 feedback

Since this is a new class, we need your constructive feedback about every aspect of it: lectures, homeworks, labs etc.

Please fill in your feedback about HW9 in this form. You can edit it as many times as you like until the survey closes (48 hours after the homework deadline). Since this is part of your participation grade, it does not affect your slack hours, but failing to submit the form on time, could result in a lower participation grade.

← Assignment 8 Assignment 10 →