An overview of my experience in the Information Design and Interaction Design realm.

1. Kiera Westphal // Portfolio // 9.2012

2. Kiera Westphal’s Life Map
Education/Conferences Exploration Freelance Design Work Full-time Design Work Art Catastrophic events
Information Graphics
C.M.U. to Design Professional Start as Entrepreneur Fine Art Interactive Graphics UX Design
Pittsburgh NYC Pittsburgh NYC Pittsburgh Chicago San Francisco
1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012
J Junior year, Senior year, CMU Donovan and Green Oahu, HI Mind Over Media UPMC Solo Art Show Chicago Tribune Chicago Tribune Sara Lee, Emmi Solutions “Shoretell” Flip Video TiVo
Carnegie Mellon University Signage Beehive Coffeehouse, InfoGraphics Production UX design, Mobile
Sold 5 pieces
F Wishbox.com VoxLumina, Yoga Instructor Warhol Museum Restalyne Arrka, Law Office
CD/Posters/Logo/Website Art Show Microsite, IA Presentation
InfoGraphic
M Ed Tufte Seminar Black Sheep Paper Mobile, Pittsburgh Darwill, Punchcut
Puppet Festival, “squares” debut Aids Task Force, InfoGraphic UX design, Desktop
Publication Design Graphic Identity,
A Vision Plus 4: Father passed
Brochure Design
McGraw Hill, Swirl
“Republic of Info” InfoGraphic UX design, Mobile/Web
M “Pittsburgh is For Lovers” Creation of BizArt, University of Chicago Press, Razorfish
T-Shirt design ArtoMat distribution Flash Microsite Piece UX design, Desktop
Information graphics
J Razorfish Internship Donovan and Green Studio D’Arc Emmi Solutions Thirst (3st), Agogo Amalgamated
Presentation UX design, Mobile
Design
J Vision Plus 6 City Paper Legislative Weekend Liberty Ave Show, Renegade Craft Fair
“Drawing the Process” Publication Design Invitation, Form Design Sold 1 piece “Mystic Mobiles”
3 covers/
A Bike tour through Mind Over Media inside spreads Safe Schools, CBS Interactive
Europe Poster Design Competitive Anaylysis
S Senior year, CMU Newsweek Penn Ave Arts 9-11 Akoya Bike Tour
Initiative Presentation Across the U.S.A.
InfoGraphic
O Dark Night McSweeny’s Design Map TiVo
Cabaret Panorama UX Design, Desktop UX design, Mobile
N Chicago Tribune
D Recession began Production: Renegade Craft Fair
source: NYTimes “Shoretell” “Mystic Mobiles”
Interactive Phone
Screen Interface
Razorfish: Interaction Design Class: Travel: Wishbox: Mind Over Media: Sign documentation: Presentation graphic: Brochure, Identity Mark: Chicago Tribune: Williams Labadie/Restylane: Thirst/3st: Flip Video/Cisco: Razorfish Punchcut
Spencer Tunick website Digital Book Austria Process Diagram, Process Diagram, UPMC Akoya Pittsburgh AIDS Task Force News InfoGraphics, Print/Digital Information Architecture Logo Development, Android Wireframes Intel wizard wireframes Wireframes for
on “The Blue Dot” Hungary Information Architecture Information Architecture Presentation design Use case Diagrams CMS - Content diagram an expression builder
Italy Website, Logo: University of Chicago Press,
France Studio D’Arc, Vox Lumina TheDeepBook.org: McSweeny’s Panorama: TiVo Agogo
Holland Penn Avenue Arts Initiative: Flash, Marketing Microsite 200 Illustrations IA of Moblie App Flow diagrams and
Process Diagrams to Specifications doc Wireframes for the
facilitate the content Emmi Solutions: Mobile App
gathering process Interface redesign
Production Process Diagram
Marketing Diagrams
Darwill/David James Group:
InfoGraphics
Sara Lee/Launch Creative Marketing:
InfoGraphics

3. C.M.U. to Design Professional
Pittsburgh NYC Pittsburgh NYC
1997 1998 1999
J Junior year, Senior year, CMU Donovan and Green Education/Conferences
Carnegie Mellon University
Full-time Design Work
F
Catastrophic events
M Ed Tufte Seminar Exploration
A Vision Plus 4: Father passed
“Republic of Info”
M
J Razorfish Internship Donovan and Green
J Vision Plus 6
“Drawing the Process”
A Bike tour through
Europe
S Senior year, CMU Newsweek
O
N
D
Information Design Class Razorfish: Interaction Design Class: Travel:
Train Schedule Spencer Tunick website Digital Book Austria
on “The Blue Dot” Hungary
Italy
Design of “Pixeltype” France
Holland

4. CMU, Information Design // Train Schedule Before
1997

5. CMU, Information Design // Train Schedule Redesign
1997

6. Razorfish Internship // Pixeltype
1997
http://www.thebluedot.com/tunick/

7. CMU, Interaction Design // Digital Book // Navigation
1998
M A I N CO N C E P T 1 . B O O K S P EC I F I C N OT E PA D S C E N A R I O
filter file preferences cut/copy text paste into notepad
Students would prefer to use a book
character open type size
on line for research purposes than
setting save typeface
for leisurely reading. want to make a note go back to text
vocabulary save as go to a page read text
Technology can be used to avoid the 2 . PAG E S P EC I F I C write into end writing
extra step of typing up hand-written bookmark search notepad
add sentence
notets for the “research paper”
delete word
go to
N AV I G AT I O N S C E N A R I O
Use the idea of navigation, highlight
and bookmark as tools to make 3 . T E X T S P EC I F I C another chapter
marker notepad compile page 1
researching a specific text easier.
highlight 1 view/go to highlight 1 specific page
text appears on screen
highlight 2 cut highlight 2 cover contents other functions available
go next
highlight 3 copy highlight 3 choose
ADDITIONAL FUNCTIONS choose
underline paste underline chapter specific page go previous
Filters highlight some common eraser type in post it
ways of analyzing a novel. post it print
4 . W O R D S P EC I F I C
Dictionary for supporting text and
connection/link
definition of words. M A R K E R TO O L S C E N A R I O
dictionary
grammar
read text pick marker
image keep marker
sound movie start to mark
go to a page put marker back
reference end marking
select a new marker
pick marker scan

8. CMU, Interaction Design // Digital Book
1998

9. Donovan and Green // Diagrammatic Presentation Tools
1998 - 1999

10. Donovan and Green // Diagrammatic Presentation Tools
1998 - 1999
Courtyard 2001
Progress To Date
Phase 2a
Developed a Brand Experience Journey
• to explore experiential moments of truth of each target customer segment
throughout the brand experience
May 1999 23

11. Start as Entrepreneur Fine Art
Pittsburgh
2000 2001 2002 2003 2004
J Oahu, HI Mind Over Media UPMC Solo Art Show Exploration
Signage Beehive Coffeehouse,
Sold 5 pieces Full-time Design Work
F Wishbox.com
VoxLumina, Yoga Instructor Warhol Museum
CD/Posters/Logo/Website Art Show Freelance Design Work
M Black Sheep Paper Mobile, Pittsburgh
Puppet Festival, “squares” debut Aids Task Force, Catastrophic events
Publication Design Graphic Identity,
A Brochure Design Art
M “Pittsburgh is For Lovers” Creation of BizArt,
T-Shirt design ArtoMat distribution
J Studio D’Arc
J City Paper Legislative Weekend Liberty Ave Show,
Publication Design Invitation, Form Design Sold 1 piece
3 covers/
A Mind Over Media inside spreads Safe Schools,
Poster Design
S Penn Ave Arts 9-11 Akoya
Initiative Presentation
InfoGraphic
O Dark Night
Cabaret
N Chicago Tribune
D
Wishbox: Mind Over Media: Studio D’Arc, Sign documentation: Presentation graphic: Brochure, Identity Mark:
Process Diagram, Process Diagram, Penn Avenue Arts Initiative: UPMC Akoya Pittsburgh AIDS Task Force
Information Information Architecture Process Diagrams to
Architecture facilitate the content Website, Logo:
gathering process Vox Lumina

12. Mind Over Media // Process Diagram
10.2000

13. Mind Over Media // Interactive Kiosk Diagram
10.2000

14. Studio D’Arc // Web Design
6.2001

15. Dark Night Cabaret // Graphic Design
10.2001

16. Penn Avenue Arts Initiative // Brand Identity Definition
9.2001

17. Penn Avenue Arts Initiative // Graphic Design
9.2001

18. Art - O - Mat // Bizart
4.2003
http://www.artomat.org/

19. Akoya // Information Graphic
4.2003

20. Warhol Museum // Visual Art
2.2004

21. Pittsburgh AIDS Task Force // Graphic Identity and Marketing Materials
4.2004

22. Information Graphics/Interactive Graphics
Chicago San Francisco
2005 2006 2007 2008
J Chicago Tribune Chicago Tribune Sara Lee, Emmi Solutions Full-time Design Work
InfoGraphics
F Restalyne Arrka, Law Office
Freelance Design Work
Microsite, IA Presentation
InfoGraphic Catastrophic events
M Darwill,
InfoGraphic Exploration
A McGraw Hill,
InfoGraphic
M University of Chicago Press,
Flash Microsite Piece
J Emmi Solutions Thirst (3st),
Presentation
Design
J
A
S Bike Tour
Across the U.S.A.
O
N
D Recession began Production:
source: NYTimes “Shoretell”
Interactive Phone Screen Interface
Chicago Tribune: Williams Labadie/Restylane: Darwill/David James Group: Emmi Solutions: Thirst/3st:
News InfoGraphics, Print/Digital Information Architecture InfoGraphics Interface redesign Logo Development,
Production Process Diagram Presentation design
University of Chicago Press, Sara Lee/Launch Creative Marketing:
Marketing Diagrams
TheDeepBook.org: InfoGraphics
Flash, Marketing Microsite

23. Chicago Tribune // Information Graphics
11.2004

24. Chicago Tribune // Interactive Graphics
11.2004
http://www.chicagotribune.com/news/watchdog/chi-oreo-obesity-flash,0,3508291.flash

25. Restylane // Information Architecture
2.2007 Restylane® PracticeBuilderTM
DRAFT Restylane PracticeBuilder Site Architecture
File: Restylane_PB_sitemap_032807.ai
March 2007
www.restylaneUSA.com Medical affairs.com Mail In America
1 Main Screen / Home
1.0
Sales Rep. Login Doctor Login
Registered Not registered
Questionnaire build profile
Tools to use with doctor
Calculators Communicating Restylane Using Restylane Patient/Doctor relationship Informational Resources Manage your practice Reward Points
Return on Investment
To Public Injection techniques New Newsletter tutorial Step by step business goals assesment
Retention/product analysis Plan for business success
How to talk to the media Authentic product info. Cosmetic interest questionnaire mail merge guide
Patient lifetime value calculator
Virtual Video tours of practices Seminar follow-up letter Follow-up card tutorial
To Patient
Guidance Expense calculation worksheet
Video of a doctor Downloadable coupons Photo release form
Patient seminar Telephone techniques
User tracking
Authentic product info. Before/after photos Patient consent form
Direct mail program guide Reception enhancements
Find-a-doc qualifications
Slide kit Authentic product info. Just for men letter Privacy info. form
Staff incentives
Authentic product info. Patient Opt-in program Tailoring Ad messages
To Staff
Existing Photographic tips
Telephone inquire technique
Nursing staff guide on patient Quality care survey
Staff FAQs Newsletters
Loop phone script On-line patient survey
Approved verbiage
Renewal letter
Selling techniques
Holiday letter
Upselling techniques
Announcement letter
Upselling videos
Treatment follow-up letter
Consumer Log In | Contact Us | Disclaimer | Privacy Policy | Safety Information | References | Resources | Press | About Medicis Aesthetics
©2007 Williams-Labadie, LLC . This information is confidential and proprietar y and may not be shared without permission.

26. University of Chicago Press // Motion Graphics
4.2007
http://www.press.uchicago.edu/books/nouvian/index.html

27. Emmi Solutions // Flash Production
2.2007
http://www.emmisolutions.com/demo

28. Emmi Solutions // Process Diagram
2.2007
Emmi Solutions new program process 22 January 2008
KEY: Source Legal Archive server On file server Create Refers to file
SVN>Source>Longform>Childbirth Audio Transfer
Auto Generate Review Wiki Phone conversation Electronic file @ Email Bugzilla Emmi program Ser ver Emmi database
Used by engine Electronic Sales Manual Edit Use as reference
SVN>Longform Mirror
PREP RESEARCH SCRIPT PRE-ALPHA ALPHA BETA GA (General Availability) CANDIDATE TESTING* DEPLOYMENT
RECRUIT
PATIENT
ADVOCATE
PATIENT PATIENT
ADVOCATE ADVOCATE
PATIENT
1
1 2
2 3
3
PATIENTS survey PATIENTS
survey
response
ADVISORS
3 contracts ADVISORS ADVISORS ADVISORS ADVISORS
REVIEW
PEER
REVIEW
PEER PEER PROGRAM PEER REVIEW wiki PEER REVIEW bugzilla PEER
TEAM TEAM
notes TEAM notes
CHIEF
MEDICAL
OFFICER
CMO
(CMO)
DIRECTORS
DIRECTORS DIRECTORS DIRECTORS DIRECTORS
VIEW
EMMI
PROGRAM
PRODUCE
VOICE
.mp3 VOICE .wav .mp3 EMMI TOOL VOICE .wav .mp3 EMMI TOOL
.mp3 media check batch process media check
common robot voice batch process program.mp3 program.mp3 program.mp3
audio .mp3
robot voice program.mp3
WRITER
EMMI TOOL EMMI TOOL EMMI TOOL EMMI TOOL WRITER EMMI TOOL s_1.xml... WRITER screen info script.doc
WRITER
outline template.xls WRITER script.xls WRITER WRITER script.xls WRITER script.xls WRITER script.xls script.xls program.html sheet.doc
generate generate generate generate generate s_9.xml capture
s_2.xml... s_1.xml...
s_2.xml... s_2.xml...
s_8.xml s_9.xml
s_8.xml s_8.xml
s_2.xml...
s_8.xml
s_1.xml s_1.xml program.xml
s_1.xml s_1.xml
s_9.xml s_9.xml program.xml
s_9.xml s_9.xml
s_1.xml
s_9.xml
temp.xml program.xml
program.xml birth.xml program.swf program.swf
program.xml
PRODUCTION
ARTIST
PRODUCTION
PRODUCTION PRODUCTION
ARTIST program.fla program.swf program.fla program.swf program.fla childbirth.swf PRODUCTION image.psd program.jpg
ARTIST ARTIST program.html
ARTIST program.html
MEDICAL
ILLUSTRATOR program.jpg
MEDICAL MEDICAL MEDICAL MEDICAL program.jpg
ILLUSTRATOR sketches ILLUSTRATOR
library.fla ILLUSTRATOR
library.fla ILLUSTRATOR
library.fla
RELEASE ok
PRODUCTION
TECH
PRODUCTION PRODUCTION PRODUCTION PRODUCTION PRODUCTION
TECH TESTING TECH TESTING TECH TESTING TECH TESTING
TECH
SERVER SERVER SERVER SERVER
ok
OUTSIDE
TESTERS *If bugs, then repeat GA phase
OUTSIDE
TESTERS
ok
CLIENT
SERVICES
CLIENT
SERVICES
TECH
TEAM
TECH TECH TECH
TEAM TEAM TEAM

29. Emmi Solutions // Process Diagram
2.2007
PEER
PEER PEER PROGRAM REVIEW wiki
TEAM TEAM
notes
DIRECTORS
VOICE
.mp3 .mp3
common robot voice
audio .mp3
robot voice
WRITER WRITER script.xls WRITER EMMI TOOL WRITER script.xls EMMI TOOL WRITER script.xls
outline template.xls generate generate
s_2.xml...
s_8.xml
s_2.xml...
s_8.xml
s_1.xml s_1.xml
s_9.xml s_9.xml
s_1.xml
s_9.xml
temp.xml program.xml
program.xml

30. 3st // Kinetic Identity
6.2008
Merchandise Mart Properties Inc
WORDS
Merchandise Mart Properties Inc
Merchandise Mart Properties Inc
LETTERS 11 4 10 3
COMBINATION OF OPTIONS TO CREATE A MARK
BLOCKS
OPTIONS
A MARK THAT EVOLVES
COMBINATIONS OF OPTIONS
Merchandise Mart Properties Inc Merchandise Mart Properties Inc
A MARK THAT EVOLVES A MARK THAT EVOLVES

31. 3st // Kinetic Identity
6.2008
WORDS
Merchandise Mart Properties Inc
LETTERS 11 4 10 3
BLOCKS
OPTIONS

32. Cycling // Bike Tour
9.2008
http://tour-via-bike.tumblr.com/

33. UX Design
San Francisco
2009 2010 2011 2012
J “Shoretell” Flip Video TiVo Freelance Design Work
Production UX design, Mobile Art
F
M Punchcut
UX design, Desktop
A Swirl
UX design, Mobile/Web
M Razorfish
UX design, Desktop
J Information graphics Agogo Amalgamated
UX design, Mobile
J Renegade Craft Fair
“Mystic Mobiles”
A CBS Interactive
Competitive Anaylysis
S
O McSweeny’s Design Map TiVo
Panorama UX Design, Desktop UX design, Mobile
N
D Renegade Craft Fair
“Mystic Mobiles”
McSweeny’s Panorama: Flip Video/Cisco: Razorfish Punchcut
200 Illustrations Android Wireframes Intel wizard wireframes Wireframes for
Use case Diagrams CMS - Content diagram an expression builder
TiVo Agogo
IA of Moblie App Flow diagrams and
Specifications doc Wireframes for the
Mobile App

34. McSweeny’s // Illustrations for the SF Panorama
642 jones street
11.2009
345 fulton street
814 california street
1235 bay street
1945 hyde street 840 california street

35. Flip Video // Case Study for Android Phone
12.2009
How does one share their videos on their mobile phone, using Flipshare?
CASE 1 CASE 2 CASE 3
Anne places the Marathon video
in a channel for Chuck to view.
Wedding
Wedding
Birthday
Anne Birthday
Emily Alice
Anne Marathon
Marathon Marathon
Channel Bob
Channel Channel
Anne sends an Emily sends an
Chuck Anne sends an Chuck Chuck
email to Chuck and email to Alice,
email to Chuck and Bob and Chuck,
shares her video shares multiple videos. to share her videos.
CASE 4 CASE 5
Channel Bob
Marathon
Wedding Bob
Emily
Channel
Marathon
Emily Wedding Alice
Birthday
Birthday
Frank
Alice Channel
Channel
Chuck
push pull push pull

36. Flip Video // Wireframes for Android Phone
12.2009
https://www.dropbox.com/s/ot1oio9qbqjqtug/android_print.pdf

37. Mystic Mobiles // Product Development
4.2010
www.mysticmobiles.com

38. 511.org // Wireframes
4.2011
http://trafficbeta.511.org/Parking/Index