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

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/hw6-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:

• Please make sure each of your exercise directories are self contained, i.e. that you don't reference any files outside of the directory (e.g. from your repo root or other exercises). While having a common assets directory for all your exercises might be a good idea in general, we extract each exercise directory separately (as it may be graded by different people), and that will result in your pages not working correctly.
• Do not use root-relative URLs (URLs that start with /) or absolute localhost URLs, as these require the grader to run a local server at a specific directory within your repo. If for some reason you cannot avoid it, please document it in a README otherwise links may be broken for whomever is grading your homework.

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

Exercise 1: Make your homepage more universal (30%)

Now that you've learned how CSS can help make our designs more universal, put your new skills to good use by improving your website!

Ensure that your website that you worked on in HW1/ex2 and HW5/ex1 is:

• Mobile-friendly (10%)
• Adaptable to multiple viewport sizes (10%)
• Print-friendly (5%)
• Translatable. We will translate your website to a couple non-Western languages (e.g. Arabic or Japanese) via Google Translate, so make sure the CSS can handle this. (5%)

Exercise 2: Needfinding for chat/IM apps (40%)

This assignment begins a series of steps which will culminate in you implementing a chat/messaging app, following an iterative design process of progressively more high fidelity prototypes and eventually an implementation.

You might decide to design a messaging app for the general population, or something optimized for a particular use case (e.g., discussing a sporting event in real time) or user population (e.g., students enrolled in 2.70 at MIT). It's ok if you are part of the target user population (but you cannot interview yourself).

In HW5 you were asked to compare the usability of several existing chat apps. In this exercise, you will be doing needfinding to see what needs people have from the chat apps they use, and what their pain points are.

You may already have a feature in mind that you want to implement. How does this align with the idea that you are supposed to do needfinding before you design? Well, you've probably come up with that feature by imagining some need that the feature would address. In this case, your user population would be "people who have that need" and your needfinding process would aim at (i) confirming that there are indeed people who have that need and (ii) learning more about the details of that need---as it may turn out that your imagined feature isn't the best way to address it.

Part 1: Interview questions (10%)

Create a list of at least six meaningful starting questions specific to your use case (i.e., not the basic demographic or education questions) that you will ask people in your interviews, taking the advice on needfinding into account. You don't need to adhere to them slavishly during your interviews, it's fine to go a different direction based on the conversation. This is known as a semistructured interview.

Part 2: Interviewing (15%)

Interview at least three people, and record your interviews (you'll find you need to revisit them to fill gaps in your memory). You need not transcribe the interviews word for word, but take detailed notes on what they say.

Part 3: Key Insights (15%)

Examine your notes to distill 5-10 most-important conclusions from the notes you took.

Exercise 3: Idea generation for chat/IM apps (30%)

Based on your needfinding, identify at least two needs you could address with your chat app. Then, for each, generate at least two ideas for how you could address these needs, ideally a lot more (remember: quantity over quality!). For each, create sketches to illustrate your ideas (these will also be useful in HW7 when you do paper prototyping), and accompanying text describing the need, the proposed solution, and why you think it will work.

For example, here are some ideas to seed your creative process.

• Add some organizational mechanism such as folders or tags to let users save some messages for later finding.
• To assist coordination, indicate that certain messages require replies from certain participants, and make sure users can find/interact with messages that require replies from them.
• An app for illiterate users that delivers voice messages
• Configure automatic replies to all or certain messages (e.g. "I'll be afk until 4pm and will respond then")

These are just for inspiration; do not use them same ideas for this exercise unless you develop them significantly more.

A Note on Scope

The ideas you present should not be tiny ("use a better font for improved readability"). Also, since you will ultimately be aiming to implement these ideas, they should not be too large ("an online discussion and voting system for state government budgeting"). Instead, you should think on the scale of adding features to what is still at its core a traditional messaging application. These added features are may only partially address the need you've identified. You are encouraged to confer with LAs regarding the scope of your ideas before you flesh them out.

Exercise N: HW6 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 HW6 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.