UXD103 · Information Architecture and Wireframes

Categories: Digital Innovation
Wishlist Share

About Course

Organize content so users can find what they need, validate structure with card sorting and tree testing, map user flows and translate everything into clear, annotated wireframes in Figma.

Build · 6 hours · 4 lessons, a lab, an assessed assignment and a portfolio piece

Who it is for

Learners who understand UX basics and want to structure websites and apps before moving to visual design.

Prerequisites

UXD101 and UXD102, or equivalent experience with basic UX principles and user research.

What you will be able to do

  • Build a sitemap using appropriate organization schemes and clear labels
  • Run a card sort and a tree test and use the results to revise navigation
  • Draw user flows that cover the happy path and key edge cases
  • Produce annotated mobile-first wireframes on a consistent layout grid in Figma

Lessons

  • Lesson 1 · Organizing information people can find
  • Lesson 2 · Validating structure and mapping flows
  • Lesson 3 · Wireframing on a grid
  • Lesson 4 · Lab and assignment

Lab: Structure and wireframes for a veterinary clinic site

You restructure the website of a neighborhood veterinary clinic. You run an open card sort with five people in FigJam, build a sitemap, validate it with a simple tree test built in Google Forms and then design mobile wireframes for the three most important flows in Figma.

Free tools: FigJam and Figma free plan, Google Forms (free)

Assessed assignment

Submit your card-sort results, a revised sitemap, tree-test results with success rates per task, user flows for booking an appointment and two other key tasks, and at least six annotated mobile wireframes. Explain in one page which changes you made to the structure based on evidence and why. Annotations must describe behavior, content rules and states such as empty, loading and error.

Criterion Weight What excellent work looks like
Information architecture 30% The sitemap uses fitting organization schemes, labels are in users' language and changes are justified by card-sort and tree-test data.
User flows 20% Flows are complete, use consistent notation and include decisions, errors and edge cases, not only the happy path.
Wireframe quality 30% Wireframes follow a consistent grid, show clear hierarchy, prioritize key actions and are mobile-first.
Annotations and rationale 20% Annotations explain behavior and states precisely, and the rationale links decisions to evidence.

Portfolio piece

A sitemap, user flows and annotated wireframe set that show your structural design process from research to layout.

Self-paced, 12-month access. Questions are answered in writing through the student panel. A completion record is issued when you finish the course.

Next step

Continue with UXD104 · Visual Design and UI Systems · 6 hours · $42.00

Continue to the next course

Prefer the whole program? Program in UX/UI & AI-Assisted Product Design · $277.00 (10% less than buying the courses separately)

Show More

What Will You Learn?

  • Build a sitemap using appropriate organization schemes and clear labels
  • Run a card sort and a tree test and use the results to revise navigation
  • Draw user flows that cover the happy path and key edge cases
  • Produce annotated mobile-first wireframes on a consistent layout grid in Figma

Course Content

UXD103 · Information Architecture and Wireframes (6 h)
Organize content so users can find what they need, validate structure with card sorting and tree testing, map user flows and translate everything into clear, annotated wireframes in Figma.

  • Lesson 1 · Organizing information people can find
  • Lesson 2 · Validating structure and mapping flows
  • Lesson 3 · Wireframing on a grid
  • Lesson 4 · Lab and assignment
  • UXD103 Assessment · Information Architecture and Wireframes
Scroll to Top