New York City College of Technology

The City University of New York


Department of Communication Design
COMD3562: UX and UI Design

Fall 2020, Section OL48

Class Meeting: Wednesdays 6:00-9:20pm
Blackboard Collaborate Course Room

Office Hours: Wednesdays 4:00-5:00pm
Blackboard Collaborate Office Hours Room

Instructor: Noreen Whysel


User Experience (UX) Design is an essential component in developing websites, applications, and any other type of product intended to be used by people. This course examines the leading concepts of user—centered design through readings, discussions and assignments. Practical concerns include evaluation of technology needed to create or maintain websites; and exploration of a step-by-step process for creating products using flow charts, wireframes and prototypes. Students will also gain an understanding of issues surrounding usability on the Web, knowledge management and Web strategy.

2 cl hrs, 2 lab hrs, 3 cr.



COMD 2451 Web Design I


Course Objectives

For the successful completion of this course, students should be able to: Evaluation methods and criteria:
Define and explain the applications of UI/UX, Information architecture (IA) and product management. Demonstrate production workflow methodologies (like AGILE) to tackle complex problems in order to come up with a pertinent design solution. Students will demonstrate competency by completing two projects and presenting their process.
Demonstrate a proficiency in using current, industry-standard UX, UI, IA and product management tools and methods. Demonstrate how to choose the most appropriate method or approach for a specific project. Group and individual interaction projects.
Speaking: the student will demonstrate the ability to articulate him/herself using relevant industry-specific vocabulary Evaluate through class discussion and two project presentations.
Social Interaction: The student will demonstrate the ability to work in teams, including people from a variety of backgrounds, and build consensus. Evaluate the collaboration and integration of the team during the group project, class participation and group presentation.


Course Platform

We will use a combination of Open Lab, Blackboard and Blackboard Collaborate for this course. We may also use Zoom for breakout groups and guest lectures. Invitations to Zoom meetings will be forwarded via email. Professor Whysel will prepare lectures and assignments and post them to the course page in Blackboard. There will be recorded, video lectures and demos as well as live demos and discussions via Blackboard Collaborate. We will also develop public works on the Open Lab class site.

If you are not able to log into Blackboard Collaborate or have a bad connection you may use your phone via Anonymous dial in: +1-571-392-7650 PIN: 719 378 3430. Help information for Blackboard Collaborate is at the end of this document. All sessions will be recorded for later viewing for those who are unable to attend class or who would like to review materials covered during the class session. Look for the recordings on the Blackboard Collaborate Ultra page in the black “hamburger” menu icon. 

We will also employ collaboration tools such as Slack, Miro, and prototyping tools such as Adobe XD and Figma. The goal is to get you familiar with tools that design teams might use in practice.


Student Office Hours

I will be available Wednesdays at 4:00-5:00pm for office hours via Blackboard Collaborate. Look for a scheduled/repeating session in the Collaborate panel where we do our classes. I encourage you to come by, either individually or in groups, to discuss assignments, clarify class topics or problems, share your ideas and concerns, review tests, or address any other matters where I might be helpful. These hours are for you and are an important part of your education.


Teaching/Learning Method

    • Lectures and readings
    • Demonstration
    • Project based labs
    • Research assignments
    • Group Work
    • Blackboard/Zoom and other platforms

Required Text

There are no required texts for this course. Readings may be assigned from various online sources.


Course Resources

Weekly readings and/or videos will be from the following online resources, primarily. Other resources including videos may be introduced from time to time:

Nielsen Norman Group Articles:

Interaction Design Foundation:

Boxes and Arrows:

Suggested Texts

The Design of Everyday Things: Revised and Expanded Edition by Don Norman, ISBN-10: 0-465-05065-4

Communicating Design by Dan Brown, ISBN-10: 0-321-71246-3

Lean UX: Designing Great Products with Agile Teams by Jeff Gothelf, ISBN-10: 1-491-95360-8


Additional Resources

Additional readings and videos may be drawn from online and other resources listed in the following document:

Attendance (College) and Lateness (Department) Policies

Attendance is taken and is important to success in this class. If absences are excessive, the instructor will alert the student that he or she may be in danger of not meeting the course objectives and participation expectations, which could lead to a lower grade. 

Given the online nature of this course, attendance will be tracked via classroom discussions. In addition to real-time class discussion, you are expected to contribute regularly to the conversations on the class discussion boards. Check the Discussion Board area of our Blackboard site and the class Slack channel for your section every day and respond to the discussion questions with solid, thoughtful posts (not just “ok” or “I agree”), and check your grammar and spelling. Each week’s questions will be posted by Wednesday morning. Your discussion responses must be posted by midnight on Sunday in order to count for that week. LATE POSTS ARE COUNTED AS LATE ARRIVALS TO CLASS. ABSENT POSTS ARE ABSENCES FROM CLASS.

Academic Integrity Standards

Students and all others who work with information, ideas, texts, images, music, inventions, and other intellectual property owe their audience and sources accuracy and honesty in using, crediting, and citing sources. As a community of intellectual and professional workers, the College recognizes its responsibility for providing instruction in information literacy and academic integrity, offering models of good practice, and responding vigilantly and appropriately to infractions of academic integrity. Accordingly, academic dishonesty is prohibited in The City University of New York and at New York City College of Technology and is punishable by penalties, including failing grades, suspension, and expulsion.

Academic dishonesty includes any act that is designed to obtain fraudulently, either for oneself or for someone else, academic credit, grades, or any other form of recognition that was not properly earned. Academic dishonesty encompasses the following:

Cheating: Defined as intentionally giving, receiving, using or attempting to use unauthorized materials, information, notes, study aids, including any form of unauthorized communication, in any academic exercise. It is the student’s responsibility to consult with instructors to determine whether or not a study aid or device may be used.

Plagiarism: Plagiarism is intentionally and knowingly presenting the ideas or works of another as one’s own original idea or works in any academic exercise without proper acknowledgement of the source. The purchase and submission of a term paper, essay, or other written assignment to fulfill the requirements of a course, and violates section 213-b of the State Education Law. This also applies to the submission of all or substantial portions of the same academic work previously submitted by the student or any other individual for credit at another institution, or in more than one course.


Online Etiquette

Students will conduct their online posts and replies with respect for others, which include courtesy, dignity and appropriate language at all times. Inappropriate behavior of any kind will not be tolerated and will negatively affect your grade. I strongly recommend that you review the Netiquette guidelines prior to signing on. The CUNY School of Professional Studies has a good set of Netiquette Guidelines:

Consent to Video Recording

Students who participate in this class with their camera on or use a profile image are agreeing to have their video or image recorded solely for the purpose of creating a record for students enrolled in the class to refer to, including those enrolled students who are unable to attend live.  If you are unwilling to consent to have your profile or video image recorded, be sure to keep your camera off and do not use a profile image. Likewise, students who un-mute during class and participate orally are agreeing to have their voices recorded.  If you are not willing to consent to have your voice recorded during class, you will need to keep your mute button activated and communicate exclusively using the “chat” feature, which allows students to type questions and comments live.


Mobile Phones

In this course you will use a combination of paper and online drawings, diagrams and maps and you may need to take pictures of your work or work on assignments on your mobile phone. You also may want to use your phone to test prototypes that work in a mobile environment. For these reasons, mobile phones and other devices are permitted; however, you must limit your phone, laptop or tablet use to course related activities and silence them during our live, online class sessions. If you do not have a mobile phone or a camera with the ability to transfer files to a computer or flash drive, please let me know so we can have a plan for sharing any work completed on paper.



  • 40% Individual and Group Projects
      • – Project 1: Research Project (Group) – 20%
      • – Project 2: Prototype (Individual) – 20%
  • 20% Homework
  • 20% Quizzes
  • 10% Reading Response/Discussion
  • 10% Class Preparation/Participation


Letter Numerical Range Grade Points

A 93-100.0 4.0
A- 90-92.9 3.7
B+ 87-89.9 3.3
B 83-86.9 3.0
B- 80-82.9 2.7
C+ 77-79.9 2.3
C 70-76.9 2.0
D 60-69.9 1.0
F 59.9 or less 0.0


Note: The following pages contain a general outline of topics — the order may change as the semester progresses. Professor Whysel may add or remove lecture content or assignments. Any changes will be communicated before the class and on Blackboard.

All class resources are located at:

Homework/Reading Assignments:

You will be responsible for doing any pre-work, which may include watching videos, reading articles or other activities that you do on your own so that you are prepared for discussion and studio activities during the class sessions. Check the Lesson page and content for links and updated materials.


COMD 3562 OL48 Class Outline

August 26 Lecture Topic – Intro to UX and UI Design

    • Introductions
    • Review Syllabus
    • Design Principles
    • What is User Experience Design?

Laboratory Exercise

    • End-to-End Design Studio 1

Homework/Reading Assignment
Due: Wednesday, September 2

Students fill out a survey on the first day of class. Prepares students for user and stakeholder interviews during the research phase of Project 1.


Garrett, Jesse James. (January 11, 2017). Designing for The Human Side of Banking. Medium. Web.

We will use Slack for reading assignments. Look for Slack invitation  in email or visit the course Slack at

Look for Week 1 reading response question in the #fa2020-3562-ol52 channel and answer the question posted by September 3 before class and be prepared to discuss. (

2 September 2 Lecture Topic – UX Workflow

    • UX Roles and Workflow
    • UX Design Approaches and Context
    • A Framework for Critique
    • Software and Resources

Laboratory Exercise

    • Software Tutorial (Adobe XD)
    • Project Planning Exercise

Homework/Reading Assignment
Due: Wednesday, February 9

Project Planning with Trello

    • Download Trello from and save the Kanban Template to your workspace.
    • Create a board listing all of the tasks you perform in a typical morning from when you wake up to when you go to school or work.
    • Each task should have a label and a due date/time. You can create labels and invite roles (partner, roommate, parent) that make sense for you.
    • Post a screenshot of your board to the Week 2 Assignment page in Blackboard.


Roger, Christian. (November 14, 2014). When to Use Which User-Experience Research Methods. NNGroup. Web.

Submit response to Slack by September 9 before class and be prepared to discuss. (

3 September 9 Lecture Topic – UX Research Part One

    • UX Research Techniques
    • Stakeholder Interviews
    • Problem Definition
    • Feature Prioritization
    • Group Project Kickoff

Laboratory Exercise

    • Creating a Problem Statement
    • MoSCoW Map
    • Feature Prioritization

Homework/Reading Assignment
Due: Wednesday, September 16 (Part 1 and 2a) and September 23 (Part 2b)

Part One: Post photo or screenshot of your MoSCoW matrix and Feature Prioritization charts.

Part Two(a): Create an interview discussion guide. Write the problem statement at the top. Research prospective users and come up with questions you will ask in your interviews.

Part Two(b): Interview users and put their answers in the Discussion Guide (due September 23)

Since it is a group project, I recommend working in a shared Google doc and submit the link to that doc. The shared doc should have all team member names on the first page. You can enter your participant answers using color coded text. Each team member should strive to interview two users and one stakeholder.

Post feature MoSCoW map, feature prioritization chart, discussion guide to the Week 3 Assignment page in Blackboard. Interview answers will be due the following week on September 23, but start interviewing people this week.


Methods to Help You Define, Synthesize and Make Sense of Your Research by Rikki Friis Dam and Yu Sieng Teo

Submit response to Slack by September 16 before class and be prepared to discuss. ( 

4 September 16 Lecture Topic – UX Research Part Two

    • Problem Definition, Revised
    • Customer Journeys
    • Personas
    • Jobs to Be Done
    • User Scenarios


Laboratory Exercise

    • Gathering Insight
    • Create Persona and Scenarios
    • Create Customer Journey Map

Homework/Reading Assignment
Due: Monday, September 23

Take screenshots or post the Miro link to your Persona and Journey Map in the Week 4 Assignment page. Since it is a group project you only need to create one persona and one journey map in Miro.

Your completed Discussion Guide with participant answers is also due in the Week 3: Interviews assignment page.

Reading Assignment
Due: September 23

7 Reasons for UX Sketching. By Chris Spalton

Submit response to Slack by September 23 before class and be prepared to discuss. (

5 September 23 Lecture Topic – Sketching and Ideation

    • Sketching
    • Ideation Lab: Critique exercis

Laboratory Exercise

    • 8-Up Warm-up Exercise
    • Create an Empathy Map, Customer Journey Map and Lo-Fi Prototype

Homework/Reading Assignment
Due: Monday, September 30

    • Take photographs of your user interface sketches from today’s exercises.
    • Sketch ON PAPER individual screens or pages all your major product features.
    • This should be a continuation and refinement of today’s design studio sketches.
    • They still don’t need to be perfect but should be communicative of your concept.

Since ideation is a generative process each individual should submit all of their sketches.


Card Sorting: A Definitive Guide by Donna Spencer & Todd Warfel, Boxes and Arrows:

Information Architecture Expert Panel – Part One by Amy Jiménez Márquez (high level overview of the topic):

Submit response to Slack by September 30 before class and be prepared to discuss. (

6 September 30 Lecture Topic – Information Architecture

    • What Is Information Architecture?
    • How to Make Things Make Sense
    • IA tools
    • Card Sorts

Laboratory Exercise

    • Card Sort exercise

Homework/Reading Assignment
Due: Monday, October 7

With your group, create a spreadsheet with terms you used for the card sort as described in the lab instructions. If you made an online card sort at Optimal Workshop, provide a link and/or upload screenshots of the reports. Use the results to draft a site map for your project.

Post all deliverables to your Miro Board. 


Feedback without Frustration (19 minute video):

How to Give and Receive Criticism:

How to Get better Feedback: (edited) 

Submit response to Slack by October 7 before class and be prepared to discuss. (

7 October 7 Lecture Topic – Presentation and Critique

    • Presentation Tips
    • Understanding Your Audience
    • Critique vs Criticism
    • Report Format

Laboratory Exercise

    • Design Studio Exercise 2
    • Practice Presentations

Homework/Reading Assignment
Due: Monday, October 21 

    • Complete user research report with recommendations
    • Prepare for Presentation

No Reading Assignment

NO CLASS October 14 Class follows a MONDAY schedule
8 October 21 Lecture Topic – Presentation Day 

    • Project 1 Presentations and Critique
    • Glows and Grows

QUIZ 2 – Look for Quiz on Friday, due October 29

Homework/Reading Assignment
Due: Thursday, October 28

Complete the Glows and Grows form for all four of the projects, including the one that you did. You can find the form here:

No Homework

If you have not done so, please submit your group presentation to me via Blackboard by October 21 before class. Only one member of your team needs to submit for your group to receive credit.


Turn User Goals into Task Scenarios for Usability Testing, NNGroup.

Write Better Qualitative Usability Tasks: Top 10 Mistakes to Avoid, NNGroup.

9 October 28 Lecture Topic – Interaction Design

QUIZ due October 29 (available since last week)

    • What is Interaction Design (IxD)?
    • Common UI Controls
    • UI Design Patterns
    • Front End Programming
    • User Flows
    • Wireframing and Prototyping Tools

Laboratory Exercise

    • Create User Flow and App Wire Flow

Homework/Reading Assignment
Due: Wednesday, November 4

Submit your user flow chart and wire flows to Blackboard.


Usability Testing 101, by Kate Moran:

Turn User Goals into Task Scenarios for Usability Testing by Marieke McCloskey:

How To Setup a Mobile Usability Test by Kim Flaherty (video):

Severity Ratings for Usability Problems by Jakob Nielsen:

Submit response to Slack by November 4 before class and be prepared to discuss. (

10 November 4 Lecture Topic – Usability Testing
    • What is Usability Testing
    • Moderated and Unmoderated User Testing
    • Usability Test Demo, Steve Krug
    • Privacy, Consent and Testing Ethics
    • Expert Reviews
      • Cognitive Walkthrough
      • Heuristic Analysis

Laboratory Exercise

    • In breakout groups, write and perform cognitive walkthrough and heuristic evaluation of the website posted in the lecture.
    • As a group, prepare a report showing issues to address, lseverity and priority.
    • We will discuss these in class.
    • Continue working on your prototype

Homework/Reading Assignment
Due: Wednesday, November 11 and November 18

Part 1 is due Thursday, November 11.

Part 2 is due Thursday, November 18.

This is a two part task, similar to the Discussion Guide exercise.

Part 1: Write a moderated user test, using a consent form, script and two user tasks using the template provided in the Class Folder for Week 10. This is due November 11.

Part 2: Test your prototype with 2-3 people. Ask your family members and classmates to participate. Prepare a brief report showing issues to address, severity and priority. This is due November 12. Look for a SEPARATE submission form in the Assignments page for Part 2.

Submit your Cognitive Walkthrough and Heuristic Evaluation reports to Blackboard. A template is available in the Class Folder. Remember this is an expert evaluation of a website of your choice, not your prototype.


Video: Mike Monteiro, How Designers Ruined the World. An Event Apart.

Mike Monteiro. A Designers Code of Ethics. Mule Design.

Watch the video and read the article. Then, select one of Mule Designs ethics. Describe an example of where have you seen this design ethic violated. What is the impact of the ethical problem?

Submit response to Slack by November 11 before class and be prepared to discuss. ( 11

Lecture Topic: Ethics and Accessible Design

    • Design Ethics (Monteiro video-11 minutes)
    • Addressing Culture and Demographics
    • Accessible Design


Laboratory Exercise

    • Select a website to test for accessibility
    • Write a brief report showing the problems found, severity and recommendations for improvements noting which accessibility framework you consulted.

Homework/Reading Assignment
Due: Monday, November 18


Brand Is Experience in the Digital Age by Kate Kaplan.

Submit response to Slack by December 2 before class and be prepared to discuss. (

12November 18

Lecture Topic – Branding

    • Brand Experience
    • Style Guides
    • Design Systems 
    • Content Strategy and Governance

Laboratory Exercise

    • Select a Design Pattern from list in Homework Instructions doc.
    • Begin to build wireframes and a working prototype of the feature in Adobe XD or Figma.

Homework/Reading Assignment
Due: Monday, December 2


What is Visual Design? By the Interaction Design Foundation

The Building Blocks of Visual Design by Yu Siang Teo

5 Principles of Visual Design in UX – Nielsen Norman Group

Submit response to Slack by December 2 before class and be prepared to discuss. (

NO CLASSNovember 25Classes Follow a FRIDAY Schedule13December 2

Lecture Topic – Visual Design

    • What is Visual Design
    • Color
    • Typography
    • Style Guides


Laboratory Exercise

    • Continue to mock up Project 2 prototype
    • Begin testing your prototype with classmates

Homework/Reading Assignment
Due: Monday, December 16

I will post a selection of readings to Slack after class. Please pick one article and write at least two paragraphs summarizing what you learned and how you might use it in future interactive design projects.

Submit response to Slack by December 9 before class and be prepared to discuss. (

14December 9

Lecture Topic – Trends

    • Design Trends
    • Possible Guest Lecture, Panel or (Online) field trip

Laboratory Exercise

    • Work on final project and presentation

Homework/Reading Assignment
Due: Monday, December 16

Work on your prototype presentation and submit a copy to me by December 16 before your presentation.

Be sure to post your Final Reading response to blackboard by December 16. I will forward instructions for posting to the Open Lab class website.

15December 16Project 2 Presentations




Students must complete and turn in all homework assignments a week from the day they were assigned – the next class meeting. It is very important to keep up with the homework throughout the semester. These exercises form the backbone of your UX/UI knowledge. Missing homework assignments or major projects will result in significant grade penalties. Should you miss a class, you are expected to contact the professor to learn what you missed. Homework turned in one week after it is due will be penalized by at least one letter grade. Students must come to class prepared, ready to work and be engaged.


Project 1: Group Project – UX Research Report/Presentation

The group project consists primarily of user research and low fidelity prototype you can use to perform a user test. You will work in groups of four to five students.

    • Cover page including:
      • Team Names
      • UX and UI Design, Section OL48
      • City Tech Communication Design Program
      • Professor: Noreen Whysel
    • Problem Definition
    • MoSCoW Map and Feature Prioritization chart
    • Competitive Analysis/Business Plan Canvas
    • Interview Script
    • User Research artifacts
      • Low Fidelity prototype
      • Persona
      • User Scenario
      • User Journey Map
    • User Test Results

The group project is due at the beginning of class on October 21.


Project 2: Individual Project – Design and Prototype (2 parts)

Part 1: UX Design Prototype/Presentation

    • Cover page including:
      • Your Name
      • UX and UI Design, Section OL48
      • City Tech Communication Design Program
      • Professor: Noreen Whysel
    • Branding and Style Guide
    • User Flows and Wireflows
    • Working Prototype
    • User Tests Results
    • Link to your prototype


Part 2: Prototype

You will create a working prototype of your website or application using Adobe XD or Figma. It does not have to be a completed website or App store ready. Most likely it will be a single activity or user task, such as a login, onboarding or other activity. It does need to demonstrate a complete user task, such as a login flow or other activity.

The individual project and prototype is due at the beginning of class on December 17.


COMD IT Services

Key Resources:

    • Luis Vasquez – Senior College Laboratory Technician
    • Michael Cannetti – Senior College Laboratory Technician
    •  (Also link to Openlab for notifications and updates.)
    • (929)320-0338
    • Google Chat with email.
    • Students can use Google Chat for Chat Tech Support Questions.
    • Slack Chat is available for Faculty only.
    • One A.M. CLT (Michael) 8am-4pm.
    • One P.M. CLT (Luis) 1pm-9pm.

Office of Computer Information Services:

    • Faculty IT Support:
    • Student IT Support:
    • OCIS Phone Number: (718) 260-5626
    • Student HelpDesk Number (718) 260-4900
    • 9am-5pm
    • Website:

Blackboard Support:

Computer Loaner Program:

ADOBE CC 2020:

    • CUNY Student ID Usernames will not work off campus.
    • Adobe does not work on a Chromebook.
    • CUNY is working with Adobe to change the contact in order to give students use off campus. TBD when that will happen.


Remote and Virtual Desktop Solutions:

    • LabStat Remote Desktop.
    • Apporto Virtual Desktop.

Basic Tips:

    • Use Microsoft One Drive with your CUNY Login to backup data to the cloud.
    • Follow the COMD Facebook page at Communication Design at Citytech and Instagram @comd_citytech
    • Apple Keyboard Shortcuts:
    • You will need a USB-C Adapter for MacBooks to connect external storage devices.

Remote Desktop to the Classrooms:

    • First you must install the VPN Client.
    • Then once you’ve done that, you’ll to make sure that you’ve signed into the VPN with your Citytech ID credentials and you make sure that you are linked to
    • Then you go to
    • Choose General Labs or Academic Labs and then choose a COMD Computer.
    • Click Connect next to the computer name.
    • Hit Allow.
    • You will see the IP Address of the computer.  Hit Connect again.
    • Type in Student with a capital S in the user name.  (No Password.)
    • Hit Connect Again.
    • It will bring you to the log in screen on that computer in the classroom.  Hit Student and you are in.

How To documents and videos:

Virtual Labs Demo Videos:

Virtual Desktop Connection Issues for Mac: