New York City College of Technology
The City University of New York
SYLLABUS
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
Email: nwhysel@citytech.cuny.edu
COURSE DESCRIPTION
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.
Prerequisites
COMD 2451 Web Design I
Course Objectives
| INSTRUCTIONAL OBJECTIVES | ASSESSMENT |
| 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: https://www.nngroup.com/articles/
Interaction Design Foundation: https://www.interaction-design.org/
Boxes and Arrows: https://www.boxesandarrows.com/
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:
http://bit.ly/COMD3562-UX-Resources
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: http://catalog.sps.cuny.edu/content.php?catoid=2&navoid=205
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.
Grading
- 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
Topics
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: http://bit.ly/COMD3562-Class-Folder
Homework/Reading Assignments: http://bit.ly/COMD3562-Homework-Instructions
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
| CLASS | DATE | CLASS OUTLINE |
| 1 | August 26 | Lecture Topic – Intro to UX and UI Design
Laboratory Exercise
Homework/Reading Assignment 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. Reading: 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 https://join.slack.com/t/comd-whysel/shared_invite/zt-gsi7igd2-a3lxmJLrWVo~lzcMcFf8YA. 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. (http://comd-whysel.slack.com/#fa2020-3562-ol48) |
| 2 | September 2 | Lecture Topic – UX Workflow
Laboratory Exercise
Homework/Reading Assignment Project Planning with Trello
Reading: 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. (http://comd-whysel.slack.com) |
| 3 | September 9 | Lecture Topic – UX Research Part One
Laboratory Exercise
Homework/Reading Assignment 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. Reading: 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. (http://comd-whysel.slack.com) |
| 4 | September 16 | Lecture Topic – UX Research Part Two
QUIZ 1 Laboratory Exercise
Homework/Reading Assignment 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 7 Reasons for UX Sketching. By Chris Spalton Submit response to Slack by September 23 before class and be prepared to discuss. (http://comd-whysel.slack.com) |
| 5 | September 23 | Lecture Topic – Sketching and Ideation
Laboratory Exercise
Homework/Reading Assignment
Since ideation is a generative process each individual should submit all of their sketches. Reading: Card Sorting: A Definitive Guide by Donna Spencer & Todd Warfel, Boxes and Arrows: https://boxesandarrows.com/card-sorting-a-definitive-guide/ Information Architecture Expert Panel – Part One by Amy Jiménez Márquez (high level overview of the topic): https://boxesandarrows.com/information-architecture-expert-panel-part-one/ Submit response to Slack by September 30 before class and be prepared to discuss. (http://comd-whysel.slack.com) |
| 6 | September 30 | Lecture Topic – Information Architecture
Laboratory Exercise
Homework/Reading Assignment 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. Reading/Video: Feedback without Frustration (19 minute video): https://scottberkun.com/2011/feedback-without-frustration-video/ How to Give and Receive Criticism: https://scottberkun.com/essays/35-how-to-give-and-receive-criticism/ How to Get better Feedback: https://scottberkun.com/2013/how-to-get-better-feedback/ (edited) Submit response to Slack by October 7 before class and be prepared to discuss. (http://comd-whysel.slack.com) |
| 7 | October 7 | Lecture Topic – Presentation and Critique
Laboratory Exercise
Homework/Reading Assignment
No Reading Assignment |
| NO CLASS | October 14 | Class follows a MONDAY schedule |
| 8 | October 21 | Lecture Topic – Presentation Day
QUIZ 2 – Look for Quiz on Friday, due October 29 Homework/Reading Assignment Complete the Glows and Grows form for all four of the projects, including the one that you did. You can find the form here: https://forms.gle/bvCeo8CTKQYxkuZz5 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. Reading: 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)
Laboratory Exercise
Homework/Reading Assignment Submit your user flow chart and wire flows to Blackboard. Reading: Usability Testing 101, by Kate Moran: https://www.nngroup.com/articles/usability-testing-101/ Turn User Goals into Task Scenarios for Usability Testing by Marieke McCloskey: https://www.nngroup.com/articles/task-scenarios-usability-testing/ How To Setup a Mobile Usability Test by Kim Flaherty (video): https://www.nngroup.com/videos/how-setup-mobile-usability-test/ Severity Ratings for Usability Problems by Jakob Nielsen: https://www.nngroup.com/articles/how-to-rate-the-severity-of-usability-problems/ Submit response to Slack by November 4 before class and be prepared to discuss. (http://comd-whysel.slack.com) |
| 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.
Reading:
Video: Mike Monteiro, How Designers Ruined the World. An Event Apart. https://aneventapart.com/news/post/how-designers-destroyed-the-world-by-mike-monteiro-an-aea-video
Mike Monteiro. A Designers Code of Ethics. Mule Design. https://muledesign.com/2017/07/a-designers-code-of-ethics
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. (http://comd-whysel.slack.com)11November 11
Lecture Topic: Ethics and Accessible Design
-
- Design Ethics (Monteiro video-11 minutes)
- Addressing Culture and Demographics
- Accessible Design
QUIZ 3
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
Reading:
Brand Is Experience in the Digital Age by Kate Kaplan. http://www.nngroup.com/articles/brand-experience-ux/
Submit response to Slack by December 2 before class and be prepared to discuss. (http://comd-whysel.slack.com)
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
Reading:
What is Visual Design? By the Interaction Design Foundation https://www.interaction-design.org/literature/topics/visual-design
The Building Blocks of Visual Design by Yu Siang Teo
https://www.interaction-design.org/literature/article/the-building-blocks-of-visual-design
5 Principles of Visual Design in UX – Nielsen Norman Group
https://www.nngroup.com/articles/principles-visual-design/
Submit response to Slack by December 2 before class and be prepared to discuss. (http://comd-whysel.slack.com)
NO CLASSNovember 25Classes Follow a FRIDAY Schedule13December 2
Lecture Topic – Visual Design
-
- What is Visual Design
- Color
- Typography
- Style Guides
QUIZ 4
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. (http://comd-whysel.slack.com)
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
Expectations
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
- Cover page including:
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
- Cover page including:
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
- www.comdcltfaq.wordpress.com (Also link to Openlab for notifications and updates.)
- comdclt@gmail.com
- lvasquez@citytech.cuny.edu
- mcannetti@citytech.cuny.edu
- (929)320-0338
- Google Chat with comdclt@gmail.com 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: helpdesk@citytech.cuny.edu
- Student IT Support: studenthelpdesk@citytech.cuny.edu
- OCIS Phone Number: (718) 260-5626
- Student HelpDesk Number (718) 260-4900
- 9am-5pm
- Website: it.citytech.cuny.edu
Blackboard Support:
-
- Dr. Karen Lundstrem
- Evelyn Pak
- itec@citytech.cuny.edu
- (718) 254-8565
- http://websupport1.citytech.cuny.edu/facultybb.html
- https://cisweb.cuny.edu/blackboard/AfterHoursSupport-Blackboard-COVID19-Outbreak.pdf
Computer Loaner Program:
-
- https://www.citytech.cuny.edu/loaner
- 30 MacBook Airs
- 127 Apple iMacs
- Chromebooks
- iPads
- Currently no loaner WACOM Tablets
- No Loaner Cameras
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.
- http://www.citytech.cuny.edu/virtual-lab/
- https://gpnet.citytech.cuny.edu/global-protect/login.esp
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: https://support.apple.com/en-us/HT201236
- 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 gpnet.citytech.cuny.edu
- Then you go to www.citytech.cuny.edu/virtual-lab
- 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:
https://comdcltfaq.wordpress.com/2020/08/25/article-51-8-25-2020-virtual-labs/
Virtual Desktop Connection Issues for Mac:
https://comdcltfaq.wordpress.com/2020/08/27/8-27-2020-virtual-desktop-connection-issues-for-mac/
