CT302 602/65A/Fall2020

Digital Product Design I

Date & Time: 601/Tuesday 9:10 am – 12:00 pm, 65A/6:30 pm – 9:20 pm
Semester: Fall 2020
Professor: Christie Shin
Company website: Cynda Media Lab
Program Portfolio: Behance
Email: christie_shin@fitnyc.edu
Classroom: Christie’s Remote Learning Studio
Office at FIT: Christie’s Remote Learning Studio
Office Hours: Monday 2 to 3, Tuesday 3 to 4, Wednesday 2 to 3
Corequisite:  CT300 Typography for Digital Content Design
Slack: Section 601, Section 65A
Figma Team/FIT Fall2020: Section 601, Section 65A
FIT Help Desk: TechHelp

Course Description
Students are introduced to the iterative process of digital product design. They develop lateral thinking skills and create design prototypes. Through lectures and hands-on exercises, students develop skills and knowledge necessary for a digital product designer.
Corequisite(s): CT 300.

This course’s primary objectives are to introduce the digital product design workflow and create a responsive product with a cohesive design system. Topics covered in this course include, but are not limited to, information architecture, navigation, wireframe, responsive design, UI design methodology, design system, and prototyping methods.
Through lectures and projects, students develop the design skills and knowledge necessary for a digital product designer.

Student Learning Outcomes
Upon completion of the course, students will be able to:
1. Understand the digital product design workflow
2. demonstrate basic knowledge of responsive user interface (UI) design and scalable design
3. Apply the UI design methodology to digital product design
4. Develop a design system
5. Create a range of low to high fidelity UI design & prototype in digital products
6. Create a professional quality online presence (Behance)

Projects & Evaluation
1. Prerequisite: Personal profile (5 points)
2. Project: Redesign an eCommerce’s website with a design system for both desktop and mobile (20/group + 55/solo points).
7. Professionalism (attendance, participation, presentation, etc./20 points)

Projects Description
Redesign a responsive User Interface design with a design system for both desktop and mobile.
Description: Redesign responsive interface design for both desktop and mobile to improve overall user experience through enhanced visual design, usability, learnability, and accessibility. Students will design three task flows and should focus on establishing a design system and visual interface design. The final presentation should include essential click-through prototyping.

Business to Consumer (B2C): When a business sells a good or service to an individual consumer (e.g. You buy a pair of shoes from an online retailer).
1. Industries & Brands (select one):
– Fashion: Uniqlo, Anthropologie
– Electronics & media: BestBuy
– Personal care: Kiels’s
– Food: Starbucks, Chipotle
2. Task flow:
– Search a product and add to the cart
(Home page > Search > Filter > Product Page > Add an item to the shopping cart)
3. Design tool: Figma

Weekly Outline

Week 1: 9/1/2020 TUE
1. Introduction of class, syllabus

2. In-class workshop
– Slack and group channel setup
– Figma sign up

3. Lecture
– UI vs. UX
– UI design tools overview
– Figma overview: work environment, structure
– Figma 01: frames, layout grid
– Prerequisite project: personal profile

—— Labor Day: College closed (9/7/2020) ——

Week 2: 9/8/2020 TUE
1. Assignment due/solo:
– Personal profile
– Three brands choices for your project (poorly designed website)-google sheet

2. In-class workshop
– Review personal profile, Figma Q&A
– 20-minute breakout session: Team forming (assign the Slack group. 5 students per team), elect a captain, & select 3 to 5 brands
– Final brand selection

3. Lecture
– Information Architecture
– Homework: Project analysis
– Figma 02-1: component, styles, library

—— Sept 19, 20: Rosh Hashanah – College closed——

Week 3: 9/15/2020 TUE
1. Assignment due/team:
Project analysis (10-minute presentation)
– Brand overview: company profile, target audience.
– Competitive analysis (3): pros & cons each
– Current website’s 3 main challenges/problems
– Current sitemap

2. Lecture
– Target segmentation
– Persona
– Task flow & wireframe examples (Steve, Felicia, Joshua)
– Figma 02-2: buttons

Week 4: 9/22/2020 TUE
1. Assignment due/team:
Proposal (10-minute presentation, add to the existing presentation file)
– Team: Target segmentation
– Team: 2 Primary & 3 Secondary Personas
– Team: Revised sitemap
– Individual: Homepage wireframe
(mobile only: create an individual file as well)

2. Lecture
– Responsive Web Design
– UI elements
– Figma: UI design workflow

—— Sept. 28:  Yom Kippur – College closed——

Week 5: 9/29/2020 TUE
1. Assignment due/solo:
– Moodboard, adjective, typography
– Mobile wireframe (complete task flow)
– Three design directions (mobile home page only)

2. Lecture
– UI Design Methodology: atomic design, design system
– DS Foundation: color, typography, components
– Figma 03-1: UI Design single page

3. In-class workshop
– Group discussion/progress check

Week 6: 10/6/2020 TUE
1. Assignment due/solo:
– Finalized mobile wireframes
– Revised mobile UI design

2. Lecture
– DS Foundation 2: grid, layout, spacing method

3. In-class workshop/breakout session
– UI design review

Week 7: 10/13/2020 TUE
1. Assignment due:
Midterm checkpoint (24 points)
– Mobile UI design round 1 (complete task flow)
– Design system: Type scale, color styles

2. Lecture
– Figma 03: prototype 1 (Master component navigation, vertical scroll)

3. In-class workshop
– Group discussion/progress check

Week 8: 10/20/2020 TUE
1. Assignment due:
– 04. UI Mobile
> Clean-up and organize your design. implemented with grid, type scale, and color styles)
> Organize components such as buttons and icons.
– UI Mobile Prototype
– Review desktop wireframe examples (02. Wireframe examples)

2. Lecture
– Figma 04: constraints, RWD
– Cards examples

3. In-class workshop
– Group discussion/progress check

Week 9: 10/27/2020 TUE
1. Assignment due:
– Desktop wireframes
– Design system: Type scale, color styles, icons, buttons, cards, etc.

2. Lecture
– Figma 05: auto-layout
– Icon design

3. In-class workshop
– Group discussion/progress check

Week 10: 11/3/2020 TUE
1. Assignment due:
– Desktop UI design round 1

2. Lecture
– Figma 03: prototype 2 (horizontal scroll, overlay)
– Figma 04: constraints & RWD

3. In-class workshop
– Group discussion/progress check

Week 11: 11/10/2020 TUE
1. Assignment due:
– Desktop UI design round 2

2. Lecture
– Accessibility, color contrast plug-in

3. In-class workshop
– Group discussion/progress check

Week 12: 11/17/2020 TUE
1. Assignment due:
– Finalized Mobile & Desktop UI (04. UI Design both mobile & desktop)

2. Lecture
– Prototyping & presentation in Figma

3. In-class workshop
– Group discussion/progress check

Week 13: 11/24/2020 TUE
1. Assignment due:
– Final prototyping (05. UI Mobile Prototype & 06. UI Desktop Prototype)

2. In-class workshop
– Group discussion/progress check

—— Nov 26 – Nov 29: Thanksgiving Recess – College closed——

Week 14: 12/1/2020 TUE
1. Assignment due:
– Final design system (07. Design System)
– Final Presentation draft (08.Final Presentation)

2. In-class workshop
– Group discussion/progress check

Week 15: 12/8/2020 TUE
1. Assignment due:
– All the required submissions (your project file must include the following: 01. Brand + Moodboard, 02. Wireframes both mobile & desktop, 03. Initial Design Directions, 04. UI design both mobile & desktop, 05, UI Mobile Prototype, 06. UI Desktop Prototype, 07. Design System, 08. Final Presentation)

2. Final presentation (only 08. Final presentation 5 minutes each) & vote for the scholarship

Keep and backup all the projects that you have done throughout the semester! You must submit all your projects for the final grade no later than the last day of class (Week 15)

Attendance Policy
Attendance is not optional. If you are going to miss a class, you must contact me via email ASAP. Due to the quantity of material covered in the course, I will not be able to spend class time explaining missed assignments or redo lectures. If a class is missed, it is your responsibility to get information regarding missed assignments and lectures from one of your classmates.

  1. Students are required to attend all classes, be on time, and remain for the entire class.
  2. Just like face-to-face classes, you are expected to turn on your webcam during class time for remote learning. Contact professor if special circumstances in which webcam can not be available.
  3. Students who miss three classes will receive a grade of “F.”
  4. The student who arrives 10 minutes after the start of the class will be considered late
  5. 2 late occurrences = one absence
  6. A student who arrives over 30 minutes late or not returning from the break will be considered absent from the class
  7. Working on projects for another class or using digital devices for socializing (texting, social media…etc.) or gaming during class time will be recorded as an absence
  8. An excused absence is still recorded as an absence. The difference is an excused absence won’t impact your grade for professionalism and class participation.

Grading / Point sytem
A : 100 – 95
A- : 94 – 90
B+ : 89 – 85
B : 84 – 80
B- : 79 – 75
C+ : 74 – 70
C : 69 – 65
C- : 64 – 60
D: 59 – 51
F: 50 or below

CT&D Recording Classroom Activities Policy
I. Introduction
Written permission is required in order to record classroom lectures, discussions, presentations (“lectures”), or other activities. When granted, permission to record lectures is subject to the limitations set forth in this policy. Violations of this policy may constitute copyright infringement in violation of federal or state law and may be subject to disciplinary action.

II. Definitions
A. Course Materials mean lecture notes, outlines, slides, Powerpoint presentations, readings, or other content made available to students by the instructor or presenter, or through any online learning system.

B. Recording means a video or audio replication or photographic image recorded on devices including, but not limited to, audio recorders, video recorders, cell phones, Smartphones, digital cameras, media players, computers, or other devices that record images or sound.

III. Requirements and Limitations
A. Written Permission
Recording of classroom lectures is prohibited unless advance written permission is obtained from the class instructor and any guest presenter(s). An instructor may provide such permission to an entire class as part of the course syllabus or other written description of a course. Students who require recording or other adaptations of lectures as a reasonable accommodation for a disability in advance of the lecture in order to obtain permission for the recording.

In the event permission to record classroom lectures is granted, the professor may notify all students, speakers and other lecture attendees in advance that recording may occur. Every effort should be made to protect the confidentiality of a student with a disability who is being granted an accommodation, i.e. the professor will not name the student who is doing the recording when it is due to disability accommodation.

B. Limitations on Use of Recordings and Materials
Permission to allow lecture recording is not a transfer of any copyrights in the recording or related course materials. Such recordings and materials may be used only for individual or group study with other students enrolled in the same class, and may not be reproduced, transferred, distributed, or displayed in any public or commercial manner.

Students must destroy recordings at the end of the semester in which they are enrolled in the class.

Communication Design Pathways Department Policy on Plagiarism
Within the Communication Design Pathways Department, plagiarism and other forms of academic deception are unacceptable. Each instance of plagiarism is distinct. A plagiarism violation is an automatic justification for an “F” on that assignment and/or an “F” for the course. A student found in violation of FIT’s Code of Conduct and deemed to receive an “F” for a course may not withdraw from the course prior to final grade assignments.

FIT Student Code of Conduct
Student Disability Services
Academic Honesty and Integrity Policy
FIT’s Course Withdrawal Policy 
Children on campus policy
Academic Advisement Center 
FIT Writing & Speaking Studio
FIT Counseling Services
Academic Skills Tutoring Center
Dean of Students Office
Technical Support for Blackboard with Open SUNY Help Desk

Additional Course Information:

Credits/Hours: 2/3

Grade appeal process: http://www.fitnyc.edu/registrar/grades/appeal.php for more information.

Library Resources: FIT Library Databases

Academic Advisement Center: http://www.fitnyc.edu/academic-advisement/index.php

Technical Requirements: High-speed internet and Adobe CC

Textbooks and Required Materials: Lecture slides will be provided every week after class,