CT304 601/602 (S23)

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 2023
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, Tuesday 5 to 6, Wednesday 4 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. Improve user experience through user testing.
3. Establish the design system with a clear guideline of the foundation and documentation of how to use it and when to use it.
4. Formulate design system concepts to maintain a consistent user experience across every part of the digital product.
5. Create scalable digital products with a consistent and cohesive design system in different touchpoints.

Project
User Experience Redefined: Propose digital product concepts. Students develop product features through the design thinking methodology. Followed by heuristic research, defining the problem, ideating the concept, and designing a UX-enhanced digital product. Students create features of digital products based on user’s 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 of their user experience and creative potential:

– Fintech (Venmo)
– Health & Fitness App
– Lifestyle App
– Local-Search /Travel App (Yelp, TripAdvisor…etc.)
– Educational App

Deliverables
– Heuristic evaluation
– Competitor analysis
– Research and empathy interviews
– User research (persona(s), affinity map, empathy map, journey map…etc.)
– POV / Hypothesis
– HMW
– 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: 40 points, final presentation: 30 points)
2. Professionalism (attendance, participation, weekly progress: 30 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-1: 1/30/2023 Mon
1. Introduction – syllabus

2. Lecture
– Project introduction (examples)
– Research methodology

3. In-class workshop
– Team forming
– Elect a team captain
– Brand selection

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

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

2. Lecture
– Heuristic evaluation
– Competitor analysis

3. Homework
– Presentation: Heuristic Evaluation & Competitor Analysis

Week 2-1: 2/6/2023 Mon
1. Presentation: Presentation: Heuristic Evaluation & Competitor Analysis

2. Lecture
– Design thinking
– Market segmentation
– IA: app map

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

Week 2-2: 2/8/2023 Wed
1. Lecture
– Empathy interviews

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

3. Homework
– Empathy interviews

Week 3-1: 2/13/2023 Mon
1. Lecture
– Affinity map

2. In-class workshop
– Affinity map

3. Homework
– Summarize affinity mapping & define key insights

Week 3-2: 2/15/2023 Wed
1. Lecture
– Persona
– Empathy map

2. In-class workshop
– Group review

3. Homework
– Empathy map
– Qualitative persona

—— 2/20: Presidents Day – College closed——

Week 4-1: 2/22/2023 Wed
1. Lecture
– Mapping techniques
– Journey map

2. In-class workshop
– Group review
– Journey map scope

3. Homework
– Journey map first draft

Week 4-2: 2/27/2023 Mon
1. In-class workshop
– Group review

2. Homework
– Journey map

Week 5-1: 3/1/2023 Wed
1. Lecture
– POV

2. In-class workshop
– Group review

4. Homework
– Complete POV & POV selection

Week 5-2: 3/6/2023 Mon
1. Lecture
– HMW

2. In-class workshop
– Group review

3. Homework
– Complete HMW & HMW selection
– Answers to HMW

Week 6-1: 3/8/2023 Wed
1. Lecture
– Idea generation
– MVP

2. In-class workshop
– Group review

3. Homework
– Idea generation-20 per student
– MVP worksheet

Week 6-2: 3/13/2023 Mon
1. Lecture
– Value proposition

2. In-class workshop
– Group review

3. Homework
– Value proposition
– Selected ideas (features), task flow, sketches

Week 7-1: 3/15/2023 Wed
1. Lecture
– Paper prototype testing

2. In-class workshop
– Group review

3. Homework
– User testing: Paper prototype testing

Week 7-2: 3/20/2023 Mon
1. In-class workshop
– Group review

2. Homework
– New App map

Week 8-1: 3/22/2023 Wed
1. In-class workshop
– Group review

2. Homework
– Wireframe (digitizing)

Week 8-2: 3/27/2023 Mon
1. In-class workshop
– Group review

2. Homework
– Wireframe revision
– Low-fi prototype

Week 9-1: 3/29/2023 Wed
1. Lecture
– Usability test:

2. In-class workshop
– Usability test planning

3. Homework
– Usability test – minimum three per student

—— 4/3-4/9 Spring Recess – College closed——

Week 9-2: 4/10/2023 Mon
1. In-class workshop
– Group review

2. Homework
– Usability test implementation

Week 10-1: 4/12/2023 Wed
1. In-class workshop
– Group review

2. Homework
– Midterm presentation prep

Week 10-2: 4/17/2023 Mon
2. In-class workshop
– Group review

3. Homework
– Midterm presentation

Week 11-1: 4/19/2023 Wed
Midterm presentation

Week 11-2: 4/24/2023 Mon
1. In-class workshop
– Design direction (design principles, motifs)

2. Homework
– Design direction (design principles, motifs)

Week 12-1: 4/26/2023 Wed
1. In-class workshop
– Group review

2. Homework
– UI design round 1

Week 12-2: 5/1/2023 Mon
1. In-class workshop
– Group review

2. Homework
– UI design round 2

Week 13-1: 5/3/2023 Wed
1. In-class workshop
– Group review

2. Homework
– Final UI design

Week 13-2: 5/8/2023 Mon
1. In-class workshop
– Group review

2. Homework
– Presentation prep

Week 14-1: 5/10/2023 Wed
1. In-class workshop
– Group review

2. Homework
– Design system
– Presentation prep

Week 14-2: 5/15/2023 Mon
1. In-class workshop
– Group review

2. Homework
– Final presentation

Week 15-1: 5/17/2023 Wed
Final presentation

1. Homework
– Final file submission

Week 15-2: 5/22/2023 Mon
Final submission


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, you must 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. The student who arrives 10 minutes after the starting time of the class will be considered late.
  3. 2 late occurrences = one absence
  4. A student who arrives over 30 minutes late or not returning from the break will be considered absent from the class.
  5. Active class participation is required; therefore, working on projects for a different class, using digital devices for socializing (texting, social media…etc.), or playing video games during class time will be recorded as an absence.
  6. 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.
  7. 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 2023 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 2023
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: 

  1. We, the students, faculty, and classroom personnel must wear masks in all indoor FIT spaces including classrooms, studios, labs, and hallways. 
  2. 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
  3. If we arrive on campus without a mask, we must pick one up from campus security desks before entering FIT buildings. 
  4. If we don’t comply with this shared responsibility, we will be asked to leave the campus.
  5. We will monitor our health regularly, and, if feeling ill, we will stay home and seek Covid PCR testing before we return to campus.
  6. We will be mindful of spacing issues within the class, and practice reasonable distancing when practical.
  7. 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,