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?