Documentation on https://medium.com/@houteng/harry-potter-and-information-architecture-c3004f47fa81 Harry Potter and Information Architecture, what do they have in common? Imagine trying to navigate Hogwarts castle…The experience of walking around Hogwarts will be like how a user navigates a website or a mobile app.

1. Harry Potter
and
Information
Architecture
Leow Hou Teng
http://design.leowhouteng.com

2. Imagine trying to navigate the castle

3. Hogwarts – Website/App
Signages (if any) – Navigation
Marauders Map – Site Map

4. What is IA?
‘Content page of a Spell book’

5. “The organisation, search, and navigation systems
that help people to complete tasks,
find what they need,
& understand what they’ve found.”
PETER MORVILLE
Author of Information Architecture for the Web

6. “Information Architecture is the way we
choose to arrange the parts of something to
make it understandable as a whole.”
ABBY COVERT
@ABBY_THE_IA

7. “Never trust anything
that can think for itself
if you can’t see
where it keeps its brain.”
J.K. Rowling
Harry Potter and the Chamber of Secrets
See the navigation and/or sitemap

8. SEO & IA
Optimising for Search vs Users

9. “Search engine optimization (SEO)
is the practice of increasing the quantity
and quality of traffic to your website
through organic search engine results.”
MOZ.com
https://moz.com/learn/seo/what-is-seo

10. Accio
Information
Rank #1 gets more traffic

11. Multiple
Entries
To get in/out of Hogwarts

12. SEO & IA Similarities
Making content
Findable

13. Context
Users Content
SEO & IA
Share the same goal

14. Content/SEO Auditing
Free, but crawls 500 URL & unorganised
“Where’s Trevor!!!”

15. — Remove content duplicates
— Clear, descriptive H1 title (1 per page!), URL, Meta information
— Improve internal links, help users access content
Adopting SEO Strategies
https://www.coursera.org/specializations/seo

16. Critical
Components
of IA

17. https://www.slideshare.net/AbbyCovert/make-sense-information-architecture-for-everybody

18. We often forget to take a step back
and ask how our use of language
implies certain meaning to us,
but may be confusing to others.
Ontology – Meaning
Fluffy

19. Meaning is subjective
Meaning is demographic
Meaning is socio political
Meaning gets lost in translation
Meaning is complex
https://www.slideshare.net/AbbyCovert/make-sense-information-architecture-for-everybody

20. Fluffy may be defined as Cerberus,
but taxonomically, it may belong
both under ‘Monsters’ and
‘Fantastic Beasts’ if that is the
context where the user needs it.
Taxonomy – Structure
Monsters or
Fantastic Beasts

21. 1. Location: Potions class is in the dungeons
2. Alphabetical: E for ‘Exceeding Expectations’, A for ‘Average’
3. Time: Harry’s birthday is on July 31, 1980
4. Category: Butterbeer is a Drink
5. Hierarchy: Potions class is in the dungeons in Hogwarts
5 Ways to Organise Things

22. How meaning and structure fit together,
ensuring that the flow of an experience
delights the user and doesn’t distract
from what the user is trying to do.
Choreography – Intent
Retrieving
the Book

23. Classifying
Wizards/Witches
Skills & Techniques

24. Technique #1
Sorting Hat
Card Sorting
24

25. Show-offs Cunning Bastards Decent Human Nerds
Classifying into Groups

26. Definitely
not
Ravenclaw
when he could have gotten
the letter off the floor

27. Technique #2
Picking
the Wand
Tree-Testing
“ The Wand chooses the Wizard, Harry Potter. ”

28. Finding
the
Right Wand
Search for it through the navigation

29. https://www.slideshare.net/AbbyCovert/make-sense-information-architecture-for-everybody
https://understandinggroup.com/information-architecture/understanding-information-architecture/
https://uxdesign.cc/how-i-taught-information-architecture-to-aspiring-ux-designers-281ce61de42f
http://wildlyappropriate.com/2013/03/10/a-model-for-understanding-information-architecture-ontology-taxonomy-
and-choreography/
References

30. Presentation by
Leow Hou Teng
http://design.leowhouteng.com