CT304 601/602 (S22)

Design Systems for UX & UI

Date & Time:
602: Monday 2:10 pm – 4:00 pm & Wednesday 12:10 pm – 2:00 pm
601: Monday 4:10 pm – 6:00 pm & Wednesday 2:10 pm – 4:00 pm
Semester: Spring 2022
Professor: Christie Shin
Design Studio: Cynda Media Lab
Program Portfolio: @newcreatives.info (Instagram), Behance
Email: christie_shin@fitnyc.edu
Classroom: C315
Office at FIT: D317 (email to schedule a remote meeting)
Office Hours: Monday 1 to 2, Wednesday 4 to 6, Thursday 5 to 6
Prerequisites: AD383 Strategy Planning and Brand Campaigns & CT300 Typography for Digital Content Design
Slack: Please join the class Slack channel. This is the main communication hub.
Figma Team/FIT Spring 2022
FIT Help Desk: TechHelp

Course Description
This advanced digital product design course focuses on human-centered design thinking methodology for problem-solving and approaches design solutions with a design system, including visual, audio, time-based, interactive, and behavioral components for user experience design (UX) and user interface design (UI). A successful design system is an extension of brand identity and helps creative teams explore new possibilities.

Student Learning Outcomes
Upon completion of the course, students will be able to:
1. Understand a product design framework: discover, define, ideate, design & develop, and deliver.
2. Establish the design system with a clear guideline of the foundation and documentation of how to use it and when to use it.
3. Formulate design system concepts to maintain a consistent user experience across every part of the digital product.
4. Create scalable digital products in different touchpoints with a consistent and cohesive design system.
5. Develop micro-interaction guidelines to elevate accessibility, usability, and improve learnability.

Project
User Experience Redefined: Propose digital product concepts. Students develop product features through the design thinking methodology. Followed by heuristic research, define the problem, ideate the concept, and design a UX enhanced digital product. Students create features of digital products based on users’ needs and goals and enhance the branded experience with a cohesive design system.
Each team will select three possible apps from the provided list and do a quick review on its user experience and creative potentials:

– Health & Fitness App
– Lifestyle App
– Local-Search /Travel App (such as Yelp, TripAdvisor…etc.)
– Transit App (such as MyMTA, NJ Transit…etc.)
– Educational App
* This is a team project. From a team with 3 people.

Deliverables
– Heuristic evaluation
– Competitor analysis
– Research and empathy interviews
– User research (persona(s), affinity map, empathy map, journey map…etc.)
– POV / Hypothesis
– HMW
– Opportunity statement
– Value proposition and MVP proposal
– App Map
– Wireframes & prototype
– Usability testing
– Mid-fidelity prototype
– Mid-term presentation (ex: Trip Advisor, Norwegian )
– Final presentation (High-fidelity UI design, design system, case study video)

Evaluation
1. User Experience Redefined (midterm presentation: 30 points, final presentation: 40 points)
2. Professionalism (attendance, participation, weekly progress: 30 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-1: 1/31/2022 Mon
1. Introduction of the class and syllabus.
– Miro sign-up

2. Lecture
– Design thinking
– Project introduction (examples)
– Heuresttic evaluation

3. In-class workshop
– Team forming & elect a team captain
– Slack group channels set up
– Figma project set up
– Google drive set up
– Brand selection

4. Homework
– Presentation: User Experience Refined Candidates (5 minutes)

Week 1-2: 2/2/2022 Wed
1. Presentation: User Experience Refined Candidates (5 minutes)

2. Lecture
– Competitor analysis
– Research methodology

3. Homework
– Presentation: Heuristic Evaluation & Competitor Analysis & Research Findings (5 minutes)

Week 2-1: 2/7/2022 Mon
1. Presentation: Heuristic Evaluation & Competitor Analysis & Research Findings (5 minutes)

2. Lecture
– Market segmentation
– Card sorting
– UX sitemap

3. Homework
– Market segmentation
– Proto-persona
– Current app map

Week 2-2: 2/9/2022 Wed
1. Assignment due:
– Market segmentation
– Proto-persona
– Current app map

2. In-class workshop
– Group review
– Interview planning

3. Homework
– Empathy interviews

Week 3-1: 2/14/2022 Mon
1. Assignment due:
– Empathy interviews

2. Lecture
– Affinity map

3. In-class workshop
– Affinity map

4. Homework
– Presentation: Summarize affinity mapping & define key insights

Week 3-2: 2/16/2022 Wed
1. Presentation: Summarize affinity mapping & define key insights

2. Lecture
– Persona
– Empathy map

3. Homework
– Empathy map
– Qualitative persona

—— 2/21: President Day – College closed——

Week 4-1: 2/23/2022 Wed
1. Assignment due:
– Empathy map
– Qualitative persona

2. Lecture
– Mapping techniques
– Journey map

3. In-class workshop
– Journey map scope

4. Homework
– Journey map first draft

Week 4-2: 2/28/2022 Mon
1. Assignment due:
– Journey map first draft

2. In-class workshop
– Group review

3. Homework
– Journey map
– Comprehensive persona

Week 5-1: 3/2/2022 Wed
1. Assignment due:
– Journey map
– Comprehensive persona

2. Lecture
– POV

3. In-class workshop
– Journey map & persona review
– POV

4. Homework
– Complete POV & POV selection

Week 5-2: 3/7/2022 Mon
1. Assignment due:
– Complete POV & POV selection

2. Lecture
– HMW

3. In-class workshop
– HMW

4. Homework
– Complete HMW & HMW selection
1. Assignment due:
– Complete HMW & HMW selection

2. Lecture
– Idea generation
– MVP

3. In-class workshop
– Idea generation-20 per student

4. Homework
– MVP worksheet

Week 6-1: 3/9/2022 Wed
1. Assignment due:
– Finalized features & task flows

2. Lecture
– Paper prototype testing

3. In-class workshop
– Paper prototype testing

4. Homework
– Wireframe (mid-fidelity: digitizing)

Week 6-2: 3/14/2022 Mon
1. Assignment due:
– Wireframe (mid-fidelity: digitizing)
– New App Map

2. In-class workshop
– Low-fi prototype

3. Homework
– Wireframe revision
– Low-fi prototype

Week 7-1: 3/16/2022 Wed
1. Lecture
– Usability test

2. In-class workshop
– Usability test planning

3. Homework
– Usability test – minimum three per student

Week 7-2: 3/21/2022 Mon
Wireframe revision

Week 8-1: 3/23/2022 Wed
1. In-class workshop
– Midterm presentation

Week 8-2: 3/28/2022 Mon
1. Midterm Presentation

Week 9-1: 3/30/2022 Wed
1. In-class workshop
– Design direction (design principles, motifs)

Week 9-2: 4/4/2022 Mon
1. Presentation
– Design direction (design principles, motifs)

2. Homework
– Design direction

Week 10-1: 4/6/2022 Wed
1. Assignment due:
– Design direction

2. In-class workshop
– Review design direction

3. Homework
– UI design round 1

—— 4/11-4/17 Spring Recess – College closed——

Week 10-2: 4/18/2022 Mon
1. Assignment due:
– UI design round 1

2. In-class workshop
– Group review

3. Homework
– UI design round 2

Week 11-1: 4/20/2022 Wed
1. Assignment due:
– UI design round 2

2. In-class workshop
– Group review

3. Homework
– UI design round 3

Week 11-2: 4/25/2022 Mon
1. Assignment due:
– UI design round 3

2. In-class workshop
– Group review

3. Homework
– Design System

Week 12-1: 4/27/2022 Wed
1. Assignment due:
– Design System

2. In-class workshop
– Group review

3. Homework
– Interaction Design

Week 12-2: 5/2/2022 Mon
1. Assignment due:
– Interaction Design

2. In-class workshop
– Group review

3. Homework
– Casestudy video script & storyboard

Week 13-1: 5/4/2022 Wed
Week 13-2: 5/9/2022 Mon
Week 14-1: 5/11/2022 Wed
Week 14-2: 5/16/2022 Mon
Week 15-1: 5/18/2022 Wed

1. Assignment due:
– WIP

2. In-class workshop
– Group review

3. Homework
– Case study video style frame
– Case study video WIP

Week 15-2: 5/23/2022 Mon
Final Presentation

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 Spring 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, Spring 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 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,