UX Foundations for Interactive Media and Web Animations

Wireframing, Information Architecture, User Flows &
Design Systems in the AI Era

By the end of this session you will be able to:

  • Explain Information Architecture (IA)
  • Create a simple sitemap
  • Map a user flow
  • Sketch low-fidelity wireframes
  • Understand the role of design systems
  • Recognize how AI changes the design process

User Experience

Why UX Matters

Animation cannot fix a confusing product.

Good interaction design starts with:

  • User goals
  • Content hierarchy
  • Structure
  • Navigation

"What happens when users can't find what they need?"

UX Before UI

UX = How it works ← → UI = How it looks

Information Architecture
↓
User Flow
↓
Wireframes
↓
Visual Design
↓
Animation & Interaction

Information architecture

What is Information Architecture?

Information Architecture is:

"The organization and structure of content."

Goals:

  • Findability
  • Clarity
  • Predictability

Real-World Example

Think about:

  • Netflix
  • Spotify
  • Amazon

Why are items grouped the way they are? Users navigate using mental models and predicatable flows.

Mental Flows

Users expect:

Cart → Checkout Profile → Settings Search → Results

Design should match expectations.

Information Architecture Deliverable

Sitemap

Visual representation of:

  • Pages
  • Sections
  • Relationships

Example:

User flows

Navigation

How do we go from one page to another?

Good vs Bad Navigation

Good:

  • Clear labels
  • Limited choices
  • Logical grouping

Bad:

  • Too many menu items
  • Ambiguous labels
  • Deep structures

User Flows

A User Flow describes:

How a user moves through a product to achieve a goal.

Focus:

  • Goal
  • Steps
  • Decisions

User Flow Example

Goal: Buy a concert ticket

Landing Page 
↓ 
Event Page 
↓ 
Choose Ticket 
↓ 
Payment 
↓ 
Confirmation

Flow Components

Common symbols:

Rectangle = Screen Diamond = Decision Arrow = Direction

Keep flows simple.

Slide 12

Happy Path vs Edge Cases

Happy Path: Everything works.

Edge Cases:

  • Wrong password
  • Empty search
  • Payment failed

Good designers consider both.

From Flow to Screens

User Flow answers: "What happens?"

Wireframes answer: "What appears on screen?"

Wireframing

What is a Wireframe?

A wireframe is:

A low-detail representation of a screen.

Focus on:

  • Layout
  • Hierarchy
  • Content

Not colors or aesthetics.

Why Start Low Fidelity?

Benefits:

  • Fast
  • Cheap
  • Easy to change
  • Encourages feedback

Think before decorating.

Anatomy of a Wireframe

Common elements:

  • Header
  • Navigation
  • Content areas
  • Call-to-action
  • Footer

Example Wireframe

What is the primary action?

Common Wireframing Mistakes

  • Designing visually too early
  • Too much detail
  • Ignoring hierarchy
  • Skipping user goals
  • Ignoring content

Design Systems

Design System = Reusable building blocks

Includes:

  • Components
  • Patterns
  • Tokens
  • Rules

Purpose: Consistency and scalability.

Design Systems in Practice

Components:

  • Buttons
  • Navigation
  • Cards
  • Forms
  • Modals

Build once. Reuse everywhere.

UX in the AI age?

The AI Era

AI can generate:

  • Layout ideas
  • UI concepts
  • Component variations

AI cannot replace:

  • Understanding users
  • Structuring information
  • Making design decisions

New Role of the Designer

Less time:

  • Drawing repetitive screens

More time:

  • Defining systems
  • Solving problems
  • Evaluating AI outputs

AI-Assisted Workflow

Research
↓
Information Architecture
↓
User Flow
↓
AI-Assisted Wireframes
↓
Refinement
↓
Prototype

Let's practice!

Exercise

Design a website or app for:

"A local cultural event platform"

Users can:

  • Browse events
  • View details
  • Reserve tickets

Steps:

  1. Gather content:
  2. Sitemap
  3. User Flow
  4. Low-fidelity wireframes

Workshop Step 1

Create a Sitemap

Deliverable: 5–10 pages maximum

Time: 10 min

Workshop Step 2

Create a User Flow

Scenario:

"Reserve a ticket for an event"

Deliverable: One happy path

Time: 15 min

Workshop Step 3

Create Low-Fidelity Wireframes

Design:

  • Home
  • Event Detail
  • Reservation Screen
  • Confirmation Screen

Time: 25 min

Group Review

Questions:

  • Is navigation clear?
  • Are unnecessary steps removed?
  • Is the user's goal obvious?

Recap

Information Architecture = structure

User Flow = journey

Wireframe = screen blueprint

Design System = reusable building blocks

AI helps create interfaces. Designers create experiences.

Assignment

Design a complete user flow for an interactive website or application.

Requirements:

  • User goal
  • Sitemap
  • User flow diagram
  • Minimum 3 wireframes