CT302 601/65A (F21)

Digital Product Design I

Date & Time: 601/Tuesday 9:10 am – 12:00 pm, 65A/6:30 pm – 9:20 pm
Semester: Fall 2021
Professor: Christie Shin
Company website: Cynda Media Lab
Program Portfolio: Behance, Instagram
Email: christie_shin@fitnyc.edu
Classroom: C511
Office at FIT: D317 (email to schedule a remote meeting)
Office Hours: Monday 1 to 3, Tuesday 12 to 1, Wednesday 2 to 3
Corequisite: CT300 Typography for Digital Content Design
Slack: CT302-601, CT302-65A
Figma Team/FIT Fall2021: CT302-601, CT302-65A
FIT Help Desk: TechHelp

Course Description
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 designs & prototypes in digital products
6. Create a professional quality presentation

Project
Consumer goods eCommerce website.

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 develop the wireframes based on the given task flow. This course’s core focus is to design a responsive user interface and establish a design system. The final presentation should include essential click-through prototyping.

* What is Consumer Goods?
Consumer goods are products bought for consumption by the average consumer. Alternatively called final goods, consumer goods are the end result of production and manufacturing and are what a consumer will see stocked on the store shelf. Clothing, food, furniture, and cosmetics are all examples of consumer goods. Basic or raw materials, such as copper, are not considered consumer goods because they must be transformed into usable products.

Task flow
Search a product and add it to the shopping cart
(Home page > Search > Filter > Product Page > Add an item to the shopping cart)

Design tool
Figma

Evaluation
1. Group boot camp (research, analysis, wireframe, icon design): 20 points
2. Project: 60 points
3. Professionalism (attendance, participation, presentation, etc.): 20 points

A/A-: 90% or above (A- 90-94 points, A 95 points above)
B+/B/B-: 89% – 75% (B+ 89-85 points, B 84-80 points, B- 79-75 points)
C+/C/C-: 74% – 60% (C+ 74-70 points, C 69-65 points, C- 64-60 points)
D: 59% – 51%
F: 50% or below

Weekly Outline

Week 1: 8/31/2021 TUE
1. Course introduction: Syllabus, Figma, Slack, study group, etc.
2. Project introduction
3. In-class activity
– Group forming (4 per team)
– Project search (brand selection)
4. Figma Introduction
– Workspaces
– Class file set-up (group boot camp file)
– Figma quickfire (icon design/vector drawing)

Homework 1 Three brand choices for your project (poorly designed website): Due tomorrow
Upload your brand choices on Slack by tomorrow. I will select one for you.
Tips: We are not redesigning the brand. Therefore, carefully consider the brand, which will be great for your portfolio. Study the website focusing on the task you will design, find problems, and analyze how to improve.
Homework 2 Brand profile
Research the brand and summarize the brand profile, current brand style guide if you can find it, brand archetype, target audience, etc.
Homework 3 Task flow analysis
1. Take screenshots based on the task flow and analyze them.
2. Review the content and structure of a site carefully.
3. Discover the current website’s significant challenges/problems from the task flow analysis.
4. Define opportunities
Tips: GoFullPage – Full Page Screen Capture
Homework 4 Competitor’s analysis
Focus on the UI design, content, features, and functions in the same task flow (minimum three competitors)
Homework 5 Icon design
Complete the full set of icons

—— 9/6 Labor Day, 9/7, 9/8 Rosh Hashanah – College closed ——

Week 2: 9/14/2021 TUE
1. Lecture
– Information Archtecture
– Designing wireframing with Figma (mobile)
2. In-class activity
– Group discussion/progress check (project brief)
3. Homework
– Wireframe-mobile
– Figma exercise

—— 9/15 Yom Kippur – Classes suspend at 4 pm. 9/16 Yom Kippur – College closed ——

Week 3: 9/21/2021 TUE
1. Lecture
– Responsive Web Design
– Designing wireframing with Figma (desktop)
2. In-class activity
– Group discussion/progress check (wireframe-mobile)
3. Homework
– Wireframe-desktop
– Figma exercise

Week 4: 9/28/2021 TUE
1. Lecture
– UI vs UX
– Figma basics
– Design motif (moldboard, etc.)
2. In-class activity
– Group discussion/progress check (wireframe-desktop)
– Set up an individual file
3. Homework
– Design motif (three themes)

Week 5: 10/5/2021 TUE
1. Lecture
– Design system: Atomic Design
– Design system: Foundation
2. In-class activity
– In-class workshop (sign-up)
3. Homework
– Mobile home page only (three UI design directions)

Week 6: 10/12/2021 TUE
1. Lecture
– Design system: Components
– Auto-layout basic
2. In-class activity
– In-class workshop (sign-up)
3. Homework
– Task flow UI design round 1 (mobile)

Week 7: 10/19/2021 TUE
1. Lecture
– Design process
– Prototype basic
2. In-class activity
– In-class workshop (sign-up)
3. Homework
– UI design round 2 (mobile)

Week 8: 10/26/2021 TUE
1. Lecture
– Auto-layout
2. In-class activity
– Review: Typescale. Button component. Icon component.
3. Homework
– Mobile prototype (click-through)

Week 9: 11/2/2021 TUE
Midterm checkpoint (mobile UI design & click-through prototype)
1. Lecture
– Prototype
2. In-class activity
– In-class workshop (sign-up)
3. Homework
– UI design round 1(desktop)

Week 10: 11/9/2021 TUE
1. Lecture
– Auto-layout 2
– Variants & Interactive Components
2. In-class activity
– In-class workshop (sign-up)
3. Homework
– UI design round 2 (desktop)

Week 11: 11/16/2021 TUE
1. Lecture
– Interactive Components (Interaction Design)
2. In-class activity
– In-class workshop (sign-up)
3. Homework
– Finalize design both mobile & desktop

Week 12: 11/23/2021 TUE
1. In-class activity
– In-class workshop (sign-up)
2. Homework
– Component library

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

Week 13: 11/30/2021 TUE
1. Lecture
– Accessibility
– Final presentation prep
2. In-class activity
– In-class workshop (sign-up)
3. Homework
– Design system, prototype

Week 14: 12/7/2021 TUE
1. In-class activity
– In-class workshop (sign-up)
2. Homework
– Final presentation

Week 15: 12/14/2021 TUE
Final Presentation.
Assignment due
All the required submissions (your project file must include the following: 00. Task flow Study, 01. Project Brief, 02. Competitor Analysis, 03. Wireframes both mobile & desktop, 04. Initial Design Motifs, 05. Design Explorations, 06. UI design both mobile & desktop, 07, UI Mobile Prototype, 08. UI Desktop Prototype, 09. Components/Design System, 10. Final Presentation
Final presentation (only 10. 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)

Creative Technology & Design (CT&D) Attendance Policyities Policy
Attendance is not optional. If you are going to miss a class, you must contact the professor via email before the class. Due to the quantity of material covered in CT&D courses, the professor will not be able to spend additional class time reexplaining 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.

Students are required to attend all classes, be on time, and remain for the entire class. Remote accommodation requires a Doctor’s note.
If you have to attend remotely, you must turn on your webcam during class time.
The student who arrives 10 minutes after the starting time of the class will be considered late.
2 late occurrences = one absence
A student who arrives over 30 minutes late or not returning from the break will be considered absent from the class
Active class participation is required, therefore, working on projects for a different class or using digital devices for socializing (texting, social media…etc.) or playing video games during class time will be recorded as an absence.
Students who miss three classes for classes meeting once a week, or four classes for classes meeting twice a week, will receive a failing grade.
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.

Note on Absences: Compliance with Fall 2021 Covid Protocol
For students in a testing protocol:
The Dean of Students will receive regular reports from Health Services for students who have not submitted their weekly PCR test results and are therefore non-compliant. Those students will receive an email each day of the week that they are scheduled to be at FIT reminding them that they have not submitted their information and that they are not permitted on campus until a negative PCR test or vaccination record has been submitted to the health portal. Faculty will receive an email each day of the week that their class is scheduled with a list of non-compliant students enrolled in that class. If a non-compliant student arrives at class, they will be instructed by the faculty member to leave the campus. If they refuse to comply, Public Safety will be called by the faculty member to escort the individual off-campus.

Failure to comply with weekly testing does not constitute an excused absence and/or permit a non-compliant student to attend class remotely. Extenuating circumstances will be discussed with the student’s academic department chair and dean.

Syllabi statement on classroom protocols, Fall 2021
The return to campus will mean adapting to new routines and standing together in our shared responsibilities. To support the health of our FIT community, every member of this course will commit to abide by the following guidelines:

We, the students, faculty, and classroom personnel must wear masks in all indoor FIT spaces including classrooms, studios, labs, and hallways.
We will wear masks such as N95s or other double-layered masks that cover our noses and mouths. We will follow NYC guidelines for mask-wearing: https://www1.nyc.gov/site/coronavirus/resources/facecoverings.page
If we arrive on campus without a mask, we must pick one up from campus security desks before entering FIT buildings.
If we don’t comply with this shared responsibility, we will be asked to leave the campus.
We will monitor our health regularly, and, if feeling ill, we will stay home and seek Covid PCR testing before we return to campus.
We will be mindful of spacing issues within the class, and practice reasonable distancing when practical.
We affirm that we, as members of the FIT community, will provide proof of vaccination or proof of weekly Covid PCR testing results to FIT Health Services as outlined in campus communications.

Creative Technology & Design Policy on Plagiarism
Plagiarism and other forms of academic deception are unacceptable in any CT&D classes. 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
FIT-ABLE
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,