COGS121: HCI Programming Studio (Spring 2015)


Design Lecture: Tuesdays 2.00pm-3.20pm CENTR 113

Tech Lecture: Thursdays 2.00pm-3.20pm CENTR 113

Required Discussion Sections
Fri 11.00am-11.50am
-Technical #1 (Purvi): CSE 2154
-Technical #2 (Alex): CSB 003
-Technical #3 (Brian): PETER 102

Optional Discussion Section
Design (Adam):
Wed 5.00pm - 5.50pm 

TopHat (Lecture):

Course related communication (all instructors) (TAs and tutors)


Course website:


Nadir Weibel (Professor)

Office Hours: By Appointment in CSE 3224

Adam Mekrut (Head TA)

Office Hours: Tues. 5-6pm in CSB 234 or by appointment

Purvi Desai (Tech TA)

Office Hours: Wed. 11am-12pm in CSE basement

Alex Yang (Tutor)

Office Hours: Fri. 2-3PM in CSE B270 (tentative) or by appointment

Brian Soe (Tutor)

Office Hours: Thu. 1-1:50 PM in The Loft (tentative) or by appointment

Course Description

Cognitive Science 121 is the second course in the HCI sequence and naturally follows COGS 120 (CSE 170). It focuses on interaction architectures, programming techniques, and cognitive and computational principles for designing effective systems. 

We begin by covering the fundamentals of user interface design for web-based systems and quickly move to larger scale design and implementation activities. A major component of the class is completion of a substantial programming project in which students work together in small teams.

The first part of the class (weeks 1-5) will have a dual focus:
  • On Tuesdays' Design Lectures we will learn fundamental concepts, theories and principles for designing effective user interfaces
  • On Thursdays Tech Lectures we will create the basis for being able to implement some of these concepts as part of real web-based applications. In particular we will work with the MEAN stack (MongoDB, ExpressJS, AngularJS and NodeJS) and we will apply concepts from data mining, social computing (exploiting the Facebook/Twitter Social APIs and SDKs), interactive visualization (using the D3 javascript visualization library), and gesture-based interaction (using the web-based APIs for Microsoft Kinect). We will also learn how to use high-fidelity and low-fidelity wire framing tools (e.g. Axure and Balsamiq or others) to rapidly prototype interactive applications.
The second part of the class (weeks 5-10) will focus on a group project (4-5 students per group) that will leverage the technology learned in the first part. We will partner with the DELPHI project at UCSD and exploit the population health data, environmental data, and other data they are collecting to drive the implementation of web-based interactive data visualization applications. The project will also integrate advanced gesture-based interaction to support collaborative access to data.

During this second part, the lectures will focus on a variety of topics that will support you in the development of your projects. This will include:
  • Project Management
  • Multidisciplinary Collaboration
  • Agile Software Development
  • Extreme Design
  • ...
The class will be based on continuous interaction between students and instructor, therefore students are required to have a laptop, tablet, smart phone, etc. for both lectures (Tuesdays and Thursdays) and the Discussion section (Friday).



book cover
book cover
book cover


book cover
book cover

Additional Readings

Selected chapters (see below for every week of class) of the listed books are required readings. I expect everybody to use this as a review of the class content. All required readings are available through the UCSD Library "reserves" system for free. The listed O'reilly books are available in their complete electronic form, although we won't read all of them. However reading additional chapters is highly recommended.

In order to get access to these books through UCSD's library please use this link:

The system will ask you for a password. Please use nw121

Note that you have to be on UCSD campus network or connected through VPN to be able to access the books. 
Here more information on how to access the resources from an outside location:

Although many books are suggested readings, there is no single book that covers what one needs to know to build modern web, mobile and social applications. This situation is further complicated by the fact that the web environment and development tools are rapidly changing. One of the important skills programmers and designers increasingly need today is to be able to quickly locate relevant current material on the web. Selected links to the topics we cover each week will be provided but everyone is encouraged to share links to other useful resources they discover in the discussion page here:

Course Details and Policies


-COGS 120 (CSE 170) and CSE 8A+8B or CSE 11, or consent of instructor 

Communication, UCSD E-Mail, TopHat, Piazza Forum Requirement and Class Material

Occasionally we may need to contact you regarding your homework or some pressing matter.  We may use e-mail, and when we do, we will use your official UCSD e-mail address, as registered in TritonLink.  You are responsible for reading course-related e-mails sent to your UCSD account in a timely manner.

This term we will be using the TopHat system to manage the class. With TopHat you will be able to follow the class on your favorite mobile device, and we will engage you in the class through real-time quizzes and polls. We will also use TopHat for attendance. Every student will have to register for TopHat ($20 for this term, $38 for 5 years). More and more classes and instructors are adopting TopHat and you will be able to use it in other classes too. Our TopHat page for the lecture is available here:

Additionally, we will be using Piazza for class discussion. The system is highly catered to getting you help fast and efficiently from classmates, the TA, and myself. Rather than emailing questions to the teaching staff, I encourage you to post your questions on Piazza. Our Piazza page is available here: Spring 2015 Cogs 121 Piazza Forums.  Your should keep yourself subscribed to these forums so that you automatically receive forum posts as an e-mail.  Note that there is a mobile client for Piazza. 

Assignments, lecture slides, etc. will be posted to the Documents page of the Cogs 121 page and linked from the schedule below. You are responsible to retrieve all the content from there.

If you need to communicate with the Cogs 121 staff please always use the prefix [COGS 121] in your email subjects. There are two distributions lists for this class:
  • Use if you need to reach all the instructors
  • Use if you need to reach only TAs and tutors.
  • Additionally the email addresses of the whole team members are listed at the top of this page

Discussion Sections

Discussion section are a special opportunity for all students to catch up, ask questions, and dive into the details of what has been covered during the Tue/Thu classes. Given the different focus of the Tuesday's Design Lecture (concepts/theories/principles) and Thursday's Tech Lecture (Programming/SDKs, APIs), we will offer two different kind of sections:

  • Technical/Programming Discussion and Quizzes (Fri 11am-11.50am, Purvi (CSE 2154), Alex (CSB 003), Brian (PETER 102): Required): the technical content covered in the Thursday classes will be explained in details in these sections. Assignments 1-4 (due Week 2, Week 3, Week 4, and Week 5) will be presented during discussions. In every Friday's discussion section there will be a "COGS121 Quiz" consisting of a small number questions about the content covered in the Tuesday and Thursday class and in the assigned readings. Quizzes will account for 20% of the final grade.
  • Design/Quizzes/General Discussion (Wed 5.00pm-5.50pm, Adam Mekrut, CSB 003): not Required, but recommended; the content covered in the Tuesday class will be discussed and students will have the opportunity to ask questions and catch up.


The initial assignment of week 1 (Assignment 0, not graded) will create the basic infrastructure and setup to get you started. The 3 programming assignments (Week 2/3/5, due Week 3/4/6), will put into practice the more technical content covered on the Thursday lecture. Technical assignments (0,1,2) can be solved in groups to a maximum of two students, and are due Friday night at 11:59pm. Late turn-in will have a 5 minute grace period, and lose 1 percent of the grade per minute thereafter. Programming assignments will have to be uploaded to heroku and linked through a dedicated Google Form that will be made available for every assignment. Assignment 3 will bootstrap your projects and will be the first deliverable in terms of a prototype for your project team. Assignment 4 will be also solved within your project team.

The application developed as part of your assignments will be published below:

Assignments #1: TBD App List
Assignments #2: TBD App List
Assignments #3: TBD App List

Group Projects
In the second part of the quarter (weeks 5-10) students will have to form teams of 4-5 students. The Cogs 121 instructors will oversee the team formation and ensure that there is a good balance in the programming and design skills of all the team members. Specific datasets will be proposed by the DELPHI team, and Cogs 121 teams will be required to do a project with at least one DELPHI dataset or San Diego County Data Set.

Cogs 121 teams will work towards the development of a project involving the visualization and interaction of the dataset. It is expected to use the skills learned and tools covered during the first part of the quarter. The instructors team will select the three best projects, which will then be visualized in VROOM, on the large wall display at the Qualcomm Institute (Calit2).

Cogs 121 groups will have to turn-in a report on the implementation of the project and present their final product in a final presentation during finals week (06/09/2015, 3pm-6pm).

Every team will be assigned a Tech Mentor who will oversee the project and be the reference point for the team. We will list teams, datasets, and assigned TA below.

Team No.Team NameTeam MembersProject Page / Final ApplicationTA
1The End Users

Kane Chong, Philip Ngo, David Lee, Mayone Rajan, Christian Memije

Leta He, Jamie Yang, Michael Luo, Andie Romero

3Team Thundercats

Royce Gee, Roberto Reyes, Alejandro Buitimea, Marbely Villanueva, Evonee Uribe


Hongyu Li, Collin Styles, Hien Hoang, Elliot Humphrey, Ardavan Amini

5Team Rocket

Sunbrye Ly, Kirk Wong, Daniel Kang, Michael Lee


Nemanja Aksic, Sindre Magnussen, Petter Astrup, Johannes Rieke, Chris Blum


Jonathan Mariano, I-Kuang Liu, Ming Chen, Jiacheng Liu

8 Team Wayde Castillo

Justin Kelly, Rachel Schneiderman, Joshua Miller, Teresa Do, David Canas

9Team Nove

Robert Asami, Michael Du, Nirmit Jasapara, Talia Nassi, Tim Nguyen


Chen-hao Liao, Rachel Kurata, Duy Martin Nguyen, Samuel Ko


David Justo, Wenjia Ouyang, Max Kuang, Sophia Ziogas

12Bachelor Pad

Joshua(Situo) Meng, Mike(huaxiao) Chen, Leon(Shuangli) Zhou, Deagan Monahan, Aurnik Islam
13Tiny Elephants

Andrew Du, Yusi Liu (Doris), Michelle Wur, Phoebe Gao

14Pied Piper

Kimberly Ly, James Natanauan, Joseph Le, Harrison Wang, Eric Cheng

15Team Doge3

Jennifer Lu, Su Kim, Edward Chiou , Alvin Yan



Grading elements [in percent]:
  • COGS 121 Friday's Quizzes [20%]
  • Programming Assignments 1-3 [30%]
  • Attendance [10%]
  • Assignment 4 + Project [40%]
-COGS 121 Friday's Quizzes:  You are expected to do the reading assigned for each class period. It is recommended to read the assigned chapters before the the Tuesday Design Lecture, but you still have time until the following the  discussion section on the following Friday. During the discussion section there will be a simple quiz to check your understanding and preparation on the content that was covered in the Design and Technical lectures and in the readings. We will drop the lowest 2 reading quizzes. 

-Programming assignments will be graded on a scale from 0-10. Grading will be based on 3 components (adherence to the assignment, working status, design), each delivering up to 3 points. An extra point will be added to exceptional assignments. Late turn-in will have a 5 minute grace period, and lose 1 percent of the grade per minute thereafter.

-The Team Project will be evaluated throughout the course of the second part of the quarter. Every Thursday, starting week 6 every 121 group will present a 2min summary in one single PDF slide of the last week. The 1-slide PDF needs to be sent to by Wednesday night 11.59p and will include: 1) progress since last week, 2) summary of collaboration within the group, and 3) one thing that has been solved over the last week that might benefits the other groups. The 2min weekly summaries will be evaluated as v-, v, or v+ depending on the progresses. The weekly evaluations will be integrated with a final evaluation of a final paper describing the technical implementation of the project. The Final paper is due on Wed 06/10 at 11.59pm and must be sent to Late turn-in will have a 5 minute grace period, and lose 1 percent of the grade per minute thereafter. Information for the final project paper can be found here.

Academic Integrity

You are to do your own work in this course. Each student is responsible for knowing and abiding by UCSD's policies on Academic Dishonesty and on Student Conduct. Any student violating UCSD's Academic Integrity Policy will be reported to the Academic Integrity Office for administrative processing, and may result in suspension or dismissal from UCSD, as well an an academic sanction that could result in failing the course (e.g., a grade of zero (0) on a compromised assignment). Committing acts that violate the UCSD Student Conduct Code that result in course disruption will be referred to the Office of Student Conduct, and could result in suspension or dismissal.
  • No student shall provide their assignments, in part or in total, to any other student in current or future classes of this course. No student shall procure or accept assignments from any other student from current or prior classes of this course.
  • All programming code and documentation submitted for evaluation or existing inside the student's computer accounts must be the student's original work or material specifically authorized by the instructor. The course accounts are authorized for course work only.
  • Collaborating with other students to develop, complete or correct course work is limited to activities explicitly authorized by the Instructor. Use of other student's course work, in part or in total, to develop, complete or correct course work is unauthorized. However, students may freely discuss their work with others.
  • Each student must retain intermediate work as proof that submitted work is his or her own. A student may be asked to provide these intermediate copies as evidence that the submitted work is the student's.
  • With regards to the above rules, it is understood that project teams will be sharing code among themselves (but not to other teams) to complete their projects

Course Schedule

Week Date Topic Readings Assignments Notes
1 Tue Mar 31 Intro Lecture: Cogs 121 Introduction, Web and Mobile Programming refresher. slides

Assignment 0: Environment setup  Adam + Purvi
Wed Apr 01 Design Discussion

Thu Apr 02 Design Lecture: Cogs 121 Introduction / Interactive Systems: Usability, Interface Design, and Design Goals Shneiderman: Ch. 1 & 2

Johnson: Introduction

Fri Apr 03 Tech Discussion


2 Tue Apr 07 Design Lecture: Design Principles Shneiderman: Ch 5

Johnson: Ch 1 + Appendix

Wed Apr 08 Design Discussion

Thu Apr 09 Tech LectureSocial Media and Data Mining
Assignment 1: Social Media
Fri Apr 10 Tech Discussion / COGS 121 Quiz

3 Tue Apr 14 Design LectureThe Art of Web and Visual Design
Johnson: Ch 2,3,4
Meirelles (Info Viz): Introduction + Chapter 1

Wed Apr 15 Design Discussion

Thu Apr 16 Tech LectureInteractive Information Visualization
Assignment 2: D3 Visualization
Fri Apr 17 Tech Discussion / COGS 121 Quiz

Fri Apr 17 ASSIGNMENT 1 DUE AT 11:59 (Friday Night)

4 Tue Apr 21 Lecture: Interactive Visualization + Assignment 2 Johnson: Ch 5,6
Meirelles: Ch 2,3

Wed Apr 22 Design Discussion

Thu Apr 23 Tech Lecture: Story-boarding

Prof. Weibel at NSF
Fri Apr 24 Tech Discussion / COGS 121 Quiz

5 Tue Apr 28 Design LectureRapid Prototyping and Wireframing
Johnson: Ch13, 14
Assignment 3: Wireframing
Wed Apr 29 Design Discussion
Meirelles: Ch 4 (Not required, but reccomended)

Thu Apr 30 Tech Lecture: Wireframing Tools

Fri May 01 Tech Discussion / COGS 121 Quiz

6 Tue May 05 Lecture: Interactive Devices and Gesture-based interactions Maria Karam and M.C. Schraefel, A Taxonomy of Gestures in Human Computer Interactions, 2005

Bill Buxton, Gesture-based Interactions (Ch 14), 2011

Readings are required and due at the end of Week 7 (Quiz Fri. 5/15).
Wed May 06 Design Discussion (Rapid Prototyping) Meirelles: Ch 5 (Not required, but reccomended)

Thu May 07 Teams Presentation / Feedback (1/2)
3-min team presentations + 2 min feedback
Fri May 08 Teams Presentation / Feedback (1/2)
3-min team presentations + 2 min feedback

7 Tue May 12 Lecture: Agile development, project management, collaboration and timelines -The Agile Project Manager [pdf]

-Extreme Programming and Agile Software development [pdf] [url]
Assignment 4: Gesture-based Interaction Due as part of the final project
Wed May 13 Design Discussion Meirelles: Ch 6 (Not required, but reccomended)

Thu May 14 Tech Lecture: Gestures Prototyping and Development
Don Norman. Natural user interfaces are not natural. interactions 17, 3 (May 2010), 6-10. 2010

Adam and Brian present

Reading is required and due at the end of Week 7 (Quiz Fri. 5/15).
Fri May 15 Tech Discussion / COGS 121 Quiz

8 Tue May 19 Project Discussion

Prof. Weibel at PervasiveHealth
Wed May 20 Design Discussion

Thu May 21 Projects Summaries / Troubleshooting
2-min 1-slide group presentations (send by Wed 11:59pm) Prof. Weibel at PervasiveHealth
Fri May 22 Project Tech Discussion

OPTIONAL - TAs Available
9 Tue May 26 LectureFinal Project Reports / Final Presentations

Wed May 27 Design Discussion

Thu May 28 Projects Summaries / Troubleshooting
2-min 1-slide group presentations (send by Wed 11:59pm)
Fri May 29 Project Tech Discussion

OPTIONAL - TAs Available
10 Tue Jun 02 Projects Summaries / Demos

Wed Jun 03 No Design Class

TA Available
Thu Jun 04 NO CLASS

Fri Jun 05 No Tech Discussion

OPTIONAL - TAs Available
11 Tue Jun 09 Project Presentations

3-7 PM CSE 1202