CT304 601/602 (S24)
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 2024
Professor: Christie Shin
Design Studio: Cynda Media Lab
Program Portfolio: @newcreatives.info (Instagram), Behance
Email: christie_shin@fitnyc.edu
Classroom: C315/D514
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 Kinetic Typography
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 extends a powerful brand identity and helps creative teams explore new possibilities.
Student Learning Outcomes
Upon completion of the course, students will be able to:
- Understand a product design framework: discover, define, ideate, design & develop, and deliver.
- Discover users’ pains, needs, and goals through extensive user research, including empathy interviews, personas, and experience maps.
- Improve user experience through user testing.
- Establish the design system with a clear guideline of the foundation and documentation of how to use it and when to use it.
- Formulate design system concepts to maintain a consistent user experience across every part of the digital product.
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 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 of their user experience and creative potential:
Connected experience
– Fintech (Venmo)
– Mental 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: 30 points, final presentation: 30 points)
2. Professionalism (attendance, participation, weekly progress: 40 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
Weekly outline is subject to change according to the pedagogical needs.
Week 1-S1: 1/29 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-S2: 1/31 Wed
1. Presentation: User Experience Refined Candidates (5 minutes)
2. Lecture
– Heuristic evaluation
– Competitor analysis
3. Homework
– Research: Brand Profile Summary (Target audience, Core values, mission, and vision., Purpose statement, Value proposition, Positioning statement, Archetype, Personality, Tone of voice, Tagline/slogan)
– Heuristic evaluation
– Competitor analysis (3)
Week 2-S3: 2/5 Mon
1. Lecture
– Design thinking
– Market segmentation
– Proto-persona
– IA: app map
2. In-class workshop
– Group review
3. Homework
– Market segmentation
– Type of users (3-4 types)
– Current app map
Week 2-S4: 2/7 Wed
1. Lecture
– Empathy interviews
– Interview planning (2 per member, do as a pair)
2. In-class workshop
– Group review
– Interview planning
3. Homework
– Empathy interviews & documentation
– Proto-persona
Week 3-S5: 2/12 Mon
1. Lecture
– Affinity map
2. In-class workshop
– Affinity map
3. Homework
– Summarize affinity mapping & define key insights
Week 3-S6: 2/14 Wed
1. Lecture
– Persona
– Empathy map
2. In-class workshop
– Group review
3. Homework
– Empathy map
– Qualitative persona
—— 2/19: Presidents Day – College closed——
Week 4-S7: 2/21 Wed
1. Lecture
– Mapping techniques
– Journey map
2. In-class workshop
– Group review
– Journey map scope
3. Homework
– Journey map first draft
Week 5-S8: 2/26 Mon
1. In-class workshop
– Group review
2. Homework
– Journey map
Week 5-S9: 2/28 Wed
1. Lecture
– POV
2. In-class workshop
– Group review
4. Homework
– Complete POV & POV selection
Week 6-S10: 3/4 Mon
1. Lecture
– HMW
2. In-class workshop
– Group review
3. Homework
– Complete HMW & HMW selection
– Answers to HMW
Week 6-S11: 3/6 Wed
1. Lecture
– Idea generation
– MVP
2. In-class workshop
– Group review
3. Homework
– Idea generation-20 per student
Week 7-S12: 3/11 Mon
1. Lecture
– MVP
– Value proposition
2. In-class workshop
– Group review
3. Homework
– MVP worksheet
– Selected ideas (define features)
– Explain how it works (sketches)
– Explain how it solves your user’s problem
Week 7-S13: 3/13 Wed
1. Lecture
– Paper prototype testing
2. In-class workshop
– Group review
3. Homework
– Define the task flow
– User testing: Paper prototype testing
Week 8-S14: 3/18 Mon
1. Lecture
– Card sorting
– Information Architecture
2. In-class workshop
– Group review
-Paper prototype testing
3. Homework
– New App map
-Wireframe (digitizing)
Week 8-S15: 3/20 Wed
1. Lecture
– Usability test
2. In-class workshop
– Group review
– Wireframe – Round 2
3. Homework
– Wireframe final
– Midterm presentation outline
– Usability test (low-fidelity)
—— 3/25-3/31Spring Recess – College closed——
Week 9-S16: 4/1 Mon
1. In-class workshop
– Midterm presentation prep
2. In-class workshop
– Midterm presentation outline
3. Homework
– Midterm presentation
Week 9-S17: 4/3 Wed
Midterm presentation
Week 10-S18: 4/8 Mon
1. Lecture/Demo
– IxD – Prototyping with Figma 1
2. In-class workshop
– Prototyping
3. Homework
– Prototyping
Week 10-S19: 4/10 Wed
1. Lecture/Demo
– IxD – Prototyping with Figma 2
2. In-class workshop
– Prototyping
3. Homework
– Usability test – minimum three per student
– Design direction (design principles, motifs)
Week 11-S20: 4/15 Mon
1. In-class workshop
– Group review
2. Homework
– UI design exploration
Week 11-S21: 4/17 Wed
1. In-class workshop
– Group review
2. Homework
– UI design round 1
– Case study script 1 + Storyboard
Week 12-S22: 4/22 Mon
1. In-class workshop
– Group review
2. Homework
– UI design round 2
Week 12-S23: 4/24 Wed
1. In-class workshop
– Group review
2. Homework
– UI design round 3
– Case study prep round 2
Week 13-S24: 4/29
1. In-class workshop
– Group review
2. Homework
– UI design final
– Case study prep round 3
Week 13-S25: 5/1
1. In-class workshop
– Group review
2. Homework
– Design system
– Case study – animatic
Week 14-S26: 5/6 Mon
1. In-class workshop
– Group review
2. Homework
– Case study video
Week 14-S27: 5/8 Wed
1. In-class workshop
– Group review
2. Homework
– Case study video
– Presentation prep
Week 15-S28: 5/13 Mon
1. In-class workshop
– Group review
2. Homework
– Final presentation outline
Week 15-S29: 5/15 Wed
Final presentation
1. Homework
– Final file submission
Week 16-S30: 5/20Mon
Final submission & Final review
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 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.
- Students are required to attend all classes, be on time, and remain for the entire class.
- Students who miss three classes for classes meeting once a week or four classes for classes meeting twice a week will receive a grade of “F.”
- The student who arrives 10 minutes after the start of the class will be considered late.
- Two 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.
- 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.
- 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.
Department Policy on Plagiarism
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.
Use of AI tools
It is permissible to utilize AI tools in your creative process. However, you must identify which AI tool is being used at each stage of the process. You are required to fact-check AI output and avoid stereotyping and bias in your work. Finally, you are responsible for ensuring that the final creation is unique, ownable, and without any copyright issues.
Fact-checking AI output
AI tools are not infallible. They often generate incorrect or misleading information. It is your responsibility to fact-check any AI output before using it in your work. This includes checking the source of the information, evaluating the quality of the information, and considering the context in which the information was generated.
Avoiding stereotyping and bias
AI tools can be trained on data that contains stereotypes and biases. This can lead to AI output that is also biased. It is your responsibility to avoid the potential for bias in AI output. You should also be mindful of your own biases when using AI tools and take steps to mitigate them.
Ensuring the uniqueness and ownership of your work
You are responsible for ensuring that the final creation of your work is unique and ownable. This means that you must not plagiarize the work of others, including submitting works done solely by AI tools without meaningful improvement and input from you.
Penalty for violation
Violation of this policy may result in a grade reduction or suspension from the class.
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: 3 credits; 2 lecture and 2 lab hours
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,