CT304 601/602 Spring2021
Design Systems for UX & UI
Date & Time:
601: Monday 4:10 pm – 6:00 pm & Wednesday 2:10 pm – 4:00 pm
602: Monday 2:10 pm – 4:00 pm & Wednesday 12:10 pm – 2:00 pm
Semester: Spring 2021
Professor: Christie Shin
Company website: Cynda Media Lab
Program Portfolio: Behance
Email: christie_shin@fitnyc.edu
Classroom: Zoom (Check the class Slack for Zoom information)
Office at FIT: Zoom
Office Hours: Monday 1 to 2, Tuesday 5 to 6, Wednesday 4 to 6
Prerequisite: 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 2021:
FIT Help Desk: TechHelp
Course Description
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Leading brands and companies such as Google, Apple, IBM, Spotify, and Uber have changed how they conceptualize and design digital products by incorporating their unique design systems. By utilizing a collection of reusable components, guidelines, and documentation, each of these companies has changed the pace of creation and innovation within their teams.
This advanced digital design course focuses on the process of creating a design system, including visual, audio, time-based, interactive, and behavioral components. The design system is specific to digital products with scalable and different touchpoints, i.e., websites, applications, kiosks, digital signages, etc. The project should result from collaborative efforts with considerations in User Experience and User Interface design, interaction design, and front-end development.
A successful design system is an extension of brand identity that provides a centralized, evolving map of a brand’s known product territories with a single source of truth to help creatives 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. Create scalable digital products in different touchpoints with a consistent and cohesive design system
3. Formulate design system concepts to maintain a consistent user experience across every part of the digital product
4. Establish the design system with a clear guideline of the foundation and documentation of how to use it and when to use it
5. Develop micro-interaction guidelines to elevate accessibility, usability, and improve learnability
Projects & Evaluation
1. Reimagine the service brand product. (80 points)
2. Professionalism (attendance, participation, presentation, etc./20 points)
Projects Description
Reimagine the service brand product: Create branded digital products in the service brand industry. Students initiate and progress the project based on the design thinking methodology. Followed by heuristic research, students will define the problem and ideate digital product concepts in different touchpoints. Students create content and features of digital products during the design and development phase and enhance the branded experience by making sure to implement a cohesive design system throughout all digital products.
Categories:
1. Travel
Subcategory/transportation: Airline brand in relation to airport and travel experience
– https://www.behance.net/gallery/65696377/Digital-Product-for-Penn-Station
– https://www.behance.net/gallery/50635783/Lufthansa-Infotainment-Concept
2. Food
Subcategory/restaurant: Restaurant brand in relation to a marketplace/mall
Subcategory/grocery: Supermarket brand in relation to a food shopping experience
– https://www.behance.net/gallery/65803563/Digital-Integration-In-Chelsea-Market
– https://www.behance.net/gallery/65718913/Through-the-Years-Chelsea-Market
– https://www.behance.net/gallery/65699579/Branded-Digital-Products-for-Eataly
Outcome:
// Milestone 1 (30 points)
1. UX research process & digital product proposal
// Milestone 2 (30 points)
2. Three digital products (UI design, click-through)
3. Design System (foundation, component library)
// Milestone 3 (20 points)
4. Design System (documentation)
5. Micro-interaction
6. UI design presentation
7. Case study video
Weekly Outline
Week 1-1: 1/25/2021 Mon
1. Introduction of the class and syllabus.
– Slack: set up group channels
2. Lecture
– Design thinking
– Project introduction (examples)
3. In-class workshop
– Team forming & elect a team captain
– Brand selection
Week 1-2: 1/27/2021 Wed
1. Assignment due:
Project initiative presentation
– Brand selection & analysis (desk research)
– Product and service analysis
– Target segmentation
2. In-class workshop
– Define proto persona
– Interview plan (questions, etc.)
Week 2-1: 2/1/2021 Mon
1. Assignment due:
– Proto persona (1 per member)
– Empathy Interview (3 per member)
2. Lecture
– Affinity map
3. In-class workshop
– Downloading & affinity mapping
Week 2-2: 2/3/2021 Wed
1. Assignment due:
– Affinity map summary (pattern & theme): 03. Affinity Map
– Key research findings & competitive analysis: 04. Research
2. Lecture
– UX mapping methods
– Empathy map
– Persona
3. In-class workshop
– Empathy map
Week 3-1: 2/8/2021 Mon
1. Assignment due:
– Empathy map and completed persona: 05. Persona, 06. Empathy map
2. Lecture
– Experience map
3. In-class workshop
– Experience map
Week 3-2: 2/10/2021 Wed
1. Assignment due:
– Experience map
2. Lecture
– Journey map
3. In-class workshop
– Journey map
—— 2/15: President Day – College closed——
Week 4-1: 2/17/2021 Wed
1. Assignment due:
– Journey map
2. Lecture
– Problem statement (POV)
3. In-class workshop
– Problem statement (POV)
Week 4-2: 2/22/2021 Mon
1. Assignment due:
– Problem statement (POV)
2. Lecture
– HMW
3. In-class workshop
– HMW
Week 5-1: 2/24/2021 Wed
1. Assignment due:
– HMW
2. Lecture
– Idea generation
– MVP
3. In-class workshop
– Idea generation
Week 5-2: 3/1/2021 Mon
1. Assignment due:
– MVP
– Opportunity statement
2. In-class workshop
– Team meeting
Week 6-1: 3/3/2021 Wed
1. Assignment due:
Milestone 1 (30 points)
– Complete research deck
– Product proposal (define the 3 products)
2. In-class workshop
– Project planning. Figma file set up.
Week 6-2: 3/8/2021 Mon
1. Assignment due:
– Task flow & wireframe
2. In-class workshop
– Team meeting
Week 7-1: 3/10/2021 Wed
1. Assignment due:
– Content development
– Revised wireframe
2. In-class workshop
– Team meeting
Week 7-2: 3/15/2021 Mon
1. Assignment due:
– Low-fidelity prototype (wireframe)
2. Lecture
– Variants, Interactive Components
3. In-class workshop
– Team meeting
Week 8-1: 3/17/2021 Wed
1. Assignment due:
– UI Design direction: Design System file: 01. Initial Design Directions (Design statement/objective, brand archetype, mood board, adjectives, typography, color, etc.).
2. In-class workshop
– Team meeting: design selection
Week 8-2: 3/22/2021 Mon
1. Assignment due:
– UI Design 1st draft
2. Lecture
– Design system, foundation, component library, case study video.
3. In-class workshop
– Team meeting
Week 9-1: 3/24/2021 Wed
1. Assignment due:
– UI Design revision, type scale
2. Demo
– Design system & publish a library
3. In-class workshop
– Team meeting: design system set up (publish library)
—— 3/29-4/4: Spring Recess – College closed——
Week 9-2: 4/5/2021 Mon
1. Assignment due:
– UI Design (complete flow first round)
2. Lecture
– Component library, design system example.
– Publish styles & component
– Library
2. In-class workshop
– Team meeting
Week 10-1: 4/7/2021 Wed
1. Assignment due:
– UI revision
– Type scale
– Sync with the design system
2. Lecture
– Sync with the design system
– Prototype tools: ProtoPie, Principle, Flinto
3. In-class workshop
– Team meeting
– Roles & responsibility discussion
Week 10-2: 4/12/2021 Mon
1. Assignment due:
– UI design & design system
2. In-class workshop
– Team meeting
Week 11-1: 4/14/2021 Wed
1. Assignment due:
– Final UI design due
2. In-class workshop
– Team meeting
Week 11-2: 4/19/2021 Mon
1. Assignment due:
– High-fidelity prototype
3. In-class workshop
– Team meeting
Week 12-1: 4/21/2021 Wed
1. Assignment due:
Milestone 2 (30 points)
– Three digital products (UI design, high fidelity prototype, micro-interaction)
– Design System (foundation, component library)
2. In-class workshop
Final presentation planning
– Design system (documentation)
– UI Design presentation
– Case study video
Week 12-2: 4/26/2021 Mon
1. Assignment due:
– WIP
2. In-class workshop
– Final presentation prep
Week 13-1: 4/28/2021 Wed
1. Assignment due:
– WIP
2. In-class workshop
– Final presentation prep
Week 13-2: 5/3/2021 Mon
1. Assignment due:
– WIP
2. In-class workshop
– Final presentation prep
Week 14-1: 5/5/2021 Wed
1. Assignment due:
–
2. In-class workshop
–
Week 14-2: 5/10/2021 Mon
1. Assignment due:
–
2. In-class workshop
–
Week 15-1: 5/12/2021 Wed
1. Assignment due:
–
2. In-class workshop
–
Week 15-2: 5/17/2021 Mon
Milestone 3
– Design system (documentation)
– UI Design presentation
– Case study video
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)
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.
- Just like face-to-face classes, you are expected to turn on your webcam during class time for remote learning. Contact professor if special circumstances in which webcam can not be available.
- Three absents will result in a one letter grade deduction.
- Students who miss four classes will receive a grade of “F.”
- The student who arrives 10 minutes after the start 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
- 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.
Grading / Point sytem
A : 100 – 95
A- : 94 – 90
B+ : 89 – 85
B : 84 – 80
B- : 79 – 75
C+ : 74 – 70
C : 69 – 65
C- : 64 – 60
D: 59 – 51
F: 50 or below
CT&D Recording Classroom Activities Policy
I. Introduction
Written permission is required in order to record classroom lectures, discussions, presentations (“lectures”), or other activities. When granted, permission to record lectures is subject to the limitations set forth in this policy. Violations of this policy may constitute copyright infringement in violation of federal or state law and may be subject to disciplinary action.
II. Definitions
A. Course Materials mean lecture notes, outlines, slides, Powerpoint presentations, readings, or other content made available to students by the instructor or presenter, or through any online learning system.
B. Recording means a video or audio replication or photographic image recorded on devices including, but not limited to, audio recorders, video recorders, cell phones, Smartphones, digital cameras, media players, computers, or other devices that record images or sound.
III. Requirements and Limitations
A. Written Permission
Recording of classroom lectures is prohibited unless advance written permission is obtained from the class instructor and any guest presenter(s). An instructor may provide such permission to an entire class as part of the course syllabus or other written description of a course. Students who require recording or other adaptations of lectures as a reasonable accommodation for a disability in advance of the lecture in order to obtain permission for the recording.
In the event permission to record classroom lectures is granted, the professor may notify all students, speakers and other lecture attendees in advance that recording may occur. Every effort should be made to protect the confidentiality of a student with a disability who is being granted an accommodation, i.e. the professor will not name the student who is doing the recording when it is due to disability accommodation.
B. Limitations on Use of Recordings and Materials
Permission to allow lecture recording is not a transfer of any copyrights in the recording or related course materials. Such recordings and materials may be used only for individual or group study with other students enrolled in the same class, and may not be reproduced, transferred, distributed, or displayed in any public or commercial manner.
Students must destroy recordings at the end of the semester in which they are enrolled in the class.
Communication Design Pathways Department Policy on Plagiarism
Within the Communication Design Pathways Department, 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.
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/4
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,