CT302 601(F22)

Digital Product Design I

Section: 601
Date & Time: Thursday 2:10 am – 5:00 pm
Semester: Fall 2022
Professor: Christie Shin
Company website: Cynda Media Lab
Program Portfolio: Behance, Instagram
Email: christie_shin@fitnyc.edu
Classroom: D514
Office at FIT: D317
Office Hours: Monday 1 to 3, Tuesday 2 to 3, Wednesday 2 to 3
Schedule a meeting: Calendly
Corequisite: CT300 Typography for Digital Content Design
Slack: CT302-601
Figma Team/FIT Fall2022
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 Rubric
1. Group (research, analysis, wireframe, prototype): 20 points
2. Solo (UI design, responsive design, design system, presentation): 60 points
3. Professionalism (attendance, participation, etc.): 20 points

A/A-: 90% or above (A 95 points above, A- 90-94 points)
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: 9/1/2022 THU
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 of three competitors)

—— 9/5 Labor Day – College closed ——

Week 2: 9/8/2022 THU
1. Student presentation
– 01. Project brief
2. Guest Speaker
3. In-class activity
– Task flow analysis review
4. Homework
– Competitor analysis
– Wireframe sketch – content block

Week 3: 9/15/2022 THU
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/22/2022 THU
1. Lecture
– Information Archtecture
2. In-class activity
– Wireframe review
3. Homework
– Wireframe (desktop)
– Click-through prototype

—— 9/26, 9/27 Rosh Hashanah – College closed ——

Week 5: 9/29/2022 THU
1. Lecture
– UI vs UX
– Design motifs
2. In-class activity
– Wireframe review
– Set up an individual file
3. Homework
– Design motifs (3)

—— 10/4 Yom Kippur – Classes suspend at 4 pm. 10/5 Yom Kippur – College closed ——

Week 6: 10/6/2022 THU
1. Lecture
– DS: Atomic design
– Components: buttons
2. In-class activity
– Design motifs review
3. Homework
– Design exploration (3): mobile homepage only

Week 7: 10/13/2022 THU
1. Lecture
– DS: Foundation
– Styles: Typescale, color, grids
2. In-class activity
– Design exploration review
3. Homework
– Task flow UI design: round 1 (mobile)

Week 8: 10/20/2022 THU
1. Lecture
– Auto-layout
2. In-class activity
– UI design review
3. Homework
– Task flow UI design: round 2(mobile)

Week 9: 10/27/2022 THU
1. Lecture
– Variants
– Interactive components
2. In-class activity
– UI design review
3. Homework
– UI design: desktop round 1

Week 10: 11/3/2022 THU
1. Lecture
– Component properties
2. In-class activity
– RWD review
3. Homework
– UI design: desktop round 2
– DS styles & components

Week 11: 11/10/2022 THU
1. Lecture
– Prototype: miro-interaction
2. In-class activity
– UI design clean-up
3. Homework
– Prototyping

Week 12: 11/17/2022 THU
1. Lecture
– Accessibility
2. In-class activity
– In-class workshop (sign-up)
3. Homework
– Component library

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

Week 13: 12/1/2022 THU
1. Lecture
– Case study prep
2. In-class activity
– In-class workshop (sign-up)
3. Homework
– Final presentation outline

Week 14: 12/8/2022 THU
1. Demo
– Keynote
2. In-class activity
– In-class workshop (sign-up)
3. Homework
– Final presentation

Week 15: 12/15/2022 THU
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 back up 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.
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 does not return 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 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 2022 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 2022
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 class. 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,