CT341 601/602

Design for Web-based UI

Instructor: C. J. Yeh
Company website: Cynda Media Lab
Email: chinjuz_yeh@fitnyc.edu
Office at FIT: D317
Office Hours: Mon. 1-2, Wed. 4-6, 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/28 (w1)

  • Introduction of the course & distribute syllabus
  • Project 1: Difference Makers
    Each student team (2 to 3 students) will create a new product or service for a global brand to solve a problem in a way that couldn’t be done three years ago. The problem identified has to match the brand purpose, and the core technology utilized must be supported by research findings.
    Deliverables:
    – Research deck
    – Case study video (maximum duration: 2 minutes) .
    – Presentation deck
    example: Emily Frost
    example: Ashley Centrella
  • Lecture/Discussion: Target Segmentation
  • Lecture/Discussion: Insight Statement
  • In-Class Workshop: Team Forming
  • Assignment: Winning Formula
    – Each team will review 4 to 6 award winning Future Lions case study videos and analyze:
  • primary target segmentation
  • insight statement
  • primary functional goal
  • differentiation
  • narrative flow and time allocation
  • upload to class Google folder before next class
    click here to see past Future Lions winners

Wed: 01/30 

Mon: 02/04  (w2)

  • Upload & Share: New Tech, New Opportunity (2%)
  • Lecture/Discussion: Research Methodologies
  • Lecture/Discussion: Empathy Interview Techniques
  • Assignment: Target Segmentations
    Create a total of 4 possible target segmentations that you like to design for. You are required to use 4 different segmentation techniques each inspired by a different source of information: one inspired by a brand (brand purpose, mission…etc,), one inspired by a story (personal or just a story that you heard), one inspired by a new technology, and one inspired by recent news.

Wed: 02/06

  • Design Thinking Exercise: Wallet Project
  • Team review: Target Segmentation
  • In-class Workshop:
    – Complete Target Segmentations presentation

Mon: 02/11 (w3)

  • Presentation (3%): Target Segmentation upload to Google Drive before class
  • Lecture/Discussion: Target Insight Statement
  • Assignment: Problem Worth Solving (part I)
    – Target segmentation, goals/wishes, enemies, insights, target insight statements (3)

Wed: 02/13

  • Lecture/Discussion: Competitor Analysis
  • Team Review: Target Insight Statements
  • In-class Workshop: Problem Worth Solving (part II)
    – Hypothesis, competitor analysis (differentiation), core technologies, brand(s), and scenario draft.

Mon: 02/18 (w4)

  • President’s Day, College Closed

Wed: 02/20

  • Team Review (5%): Problem Worth Solving upload to Google Drive before class
    – Target segmentation, target insight statements, hypothesis, competitor analysis (differentiation), core technologies, brand(s), and scenario draft.
  • In-class Workshop / Homework Assignment: Script, Audio Choice(s) and Moodboard(s), style-frames

Mon: 02/25 (w5)

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

Wed: 02/27

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

Mon: 03/04 (w6)

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

Wed: 03/06

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

Mon: 03/11 (w7)

  • Presentation: Difference Maker
  • Project 2: Design Solutions (team competition)
    Each team (3 students per team) will redesign an existing website that has great potential yet fails to address it intended goal and purpose. The objective is to create a design system for a multi-screen immersive brand experience that are 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!!!

Wed: 03/13

  • Lecture/Discussion: Human Interface Design Guideline (a primer)
  • Team Review
  • In-class Workshop:
    – Design Solution Project starts

Mon: 03/18 (w8)

  • Presentation: The Worse Website Ever!!!
  • Team Review
  • In-class Workshop:
    – Target segmentation, competitor analysis, and persona

Wed: 03/20

  • Lecture/Discussion: Branding
  • In-class Workshop:
    – Brand archetype
    – Brand positioning statement
    – Brand mantra

Mon: 03/25 (w9)

  • Team review: brand archetype, brand positioning, brand mantra, target segmentation, competitor analysis, and persona
  • Lecture: Value Proposition
  • In-class Workshop:
    – Insight statement and HMW questions
    – Value proposition
    – Key feature set

Wed: 03/27 

  • Work from Home
  • Workshop:
    – Target segmentation
    – Competitor analysis
    – Persona(s)
    – Brand archetype
    – Brand positioning statement
    – Brand mantra
    – Insight statement and HMW questions
    – Value proposition
    – Key feature set

Mon: 04/01 (w10)

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

Wed: 04/03

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

Mon: 04/08 (w11)

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

Wed: 04/10

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

SPRING BREAK! (April 15 to 19)

Mon: 04/22 (w12)

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

Wed: 04/24

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

Mon: 04/29 (w13)

  • Class Canceled: work from home and upload progress to Google Drive

Wed: 05/01

  • Class Canceled: work from home

Mon: 05/06 (w14)

  • In-class Workshop:
    Small group review: booklet design complete and ready for printing (5%)

Wed: 05/08

  • In-class Workshop:
    – Final presentation design

Mon: 05/13 (w15)

  • In-class Workshop:
    – Final presentation design
  • Booklet Printing

Wed: 05/15

  • In-class Workshop:
    – Final presentation design

Mon: 05/20 (w16)

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

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 you 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 consider 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.

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
http://www.fitnyc.edu/policies/enrollment-management/code-of-conduct.php

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.