CT341 601/602

Design for Web-based UI

Professor: C. J. Yeh
Company website: Cynda Media Lab
Email: chinjuz_yeh@fitnyc.edu
Office at FIT: D317
Office Hours: Mon. 12-1, Wed. 4-5, and Thur. 12-1
FIT Tutoring Center: A608B

Course Description

This advanced digital design course focuses on the process of creating a design system including visual, audio, time-based, interactive, and behavioral components that can be assembled to build any number of applications. A successful design system provides a centralized, and evolving map of a brand’s known product territories with directional pointers to help creatives explore new possibilities.

Weekly Outline

Mon: 01/27 (w1)

  • Introduction of the course & distribute the syllabus
  • Project 1: Difference Maker
    Download and Read the D&AD BBC Brief Here
    Each student team (2 to 3 students) will create a new data-driven product or service for BBC that connects the physical environment and digital data-sphere. The target is 16-24 year olds, and the goal is to encourage positive data usage to support and encourage societal good, entertainment, and individual empowerment. At the same time, this solution must have a key tie in to BBC. Consider both what BBC offers now and should or should offer in the future as a public broadcaster.

    Deliverables:
    – Case study video (maximum duration: 2 minutes)
    – Other optional supportive work such as prototype and mockups
  • In-Class Workshop: Team forming and start assignment #1 Winning Formula
  • Assignment: Winning Formula
    – Each team will review 4 to 6 (minimum 2 per student) award-winning Future Lions case study videos and analyze:
    1. narrative flow and time allocation
    2. key fact(s)
    3. target segmentation
    4. primary functional goal
    5. differentiation
  • Lecture/Discussion: Target Segmentation
  • Click here to see past Future Lions winners

Wed: 01/29 

  • Winning Formula Review (upload before you come to class)
  • Lecture/Discussion: Research Methodologies
  • Bonus Lecture: Empathy Interview Techniques
  • Assignment: Desk Research
    Five (5) examples of multi-sensory design, five (5) examples of data-driven products/services, and the ten (10) Gen-Z traits/facts that have interesting creative potentials.

Mon: 02/03  (w2)

  • Presentation: Favorite Future Lions video (1) plus desk research summaries (2%)
  • Lecture/Discussion: Insight Statement
  • Assignment: Target and Insight Statements (key fact(s), target segmentation, and insight statement) EXAMPLE
    Create a total of 3 possible Insight Statements that you like to design for. Each should be inspired by a crucial Gen-Z trait/fact.

Wed: 02/05

  • Design Thinking Exercise: Wallet Project
  • Team review / In-Class Workshop: Target Insight Statement

Mon: 02/10 (w3)

  • Presentation (3%): Target and Insight Statements (one will be selected for further development)
  • Lecture/Discussion: Competitor Analysis and MVP
  • In-class Workshop / Homework Assignment: Product Framework
    – Competitor analysis, Job-To-Be-Done, MVP (key features), differentiation, core technologies, and journey map

Wed: 02/12

  • In-class Workshop / Homework Assignment: Product Framework
    – Competitor analysis, Job-To-Be-Done, user stories, differentiation, MVP, core technologies, key features, and journey map

Mon: 02/17 (w4)

  • President’s Day, College Closed

Wed: 02/19

  • Team Review (5%): Product Framework upload to Google Drive before coming to class
    – Job-To-Be-Done, user stories, competitor analysis, differentiation, MVP, core technologies, key features, and journey map
  • In-class Workshop / Homework Assignment: Script, Audio Choice(s) and Moodboard(s)

Mon: 02/24 (w5)

  • In-class Workshop:
    – Script, Audio Choice(s) and Moodboard(s)
    – Team review/critic

Wed: 02/26

  • Team Review: Script, Audio choice(s), and Moodboard(s) 5%
  • In-class Workshop:
    – Case study video production begins
    – Team review/critic

Mon: 03/02 (w6)

  • In-class Workshop:
    – Case study video production
    – Presentation deck design
    – Team review/critic

Wed: 03/04

  • In-class Workshop:
    – Case study video production
    – Presentation deck design
    – Team review/critic

Mon: 03/09 (w7)

  • Lecture/Discussion: The Ultimate UX/UI Elements Death Match
  • In-class Workshop:
    – Case study video production
    – Presentation deck design
    – Team review/critic

Wed: 03/11

  • In-class Workshop:
    – Case study video production
    – Presentation deck design
    – Team review/critic

Mon-Wed: 03/16 and 3/18 (w8) Classes canceled

Mon: 03/23(w9)

  • In-class Workshop:
    – Case study video production
    – Presentation deck design (3 to 5 slides including a quick recap and the case study video)
    – Team review/critic

Wed: 03/25

  • Presentation: Difference Maker
  • Project 2: Design Solutions
    Each team (3 students per team) will redesign an existing website that has great potential yet fails to address its intended goal and purpose. The objective is to create a design system for a multi-screen immersive brand experience that is consistent, purposeful, goal-oriented, and result-driven.

    Deliverables:
    – About: mission/history, competitor analysis, target segmentation…etc.
    – Positioning: brand mantra/essence, brand position, brand attributes/personality…etc.
    – Interaction Design: value propositions (key features), personas/moodboard, sitemap, flow chart (if applicable), user flow, wireframe…etc.
    – Visual System Design: logo, color palette, typography, grid and spacing, icons, UI elements, sample screen designs…etc.
    – Microinteraction animations
    – Presentation deck
  • Assignment: the Worse Website Ever!!! (three options)
    – 3 main problems of the site (focus on usability, IA, user experience…etc. ***Don’t just find a website that is ugly***)
    – Why this is a website worth redesigning (discuss the potentials and why it will be portfolio worthy)
    – Competitors
  • In-class Workshop:
    – Design Solution Project starts

Mon: 03/30 (w10)

  • Presentation: The Worse Website Ever!!!
  • Lecture/Discussion: Branding
  • In-class Workshop:
    – Target segmentation, competitor analysis, and persona
    – Brand archetype
    – Brand positioning statement
    – Brand mantra

Wed: 04/01 

  • Lecture: Value Proposition & MVP
  • Workshop:
    – Target segmentation
    – Competitor analysis
    – Persona(s)
    – Brand archetype
    – Brand positioning statement
    – Brand mantra
    – Insight statement
    – Value proposition
    – Key feature set

SPRING BREAK! (April 06 to 10)

Mon: 04/13 (w11)

  • Team review: brand archetype, brand positioning, brand mantra, target segmentation, competitor analysis, persona, insight statement, value proposition, key feature set (5%)
  • In-class Workshop:
    – Design development (sitemap, flowchart, moodboard, icons, color palette, type paring, photo/illustration style, UI components…etc,)

Wed: 04/15

  • Lecture/Discussion: Design System I
  • In-class Workshop:
    – Design development (sitemap, flowchart, moodboard, icons, color palette, type paring, photo/illustration style, UI components…etc)

Mon: 04/20 (w12)

  • Lecture/Discussion: Design System II
  • In-class Workshop:
    – Design system development (persona, sitemap, flowchart, moodboard, icons, color palette, type paring, photo/illustration style, UI components…etc,)

Wed: 04/22

  • In-class Workshop:
    – Small group review: design system drafts (5%)

Mon: 04/27 (w13)

  • Lecture/Discussion: Design System III
  • In-class Workshop:
    – Design system, microinteraction, and prototype development

Wed: 04/29

  • In-class Workshop:
  • – Design system, microinteraction, and prototype development

Mon: 05/04 (w14)

  • In-class Workshop:
    – Booklet design

Wed: 05/06

  • In-class Workshop:
    – Booklet design

Mon: 05/11 (w15)

  • In-class Workshop:
    – Small group review: booklet design complete (5%)

Wed: 05/13

  • In-class Workshop:
    – Booklet final draft review
    – Final presentation design

Mon: 05/18 (w16)

  • All project files upload to Google Drive for final grading (20%)

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. Three absents will result in a one letter grade deduction.
  3. Students who are 4 classes will receive a grade of “F.”
  4. Student who arrives 10 minutes after the start of the class will be considered late
  5. 2 late occurrences = one absence
  6. A student who arrives over 30 minutes late or not returning from the break will be considered absent from the class
  7. 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
  8. 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

  • Professionalism and Class Participation: 30%
  • First Project: 35%
  • Second Project: 35%
  • (A: 91% or above, B: 90% – 71%, C: 70% – 61%, D: 60% – 51%, F: 50% or below)

Uploading Files for Final Grades

  • CT341 601
  • CT341 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
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