CT372 602

Typography for Digital Product Design

Professor: Christie Shin
Company website: Cynda Media Lab
Email: christie_shin@fitnyc.edu
Office at FIT: D317
Office Hours: Monday 3 to 4, Wednesday 12 to 2 and 3 to 4, Thursday 5 to 6
FIT Tutoring Center: A608B

Course Description

The focus of this course is to create a branded experience with digital products. Modern typography, design system, content development, experiential design, digital signage, interactive design, user interface (visual design) and user experience (UI/UX) design principles are discussed throughout the project. Topics covered in this course include, but are not limited to, design thinking methodology, the creative process of a digital product, iterative design workflow, human-centered design, usability and wayfinding systems.

Weekly Outline
Weekly outline is subject to change according to the pedagogical needs.

Thu: 01/30 (w1) P1W1

  • Introduction of class, syllabus, projects
  • Project 1: D&AD New Blood Awards
    UX/UI/Interaction Design, Digital Service Design
    Brand: Barclays

    Use technology and innovation to develop a new digital experience, service or tool that bridges the gap between money and mental health, and provides support to those in a vulnerable situation.
  • In-Class Workshop:
    – Team forming (up to 3 members per team)
    – Review brief & resources
  • Lecture: Design thinking methodology
  • Lecture: Compiling the research report
  • Lecture: Research methods
  • Lecture: User research: field studies–Interview
  • In-Class Workshop:
    – Research planning: draft interview questions
  • Homework:
    – Research summary
    + Desk research (Barclays’ further information, etc.)
    + Comparative & competitive analysis
    – Empathy Interview & documentation (3 interviews per each member)

Thu: 02/06  (w2) P1W2

  • Lecture: Affinity map
  • In-Class Workshop:
    – Affinity map (downloading findings, research wall)
    – Persona, empathy map
  • Homework:
    – Affinity map summary
    – Persona (2-3 different stakeholder)

Thu: 02/13 (w3) P1W3

  • Checkpoint: Digitize affinity map, affinity map summary, a persona with an empathy map (each team member)
  • Lecture: Journey map
  • In-class Workshop:
    – Journey map
  • Lecture: Key insights
  • In-class Workshop:
    – Key insights
  • Homework: submit on 2/17
    – Complete journey map
    – Complete key insights

Mon: 02/17 President’s Day, College Closed

Thu: 02/20 (w4) P1W4

  • Lecture: Job-to-be-done
  • In-class Workshop:
    – JTBD
  • Lecture: User stories
  • In-class Workshop:
    – User stories
  • Lecture: HMW questions
  • In-class Workshop:
    – HMW questions
  • Homework: Select ideas & come up with solutions
    – Complete and iterate Key insight, JTBD, user stories
    – Complete and iterate HMW questions

Thu: 02/27 (w5) P1W5

  • In-class Workshop:
    – Generating answers for HMW questions
  • Lecture: 10 plus 10
  • In-class Workshop:
    – 10 plus 10
  • Review/Discussion: Review solutions
  • Homework: Select ideas & come up with solutions
    – Define a product you are going to develop
    – List three key features with description, sketches, storyboard

Thu: 03/05 (w6) P1W6

  • Progress review & group discussion
  • In-class Workshop/homework:
    – Information architecture: application map
    – Taskflow
    – Wireframes
    – UI design with hi-fidelity prototype

Thu: 03/12 (w7) P1W7

  • Progress review & group discussion
  • In-class Workshop/homework:
    – UI design with hi-fidelity prototype
    – Final presentation prep including a concept clickthrough video

Thu: 03/19 – college closed

Thu: 03/26 (w9) P1W8

  • Project Due & Presentation.
  • Project 2 Introduction: User Interface Redesign
    Redesign an App experience with new/redefined features to improve overall user experience through usability, learnability, customization, and visual communication. The principles of atomic design will be introduced.

    Categories: Possible categories including but not limited to: food, travel, e-commerce, etc. Although branding is not the focus of the assignment, the students could rebrand if that is essential to provide a better experience.

  • Next week/homework
    – Let me know whether you are going to do this project as a team or solo by tonight. So I can follow up with a more specific direction.
    – App Comparative Analysis: Identify two competitive apps from the same category. One is an example of a well-designed mobile app and the other is a poorly designed app, which you will redesign.
    – A 5 minutes presentation to share three to five things that make one app better than the other.

Thu: 04/2 (w10) P2W1

  • App Comparative Analysis presentation & discussion
  • Lecture: UI & UX design
  • Lecture: Design tools
  • Lecture: Task flow, wireframe, and UI design examples
    Task flows and Wireframes: Identify the user’s task flow that you would like to redesign. These could be improving existing features and/or creating new features.
  • Homework:
    – Two task flows with description
    – Wireframes
    – Moodboard/design direction

SPRING BREAK! (4/6-4/12)

Thu: 04/16 (w11) P2W2

  • Lecture: UI elements
  • Design Tool Demo: Figma
  • Remote-class workshop/Homework:
    – User Interface  draft 1

Thu: 04/23 (w12) P2W3

  • Lecture: Layout
  • Lecture: Typography
  • Remote-class workshop/Homework:
    – User Interface  draft 2

Thu: 04/30 (w13) P2W4

  • Lecture: Atomic Design
  • Lecture: UI Design System
  • Remote-class workshop/Homework:
    – User Interface  draft 3

Thu: 05/07 (w14) P2W5

  • Breakout session–final review
  • Remote-class workshop/Homework:
    – User Interface and design system final review

Thu: 05/14 (w15) P2W6

  • Final Presentation (5 minutes)
    1. Introduction
    – App name
    – Short description
    – Brand/category/purpose
    – Target audience (persona)
    2. Problems (challenge)
    – Short description (Less than 100 words)
    3. Solution (Taskflow 1)
    – Short description
    – Task flow
    – UI design static & a click-through prototype
    – Micro-interaction is optional
    4. Solution (Taskflow 2)
    – Short description
    – Task flow
    – UI design static & a click-through prototype
    – Micro-interaction is optional
    5. Design system
    6. Competitors analysis, Moodboard, wireframes are optional to include as process or appendix.
  • All project files upload to Google Drive for final grading

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.

  1. Students are required to attend all classes, be on time, and remain for the entire class.
  2. Students who miss three classes will receive a grade of “F.”
  3. The student who arrives 10 minutes after the start of the class will be considered late
  4. 2 late occurrences = one absence
  5. A student who arrives over 30 minutes late or not returning from the break will be considered absent from the class
  6. 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
  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.


  • Project 1: 35 points
  • Project 2: 35 points
  • Professionalism/teamwork and Class Participation: 30 points
  • A: 100 – 95, A- : 94 – 90, B+ : 89 – 85, B: 84 – 80, B- : 79 – 75, C+ : 74 – 70, C: 69 – 65, C- : 64 – 60 points

Uploading Files for Final Grades

  • CT372 601
  • CT372 602* keep all project and process files and upload before the semester is over for final grading.

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