UX Portfolio - Personal Website

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/jet1385My Site (URL TBD) Version 2 This document was constructed in Omnigrafﬂe 5 Pro.Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

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 isnt 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 ﬂesh out a purpose to use it later, I most certainly will.My Site (URL TBD) Version 2 This document was constructed in Omnigrafﬂe 5 Pro.Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

PERSONAS Je!rey Leann Todd This man is a CCO at a world-famous Shes a designer at heart. Preferring to focus While satisfied with his lucrative freelance agency and is searching for talent. Hes 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 doesnt 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 doesnt play much of a role in her search. hires—as does method. While he spends half of his time on his Shes 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 Shes 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.

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 Omnigrafﬂe 5 Pro.Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

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 workMy Site (URL TBD) Version 2 This document was constructed in Omnigrafﬂe 5 Pro.Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

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 Omnigrafﬂe 5 Pro.Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

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- download loads loads Social Credits ~~~~~ ~~~~~ ~~~~~My Site (URL TBD) Version 2 This document was constructed in Omnigrafﬂe 5 Pro.Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

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. Youre 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 reﬂects "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 theres 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 BluthMy Site (URL TBD) Version 2 This document was constructed in Omnigrafﬂe 5 Pro.Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

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 ﬁts 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 BluthMy Site (URL TBD) Version 2 This document was constructed in Omnigrafﬂe 5 Pro.Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

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 Donts 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 BluthMy Site (URL TBD) Version 2 This document was constructed in Omnigrafﬂe 5 Pro.Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

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 Omnigrafﬂe 5 Pro.Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

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 BluthMy Site (URL TBD) Version 2 This document was constructed in Omnigrafﬂe 5 Pro.Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

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 Ill get back to you! compose window in the users email application of choice (Outlook, Gmail...). UX/IA Writing Resume Hobbies work work Credits concept - John Thompson design - Ash Williams coding - Byron BluthMy Site (URL TBD) Version 2 This document was constructed in Omnigrafﬂe 5 Pro.Information Architecture February 14, 2011 Images were edited in Adobe Photoshop CS5.

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! - JohnMy 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.

http://johnet.tumblr.com	31
http://www.linkedin.com	8
http://www.tumblr.com	2
http://safe.tumblr.com	2
http://twitter.com	1
http://paper.li	1

UX Portfolio - Personal Website

by John E. Thompson

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 45

Statistics

UX Portfolio - Personal Website Presentation Transcript