Skip to content

Latest commit

 

History

History
654 lines (544 loc) · 40.4 KB

syllabus.md

File metadata and controls

654 lines (544 loc) · 40.4 KB
Raw

Designing for Data Personalization Syllabus

Overview

  • Instructor - Sam Slover (email: slover@nyu.edu)
  • Office Hours - Wednesday 7-9 and Thursday 5:30-6:30 (these Thursday office hours should be for last-minute trouble-shooting and bug fixes); Signup at Google Calendar
  • Group/Listserv: Go here and click "Subscribe to this group"

Description

The world is awash with new data, but how can designers take the next step to make this data more meaningful in people's day-to-day lives and interactions? Put differently, instead of giving people yet more data and visualizations to interpret, how can we personalize this data to provide simple insights that more intimately connect with what an individual really cares about?

In this class, we'll examine how personalized design can give people more meaningful and pleasant experiences with their data interactions. We'll explore how new technologies and designs are implementing these personalization strategies and how they're being successful (or not). We’ll learn how to model, generate, and store our own datasets; how to build our own APIs; and ultimately how to design meaningful applications and experiences around this data.

We will do so by designing 2 core applications or experiences over the course of the class:

  1. Midterm project - Designing a new (playful) interaction around a dataset that you find personally meaningful (the most important consideration for this project is that it is a dataset that you find personally interesting). This dataset can be from an existing source or you can create it.

  2. Final project - Designing around your own data (as designing for the self is often the best starting place). Over the course of the 2nd half of the class, you will build an API around a personal dataset that you want to track and better understand, and then will design an application or experience around your personal data (personal data can include community data, like ITP).

Students will learn techniques on how to work with existing Web APIs, how to build and use their own Web APIs (with Node.js and Mongodb), and will implement user-facing designs utilizing p5.js and other Web technologies. Class examples will be presented in Javascript. Javascript tutorials will be assigned as a pre-requisite for those with little to no Javascript experience.

Objectives

By the end of the class, you should have a solid understanding of the following concepts:

  • Full-Stack Javascript - Familiarity with both client-side and server-side Javascript.
  • Designing Data-Driven Applications- How to design and build a 'full-stack' data application.
  • User-facing Web design & data visualization concepts - How to design and build user-facing interfaces & visualizations that effectively communicate data.
  • Designing Personalization Systems- How to design systems that can collect user information and personalize data.
  • Using APIs - How to interact with and use an API from within your client application.
  • Structuring Data - How to intelligently structure data.
  • Storing Data - How to build systems to store your own data.
  • Building APIs - How to build your own APIs and make the data available to client applications.

Grades

Grades will be determined according to the following breakdown:

  • 2 Main Projects (Midterm and Final): 50%
  • Participation and Attendance: 25%
  • Weekly Assignments: 15%
  • Group Project: 10%

Class Blog

It is expected that everyone in the class will create and maintain a blog for their assignments.

Email slover@nyu.edu with a link to you blog. I will add it to a list here:

Listserv

We will use a listserv both to conduct discussions outside of class, and for any technical help questions. Please email the listserv with all technical help questions (often, someone else will have a very similar question, or will at least find the answer informative).

Go here and click "Subscribe to this group"

Laptops

This class covers numerous Web programming topics, and as a result, we will use laptops extensively throughout class time. However, use of the computer outside of class topics (for example, chatting on Gmail or checking Facebook) is disrespectful and repeated violators will be asked to leave the classroom.

Also - while your classmates are presenting, it is mandatory to put your laptop lid down and focus all of your attention on your colleague's presentation.

Weekly Assignments

We will have small weekly assignments that build on material presented in class. It is expected that you post all assignments to your blog, and come prepared to talk about your work (and respectfully engage with your peers when they are presenting).

Attendance

Attendance is mandatory. You must inform me via email if you are going to miss a class. Habitually showing up late for class or an excessive number of absences will adversely affect your grade.

Class Participation

Class participation is a critical part of the class, and (along with attendance) makes up 25% of your final grade. We expect pro-active participation and feedback throughout class discussions and presentations.

Group Projects

Starting on the 3rd class, we will have weekly group projects. I will divide the class up into groups and each week one or two groups will give a 15-minute presentation.

You can pick from 2 topics (although if you are really enthusiastic about doing something else, you may propose it):

  • Topic 1: Design Presentation/Critique - Pick a technology (hardware, software or service), project, or theme that relates to the overall topics in the class: designing around personal data; data personalization; data tracking; physical data installations. See Week 1 "Design Topic: Examples & Inspiration for the class" for examples of the types of services you could evaluate.

    • Make a presentation that covers what the technology/service/project/theme is, what is novel about it, how are people using it and so on.
    • What do you like about it? What would you do differently?
    • Notice their design decisions (user experience, interactions, etc.). What is effective? What is not?
    • Are there are any privacy concerns? Data Limitations?
    • Does it fulfill its promise? Where could you see it going in the future?

  • Topic 2: Quick and dirty visualization project - compile a dataset and visualize it! - Pick a dataset that you want to compile as a group (you can manually collect it). For example, the average # of dishes left in the ITP sink at different times, noise levels on the ITP floor at different times, style trends spotted on the L train (septum piercings vs sleeve tattoos vs no socks), etc. It can be anything you find interesting and worth compiling/visualizing.

    • Compile the dataset using any process that works for you (just be prepared to present your process) -- pen/paper, Google Spreadsheet, tallies on a notepad, App connected to a database, etc.
    • Visualize the dataset in a way that helps relay its key themes and insights -- pen/paper, basic Web dashboard, 3D print, P5 sketch, performance, game, etc.
    • Present your project: why did you choose the dataset? what was interesting about it? how did you compile the data? what were your hypotheses? how did you ultimately design around the data? what were your key learnings? what were some challenges?

Javascript Resources

For those who may not have prior experience with Javacsript, it is strongly recommended to do some outside tutorials. The following are a list of suggested tutorials:

Client-side Javascript:

Server-side Javascript

HTML/CSS Resources

While not specifically required for the class, you may find the following tutorials helpful in building your projects.

Week-by-Week Topics & Assignments

Week 1 -- Introduction, Welcome to the Web: HTML/CSS Primer, JSON

BREAK

Week 2 -- Going deeper into Web - design, JS strategies, JSON 101

BREAK

Week 3

BREAK

Week 4

  • Group Presentation 2
    • Joy
    • Eve
  • 1-minute round-table: topics for midterm
  • Designing around Data - Colors, Typography and more.
  • Finish p5js examples. Creating p5js objects.

BREAK

  • Implementing Charts with chart.js

  • Custom chart demo

  • Assignment Week 4: Work on Midterm

    • Design a new (playful) interaction around a dataset that you find personally meaningful. This dataset can be from an existing source or you can create it. 2 primary options:
        1. choose an existing dataset that is personally important to you (and that you want to design around in a novel way);
        1. create a dataset by tracking it for a week or two (it could be your own data, community data, or any other dataset you want to newly create).
    • Requirements:
      • Build a working interactive Web page or other experience/application that helps relay the key themes you want to highlight in the dataset
      • Write a blog post that includes the following:
        • A brief description of the data you chose, why you are interested in it, and what you wanted to express to the user.
        • A sketch or wireframe of your concept.
        • The color palette and fonts that you are using, any other options you were considering, and why you made these choices.
        • Any next steps you think would be interesting for the project.

Week 5

  • Group Presentation 3
    • Katie
    • Xiqiao
  • Design topic: Isotype (picture language)
  • Finish Charting example
  • Custom chart demo

BREAK

Week 6

  • Midterm Student Presentations: Designing a new (playful) interaction around a dataset that you find personally meaningful
  • Assignment: install everything needed for server-side JS

Week 7

  • Group Presentation 4
    • Gustavo
    • Ian
    • Xingjian
  • Midterm Presentations from:
    • Ian
    • Leslie
    • Xiqiao
    • Skylar

BREAK

Week 8

  • Field trip!
    • You need to come to Pirch SoHo by 6:25pm. It is down the street from ITP (10 minute walk): 200 Lafayette St, New York, NY 10012
  • Group Presentation 5
    • Jamal
    • Yiting

BREAK

Week 9

  • Group Presentation 5
    • Anne
    • Ondina
    • Joakim
  • Design Topic: Onboarding!
    • Oscar Health
    • Poncho
    • Yummly
    • Sage Project

BREAK

  • ITP Directory Example

  • Topics:

  • Simple AJAX Example:

    • Interacting with a node-express-mongoose app using AJAX and Google's geocoder:

  • Using npm libraries

    • Geocoder example in above app

  • Assignment Week 9:

    • This week, you must complete a fully working data app that has the following features:

      • Has your own data model

      • Has at least 5 routes:

        1. Create (via a form POST or via ajax POST)

        2. Retrieve One (by ID or some other parameter)

        3. Retrieve All

        4. Edit (via a form POST or via ajax POST)

        5. Delete

    • The above routes should use the methods from the Mongoose.js Cheat Sheet

    • This week, you must also come up with your final project proposal. You should propose 1-2 datasets you want to track over the final weeks of the class. This can be personal data, community data, or any other dataset you want to track and then visualize. For your final, you must show data that you've collected, expose it as an API, and design a personally meaningful application or experience around it.

    • That said -- if there is another project idea you have in mind that fits the themes of the class, please propose it.

Week 10

  • Guest speaker
  • Group Presentation 6
    • Yan
    • Nilomee
  • Student Presentations: Present Your Final Project Proposal --> Designing around your own data
  • Search query route
  • Simple AJAX Example:
    • Interacting with a node-express-mongoose app using AJAX and Google's geocoder:
  • Using npm libraries
    • Geocoder example in above app

** BREAK **

Amazon S3 for file/image storage

Twilio for SMS

Assignment - WORK ON YOUR FINAL PROJECT

Week 11

  • Group Presentation 7
    • Skylar
    • Soy
  • AWS for image storage (continued)
  • Twilio (continued)

** BREAK **

  • Socket / Live Data
  • Setting up Social Services (NPM)

If you are interested, dig in on your own:

  • Going beyond the browser. Data on Physical Devices & Objects (hello Arduino Yun!)
  • If time permits. More Complex Server/Mongoose commands - Layout, Subdocuments sort, where

HOMEWORK - FINISH YOUR FINAL PROJECT

For your final project, the following are requirements:

  • You must create a working project that you demo in class.
  • The project should have 2 public links:
    • Project demo
    • Github link
      • If you've never pushed a repo to github. Here's the deal:
        • Sign in to your Github account
        • Click "New repository" in top right (the + sign)
        • Give it a name and description and click Create
        • Then, in terminal, enter the 2 commands in the 2nd box ("push an existing repository from the command line"). Or, if you've yet to start tracking it with Git, then go with the 1st box ("create a new repository on the command line")
        • Refresh the page and you'll see your repo
  • You must document it on your blog:
    • What data did you decide to work with? Why were you interested in this data?
    • What were your key design considerations?
    • What are some of the key technology processes you used? What was interesting or tricky?
    • What are the key takeaways for yourself or for your target audience? What did you want them to get from your project?
    • Where else could you see this project going?
  • You must email me a link to the blog post, project demo, and github repo.

Week 12

  • Student Presentations - Final Project