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
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
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
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
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