Close

CT304

Design Systems for UX/UI

Spring 2025

Section

601/602

Date & Time

Section 602: Monday 2:10 PM – 4:00 PM & Wednesday 12:10 PM – 2:00 PM, Feldman Center C315
Section 601: Monday 4:10 PM – 6:00 PM (C315) & Wednesday 2:10 PM – 4:00 PM (C511)

Professors

Christie Shin

Classroom

C315, C511

Pre-requisite(s)

AD383 Strategy Planning and Brand Campaigns & CT300 Kinetic Typography

Credits/Hours

3 credits; 2 lecture and 2 lab hours

School

School of Art & Design

Major

Advertising & Digital Design BFA

Minor

NA

Office Hours

Monday 1 to 3, Tuesday 12 to 1, Wednesday 4 to 6

Office at FIT

D317 (email to schedule a remote meeting)
christie_shin@fitnyc.edu

Course Description

This advanced digital product design course emphasizes human-centered design thinking methodologies to uncover users' problems and develop solutions based on thorough user research. A consistent design system across user and stakeholder touchpoints will ensure a positive, branded experience.Student Learning Outcomes

Upon successful completion of the course, students will be able to:

  1. Understand the product design framework, which includes the stages of discover, define, ideate, design & develop, and deliver.

  2. Identify users' pain points, needs, and goals through comprehensive user research methods, such as empathy interviews, persona creation, and experience mapping.

  3. Enhance user experiences through user testing and iterative improvements.

  4. Establish a design system with clear guidelines and documentation detailing its foundation and application.

  5. Create a case study video that effectively communicates problem-solving solutions in a compelling narrative format.

Project: User Experience Redefined

Students will discover and define users' problems through empathy interviews and develop product features using the design thinking methodology. This comprehensive process includes heuristic analysis, in-depth user research, problem definition, ideation, and designing a UX-enhanced digital product. The project emphasizes creating features that address users' needs and goals while reinforcing the branded experience with a cohesive design system. The final deliverable will be a compelling case study video.

Each team will select three potential apps from the provided list and conduct a brief evaluation of their user experience and creative potential.

App Categories

  • Fintech (e.g., Venmo)

  • Productivity Apps

  • Lifestyle Apps

  • Local Search/Travel Apps (e.g., Yelp, TripAdvisor)

  • Educational Apps

  • Health Apps

  • Exclusions

  • No E-commerce Apps

  • No Social Media Apps

Deliverables

  1. Heuristic Evaluation

  2. Competitor Analysis

  3. Research and Empathy Interviews

  4. User Research

    • Personas

    • Affinity Map

    • Empathy Map

    • Journey Map

  5. POV Statement / Hypothesis

  6. HMW Questions

  7. Value Proposition and MVP Proposal

  8. App Map

  9. Wireframes & Prototype

  10. Usability Testing

  11. Mid-Fidelity Prototype

  12. Mid-Term Presentation: UX research and feature ideas (strategy)

  13. Final Presentation

    • High-Fidelity UI Design

    • Design System

    • Case Study Video

Deliverables & Evaluation

  1. User Experience Redefined (midterm presentation: 30 points, final presentation: 30 points)

  2. Professionalism (attendance, participation, weekly progress: 40 points)

Course Weekly Outline:

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

Week 1A

  • Introduction - syllabus

  • Project introduction (examples)

  • Miro, Slack, Figma

  • Team forming

  • Brand selection



  • – Homework –
    Presentation: User Experience Redefined 3 Candidates (5 minutes)

Week 1B

  • User Experience Redefined 3 Candidates (5 minutes)

  • Heuristic evaluation

  • Competitor analysis

  • Market segmentation



  • – Homework –
    Research: Brand profile Summary
    Market segmentation (primary, secondary)
    Heuristic evaluation
    Competitor analysis (3)

Week 2A

  • Design thinking

  • Proto-persona

  • – Group Meeting –

  • – Homework –
    Type of users (3-4 types)
    Proto-persona

Week 2B

  • Information architecture: app map

  • Empathy interviews

  • Interview planning (2 per member, do as a pair)

  • – Group Meeting –

  • – Homework –
    Current app map
    Empathy interviews & documentation (miro)

Week 3A

  • Card sorting

  • Affinity map

  • – Homework –
    Summarize affinity mapping
    Define key insights

Week 3B

  • Persona

  • Mapping techniques

  • Empathy map

  • Journey map

  • – Group Meeting –

  • – Homework –
    Empathy map
    Qualitative persona
    Journey map scope

Week 4A

  • Journey map workshop

  • – Group Meeting –

  • – Homework –
    Journey map

Week 4B

  • Singapore Conference

  • Journey map first draft (scope)

Week 5A

  • Singapore Conference

  • Journey map

Week 5B

  • POV

  • – Group Meeting –

  • – Homework –
    Complete POV
    POV selection

Week 6A

  • HMW

  • – Group Meeting –

  • – Homework –
    Complete HMW
    HMW selection
    Answers to selected HMW

Week 6B

  • (Answer to HMW Qs ->) Idea generation

  • MVP

  • Feature development

  • – Group Meeting –

  • – Homework –
    Answers to the selected HMW Qs — Idea generation (150 Plus)
    Selected HMW Answers (Voting)
    MVP worksheet per persona
    Selected MVP (1 to 2)
    Define the feature based on your selected MVP

Week 7A

  • Information architecture

  • Flow chart

  • Taskflow

  • – Group Meeting –
    Feature development

  • – Homework –
    Define the feature based on your selected MVP
    Develop a flow chart
    Develop a task flow

Week 7B

  • Information architecture

  • Sketch, wireframe

  • – Group Meeting –

  • – Homework –
    Selected solution (features)
    Explain how it works (sketches)
    Explain how it solves your user’s problem
    Paper prototype

Week 8A

  • Paper prototyping test

  • Usability test

  • Usability test planning

  • – Group Meeting –

  • – Homework –
    Digitized wireframe
    New app map
    First usability testing - internal

Week 8B

  • – Group Meeting –

  • – Homework –
    Wireframe final
    Usability test - minimum three per student
    Midterm presentation outline

Week 9A

  • – Group Meeting –

  • – Homework –
    Midterm presentation prep

Week 9B

  • Midterm presentation

Week 10A

  • Design direction (design principles, motifs)

  • – Homework –
    Design direction (design principles, motifs)

Week 10B

  • IxD

  • – Group Meeting –

  • – Homework –
    UI design exploration

Week 11A

  • IxD

  • – Group Meeting –

  • – Homework –
    Final UI design
    Case study script

Week 11B

  • – Group Meeting –

  • – Homework –
    Progress on:
    UI design
    IxD design
    Design system
    Case study
    Final presentation

Week 12A

  • – Group Meeting –

  • – Homework –
    Progress on:
    UI design
    IxD design
    Design system
    Case study
    Final presentation

Week 12B

  • – Group Meeting –

  • – Homework –
    Progress on:
    UI design
    IxD design
    Design system
    Case study
    Final presentation

Week 13A

  • – Group Meeting –

  • – Homework –
    Progress on:
    UI design
    IxD design
    Design system
    Case study
    Final presentation

Week 13B

  • – Group Meeting –

  • – Homework –
    Progress on:
    UI design
    IxD design
    Design system
    Case study
    Final presentation

Week 14A

  • – Group Meeting –

  • – Homework –
    Final presentation outline

Week 14B

  • – Group Meeting –

  • – Homework –
    Final presentation

Week 15A

  • Final presentation

Week 15B

  • Final file submission

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.

  1. Students are required to attend all classes, be on time, and remain for the entire class.

  2. 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.”

  3. The student who arrives 10 minutes after the start of the class will be considered late.

  4. Two 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.

Additional Course Information:
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.