An introduction of Site-it!, which is a set of sticky notes with printed page template. It is used for site structure designing. Presented at HCII09 (Human Computer Interaction Intenational 2009) on July 22, 2009.

1. Site-it!: Information Architecture
Prototyping Tool
Atsushi HASEGAWA, Ph.D.
Concent, Inc.

2. Overview
• We have developed a web site structure
prototyping tool: Site-it!
• Site-it! enables to involve all project
members in the discussion of web site
structure.
• Using Site-it! makes to keep discussion from
getting into too specific.
• Site-it! is good for Enterprise Information
Architecture and High Level Site Structure.

3. Who?
Concent, Inc.
• A UX design company based in Tokyo since 2002
• Web sites, web applications: research, UX strategy, design
• UX strategy and UI prototype of information devices
Atsushi Hasegawa, Ph. D.
• An Information Architect since 2000
• Organizing IA Association Japan, HCD-Net board director,
IA Institute member and translation initiative
• Founder and President of Concent, Inc.

4. HCD Process: ISO 13407
1. Plan the human centered
process
Meets
requirements!
2. Specify the context of use
5. Evaluate designs against 3. Specify user and
user requirements organizational requirements
4. Produce design solutions

5. HCD Designing Methods
• Prototyping
• Brainstorming
• Pattern/Component Library

6. Elements of Web Site Design
-Server-side (DB, Apps)
Technology -Front-end (HTML/CSS,
JavaScript, Flash)
Visual Information
Communication Architecture
-Graphic Design -Content Planing
-UI Design -Organization
-Art Direction -Site Structure
-Navigation
-Labels

7. Information Architecture Design
• Content Plan
• Content Organization
• Site Structure
• Navigation
• Labels

8. Roles of Site Structure
• EIA represents the organization’s attitude to the
customer, and other stakeholders.
• and EIA also represents the brand strategy of the
organization.
• The “Main Navigation” represents the site’s concept.
• Content categories relates the DB requirements and the
CMS specification.
• Site structure is the basis of the user’s experience of the
site.

9. Site Structure Document
!"#$%&'!()*+,-./0123!4!+,-567 1/1
9:;! •%–—˜™!!
<1=! !š›•!
/01Á! ,>?-! ½¾1-! %&¿À!
×,?e°Ø1ÖÙ?!
/01Á! ,>?-@AB! LMNOPQRS! !"#$%&'TUVW! XYZ[! %&¿À! ¡«ªŸ'!!"#$%&'!
CIJK! CDEFGH,>?-! CIJK!
IJK!
,>?-@AB! %&¿À! ¡œ'¢£¢'¤!
Š‹AŒ!
C¶·H,>?-!IJK! Š‹AŒ!
C¹ºK! »¼!
™œ•&žŸ &!
/01Á! ,>?-¸x! ,>?-¸x! !"#¬-=! ËÌjÍ! XYF|}~•€!
Š‹AŒ! Š‹AŒ! Š‹AŒ!
Š‹AŒ!
C¹ºK! Š‹AŒ!
C¹ºK! Š‹AŒ!
C¹ºK!
»¼! ƒ! š¥¦§¨¢©§'¢ª¨!
½¾1-!
LMNOPQRS! ][^!
XŽ[^••!
ª¥ ž!ÃÀ§«¢ ¢'¤!#§¤Ä nopqrstuvw!
ÅHÆÇ! ‘’“”!
®1¯°.±²Š‹A _`Qa!
Œ!
8
ÈÉÊ!
Š‹AŒ! ]xym@z{xy
Š‹AŒ! m!
pÚe°Ø1ÖÙ?!
˜¡¼!
ÎÏVÐÑÒ! hÓÔ! 7-,ÕÖ1¾.Ö1! ®1¯1³´Xµ!
ƒ!
bcd1-e1fgh
ÈÉÊ!
Š‹AŒ! ijk!
XŽ[^••! Š‹AŒ!
‘’“”! ghlm!
C•‚K!
Š‹AŒ!
Š‹AŒ!
ƒ!
„…†1‡! Û]Ü݆1‡! ˆ‰1=! 21•,*!

10. Problems of Site Structure
Designing
1. Difficult to read / understand the context
from the document
2. Difficult to discussion among the team
3. Blank Post-it! is useful, but hard to
image what content is in it

11. Solution: Site-it!
• Sticky notes with templates
• 3 types of Pages: 7 templates
- Portal type (1)
- List type (text, w/ thumbnail, thumbnail: 3)
- Article type (text, w/ image, functional: 3)
• Only Title Area to write

12. Portal
Type
Portal
List
Type
Text Text + Thumbnail Thumbnail
Article
Type
Functional
Text Text + Image
(Web Apps)

13. Features of Site-it!
• Easy to prepare: anytime, everywhere
• Enable to involve people: members,
clients, managers, developers
• Easy to try multiple patterns
• Enable to concentrate to the structure,
not page details, without
misunderstanding

14. Site-it! is good for:
• Enterprise Information Architecture
(EIA): Relation among sites
- Micro-site strategy
- Brand portfolio and web site structure
• High level site structure of a web site
- Main categories / main navigation
- Searching path

15. Examples

16. Workshop

20. Thanks
• Take our brochure
• You can download this slideshow from
slideshare.com/
tag: HCII09, Site-it!, Concent, IA
• We are preparing the data of Site-it! and stencils for
applications: OmniGraffle, Visio, Excel
• For more information:
concentinc.jp/ or site-it@concentinc.jp