This is a fully blueprinted information architecture / user experience design project for a personal website, from concept to wireframe and everything in between (personas, scenarios, site map and more).

1. PORTFOLIO John E. Thompson
217 W Franklin Ave #3
Minneapolis MN 55404
608.215.7014
jet1385@gmail.com
twitter @jet1385
johnet.tumblr.com
linkedin.com/in/jet1385
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

2. CONCEPT
What is this?
This is a future personal website, the purpose of which is to illustrate my feats to those
interested. I based it on a simple, obvious idea: a site that is its own map. Perfect for an
aspiring information architect.
Who will be visiting the site?
I decided that I would pick three primary personas with different goals. Since my site isn't
going to be complicated, user scenarios for the primary and some tertiary personas will
be combined with the site path diagram.
My very rough sketch at a bar (I was
inspired by ambient dialogue).
The "pac man" in the upper right
has no real meaning; it was just an
idea that popped into my head. If I
can flesh out a purpose to use it
later, I most certainly will.
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

3. PERSONAS
Je!rey Leann Todd
This man is a CCO at a world-famous She's a designer at heart. Preferring to focus While satisfied with his lucrative freelance
agency and is searching for talent. He's a on pure creative aesthetics, she finds herself copywriting gig, his true love is discovering
researcher, so he will be searching for a in need of talent from other fields—in this original websites and promoting them online
resume, portfolio and anything that defines case, information architecture and user via Twitter and his various blogs.
me as a professional. experience.
Like Leann, he bases much of his search on
But he doesn't just believe in cold, hard facts. Leann bases her search on web presence talent, but above everything, he scours for
He wants to know what makes his workers and pure talent; experience and personality mold-breakers.
tick; personality plays a key role in who he doesn't play much of a role in her search.
hires—as does method. While he spends half of his time on his
She's looking for someone to help her on her Macbook (with an 11.6" screen size), he also
He has a specific way of ordering tea, keeps latest project, a full-scale online presence, lugs around an iPhone and makes sure to
up on the latest typography innovations and including a website, social media campaign, rock out every once in a while.
blasts old Pixies songs in his glass-walled blog and more. Leann has yet to complete
office. the preliminary plan and also seeks Though not seemingly a directly useful demo
consultation from a creative-minded, far- for my site, he has connections, thousands of
Jeffrey gives off an aura of being rarely seeking individual. dedicated followers and raw excitement for
impressed to keep people working harder, everything—a real networking and
but he takes time to reward those who truly She's also a cat owner and Scrabble player, promotional goldmine and someone who
deserve recognition. but she means business. This creative entity could be a blast to work with in the future.
is not one to stretch projects and embrace a
high amount of grand ideas. Practicality is
her mantra.
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

4. PAGES Once I had a better idea of who would be visiting my site, I compiled a list of parts on
the site, their purposes and intended users.
Home Universal staple; also serves as a 'refresh' button. Jeffrey, Leann, Todd
Contact Universal staple; will help users locate my location and contact information. Jeffrey, Leann, Todd
Resume Where users can view and download my latest resume and view my Jeffrey, Leann
professional history.
UX/IA Work Where users can view my completed UX/IA projects and download Jeffrey, Leann
portfolio pieces.
Writing Work Where users can view and download my professional writing portfolio. Jeffrey
Hobbies Where users can view my hobbies and get a better overview of my Jeffrey, Todd
personality!
Social Twitter, reddit, Tumblr, YouTube and LinkedIn icons and/or links for the Todd
socialites.
Credits Where users can view who contributed to the site and contact those Jeffrey, Leann, Todd
contributors if they wish. This part also boosts visibility of my site—each
contributor is listed here. If anyone searches for their names, my site will
show up in the search. Also, those contributors will have my site in their
portfolios and resumes, further increasing visibility.
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

5. SITE PATH
I then sketched how users would access the site from various reference pages and
applications. I quickly discovered the need to have easy one- to two-click access between
all parts of the site.
ign potential
des collaborator
web or s
(;
/ sen omeon
:P
and ent (i.e. Leann) tar eI
e
or e sume
:D
c ont siast mai
u
(: enth l to
so nn low
fre r
ef nte
cia ec er
co fol
e| | link
e pag
y)
from
. J hu
or
l tion
(i.e ead | hom an em
ail |
h
er
|=
ad
| lin
re
: |
o
g
kf
log
blo
rom
ab
m
so
ro
cia
f
nk
lm
| li
ed
hobbies ia work
resume
ia
credits
|
contact
social
writing work
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

6. INVENTORY
Once I had a clear look at where users would head, then I inventoried the parts in order
to make their functions clearer. Administrative meta is excluded since none of the parts
has a creation date, author or usage history.
Common questions can be answered here (i.e. What kind of page is it? What content
will be contained within in? What meta data will be included within the code?).
part / title type content notes location descriptive meta*
Home Home page All parts; a short bio/intro/ Subject to change (i.e. more www.[TBD].com *for all pages—all content is related to the following:
about statement; credits collaborators in credits;
section; social media icons more social icons, etc.). Information architect, info architect, user experience
designer, designer, content manager, content
Contact Expandable Name, email, phone Subject to change. /contact strategist, organizer, IA, UX designer, John
window number, address Thompson, John E. Thompson, jet1385
(pending); "hello" statement
Resume Expandable Full resume minus hobbies, N/A /resume
window contact info, references;
PDF resume download link
UX/IA Expandable List of UX/IA work; PDF Subject to change (addition/ /uxiawork
Work window portfolio download links; deletion of UX/IA work);
links to webpages, preview image previews may be cut
images; summaries; post if they do not work properly.
dates
Writing Expandable List of written pieces; one Subject to change (addition/ /writingwork
Work window PDF portfolio link; links to deletion of writing work);
written pieces (if available); PDF portfolio will need
summaries; post dates updating.
/hobbies
Hobbies Expandable List of hobbies (bulleted, Subject to change; might
window perhaps) add a PDF resume
download link.
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

7. SITE MAP
Since the website is mainly about myself, the site map is simple! Considering the site
path, inventory and user personas, all parts are accessible immediately from the home
page and expand when interacted with.
Global
Home contact
UX/IA Work
Hobbies
Writing
Resume
Work
UX/IA Writing
Resume Work Work
down- down- down-
load loads loads
Social
Credits
~~~~~
~~~~~
~~~~~
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

8. WIREFRAME
And since my career path is information architecture, why not have my website match
Default Home View .1
that style? So it will be a portfolio itself—an interactive, gorgeous site map. You're
These are notes. I skip the "i" as to not
probably wondering how this is going to work....
confuse it with an "L" or a "1".
First, the default home view (the home page without any interaction):
1a Either my picture, signature or something
that reflects "me" will go here.
1f 1a 1e
1b This will be a short 'about' statement.
[Logo] Contact
1c
1b These lines will be visible, but much prettier.
1c
This is a paragraph illustrating
who I am. It will serve as a
synopsis, a verbal 'about HOME 1d If there's a box or shading behind this, the
page', if you will. It will most box will adjust for user-adjusted text size.
likely be three lines and
relatively this wide. Align top with logo; include a healthy
1e
amount of white space above the logo.
1f If possible, this page should load part by
Writing part in a predetermined order (i.e. logo,
UX/IA work about text, home, contact, resume, UX/IA
Resume work Hobbies
work, writing work, hobbies, credits, social
media icons).
1g I would prefer to include contact information
1d 1g for those credited. Or the names could link
to their email or respective websites.
Credits
concept - John Thompson
design - Ash Williams
coding - Byron Bluth
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

9. WIREFRAME
Now the page that displays my portfolio of information architecture work:
UX/IA Work .2
2a Clicking on any of these will result in the
2a current box dissolving and returning to the
2b home page.
Contact
[Logo] Clicking on any of these will result in the
2b
current box dissolving and the respective
2a
part opening as if the user had clicked that
This is a paragraph illustrating who I am. part from the default home view.
It will serve as a synopsis, a verbal
'about page', if you will. It will most likely HOME
be three lines and relatively this wide.
2c Opens a PDF preview of the portfolio on a
new tab or window.
2a 2b 2b
2b
2d Image expands when clicked on to a size
UX/IA Writing
Resume Hobbies that comfortably fits 800x600 resolution.
work work
2e Scroll up or down one portfolio item. Note
2h
2e 2a "Page 2 of 3" to give user the location.
2c 2c
Page 2 of 3
2d 2g Download as a PDF Include alt text for all images.
2f
mysite.com 2011
This is a synopsis on the site purpose. It could
Preview image include what I tasks I performed, who I worked with,
what programs/apps I used, or anything relevant to 2g Opens clicked URL in a new tab or window.
the project.
Download as a PDF
2h When "UX/IA Work" is clicked, this box
yoursite.net 2010 should precipitate smoothly and the arrow
2f This is a synopsis on the site purpose. It could will connect from "UX/IA Work" to the
Preview image include what I tasks I performed, who I worked with, window. The window starts at Page 1 of (n).
what programs/apps I used, or anything relevant to
2e
the project. All of this should take half a second.
Credits Page 2 of 3
concept - John Thompson 2b
design - Ash Williams
coding - Byron Bluth
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

10. WIREFRAME
Now the page that displays my portfolio of written pieces (articles, blogs, page copy, etc.):
Written Work .3
3a See notes 2a, 2b, 2e and 2h—adjust
3a accordingly.
Contact
3b Opens link to the written piece in a new tab
[Logo]
or window.
This is a paragraph illustrating who I am.
It will serve as a synopsis, a verbal
'about page', if you will. It will most likely HOME
be three lines and relatively this wide.
UX/IA Writing
Resume Hobbies
work work
Page 2 of 3
3b Download writing portfolio as a PDF
Top 10 Reasons Wireframing Rocks 2011
This is a synopsis that would serve as a "pull" to the
article itself. I would include a teaser, touch upon the
topics being discusses and include any other
necessary details.
Winter Skin Care Dos and Don'ts 2010
This is a synopsis that would serve as a "pull" to the
article itself. I would include a teaser, touch upon the
topics being discusses and include any other
necessary details.
Credits Page 2 of 3
concept - John Thompson
design - Ash Williams
coding - Byron Bluth
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

11. WIREFRAME
Now the page that displays my resume:
Resume .4
4a See notes 2a, 2b, 2e and 2h—adjust
4a accordingly.
Contact
4b This box will expand fully downward as
[Logo]
needed. No scrolling required, except in the
browser window.
This is a paragraph illustrating who I am.
It will serve as a synopsis, a verbal
'about page', if you will. It will most likely HOME
be three lines and relatively this wide.
UX/IA Writing
Resume Hobbies
work work
4b
Download resume as a PDF
Experience Education
Information Architect / UX Designer Bachelor of Science, English
(Freelance) University of Wisconsin-Madison
Minneapolis, MN August 2003-May 2008
January 2010-present Complex sentence structuring and grammar;
Collaborating with an artist on her professional humanism; sociology; researching and essay
website project, including the design concept, writing; literature; art history; economics;
user personas and scenarios, usability, mapping, programming; object design; engineering;
wireframes and archiving. calculus; circuitry; physics.
Multimedia Managing Editor Private Pilot Training, Single-Engine Airplane
RB Publishing Wings, Inc. (St. Paul, MN)
Madison, WI Wisconsin Aviation (Madison, WI)
September 2007-May 2010 2006-2007
Managed all print and digital design, editorial and
marketing for B2C and B2B magazines. Headed
two awards campaigns and three web/print
redesigns.
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

12. WIREFRAME
Now the page that displays my portfolio of written pieces (articles, blogs, page copy, etc.):
Hobbies .5
5a See notes 2a, 2b, 2e and 2h—adjust
5a accordingly.
Contact
5b May omit this, depending on usability/UX
[Logo]
tests.
This is a paragraph illustrating who I am. 5c This box will expand fully downward as
It will serve as a synopsis, a verbal needed. No scrolling required, except in the
'about page', if you will. It will most likely HOME browser window.
be three lines and relatively this wide.
UX/IA Writing
Resume Hobbies
work work
5c
5b
Download resume as a PDF
Hobbies
Construction Volunteer
Twin Cities Habitat for Humanity
November 2010-present
Amateur Curler
St. Paul Curling Club
October 2010-present
Guitarist & Composer
GarageBand
2007-present
Credits
concept - John Thompson
design - Ash Williams
coding - Byron Bluth
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

13. WIREFRAME
Now the page that displays my contact information:
Contact .6
6a See notes 2a and 2b—adjust accordingly.
6a 6b
6b When "Contact" is clicked, the default view
[Logo] Contact box should dissipate slowly as the opened
John E. Thompson window precipitates smoothly and the arrow
608.555.4321
6c
will connect from "Home" to the window. All
john@domain.com
This is a paragraph illustrating who I am. of this should take half a second.
It will serve as a synopsis, a verbal Address Line
'about page', if you will. It will most likely HOME
City, ST 55432
be three lines and relatively this wide.
6c Clicking will open an new message/
Shoot me a line, phone me, mail
me a letter, and I'll get back to you! compose window in the user's email
application of choice (Outlook, Gmail...).
UX/IA Writing
Resume Hobbies
work work
Credits
concept - John Thompson
design - Ash Williams
coding - Byron Bluth
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

14. THE END
All that from a drawing on a sheet of paper!
From here, I plan on designing the site myself and developing it in Ajax, Joomla or, most
likely, WordPress. However, this would render my "Credits" section null, which is why I
hope to find other new talent similar to myself, others who could join in and beef up their
own portfolios and resumes.
Either way, my last step is to fill up the "UX/IA Work" page—and this is what I am looking
forward to the most.
Contact me at 608.215.7014 or
jet1385@gmail.com.
Also, follow me on Twitter @jet1385,
check out my blog at
johnet.tumblr.com, and feel free to
connect with me on LinkedIn.
Thanks for reading!
- John
My Site (URL TBD) Version 2 This document was constructed in Omnigraffle 5 Pro.
Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.