Kiera Westphal // Portfolio // 9.2012
Kiera Westphal’s Life Map             Education/Conferences                                                               ...
C.M.U. to Design Professional    Pittsburgh                          NYC        Pittsburgh                                ...
CMU, Information Design // Train Schedule Before1997
CMU, Information Design // Train Schedule Redesign1997
Razorfish Internship // Pixeltype1997                                    http://www.thebluedot.com/tunick/
CMU, Interaction Design // Digital Book // Navigation1998         M A I N CO N C E P T                           1 . B O O...
CMU, Interaction Design // Digital Book1998
Donovan and Green // Diagrammatic Presentation Tools1998 - 1999
Donovan and Green // Diagrammatic Presentation Tools1998 - 1999                                                       Cour...
Start as Entrepreneur                                                      Fine Art    Pittsburgh    2000                2...
Mind Over Media // Process Diagram10.2000
Mind Over Media // Interactive Kiosk Diagram10.2000
Studio D’Arc // Web Design6.2001
Dark Night Cabaret // Graphic Design10.2001
Penn Avenue Arts Initiative // Brand Identity Definition9.2001
Penn Avenue Arts Initiative // Graphic Design9.2001
Art - O - Mat // Bizart4.2003                          http://www.artomat.org/
Akoya // Information Graphic4.2003
Warhol Museum // Visual Art2.2004
Pittsburgh AIDS Task Force // Graphic Identity and Marketing Materials4.2004
Information Graphics/Interactive GraphicsChicago                                                                          ...
Chicago Tribune // Information Graphics11.2004
Chicago Tribune // Interactive Graphics11.2004                                          http://www.chicagotribune.com/news...
Restylane // Information Architecture2.2007                                  Restylane® PracticeBuilderTM                 ...
University of Chicago Press // Motion Graphics4.2007                                                 http://www.press.uchi...
Emmi Solutions // Flash Production2.2007                                     http://www.emmisolutions.com/demo
Emmi Solutions // Process Diagram2.2007                                                  Emmi Solutions new program proces...
Emmi Solutions // Process Diagram2.2007                                                                                   ...
3st // Kinetic Identity6.2008                                                                                             ...
3st // Kinetic Identity6.2008                          WORDS                                    Merchandise   Mart   Prope...
Cycling // Bike Tour9.2008                       http://tour-via-bike.tumblr.com/
UX Design    San Francisco    2009                     2010                            2011                           2012...
McSweeny’s // Illustrations for the SF Panorama                                                                           ...
Flip Video // Case Study for Android Phone12.2009                                             How does one share their vid...
Flip Video // Wireframes for Android Phone12.2009                                https://www.dropbox.com/s/ot1oio9qbqjqtug...
Mystic Mobiles // Product Development4.2010                                        www.mysticmobiles.com
511.org // Wireframes4.2011                        http://trafficbeta.511.org/Parking/Index
KW_InformationDesign_ Presentation
KW_InformationDesign_ Presentation
KW_InformationDesign_ Presentation
KW_InformationDesign_ Presentation
KW_InformationDesign_ Presentation
KW_InformationDesign_ Presentation
Upcoming SlideShare
Loading in...5
×

KW_InformationDesign_ Presentation

590

Published on

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

Published in: Design, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
590
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

KW_InformationDesign_ Presentation

  1. 1. Kiera Westphal // Portfolio // 9.2012
  2. 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 DesignPittsburgh NYC Pittsburgh NYC Pittsburgh Chicago San Francisco 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012J 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 piecesF Wishbox.com VoxLumina, Yoga Instructor Warhol Museum Restalyne Arrka, Law Office CD/Posters/Logo/Website Art Show Microsite, IA Presentation InfoGraphicM 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/WebM “Pittsburgh is For Lovers” Creation of BizArt, University of Chicago Press, Razorfish T-Shirt design ArtoMat distribution Flash Microsite Piece UX design, Desktop Information graphicsJ Razorfish Internship Donovan and Green Studio D’Arc Emmi Solutions Thirst (3st), Agogo Amalgamated Presentation UX design, Mobile DesignJ 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 AnaylysisS Senior year, CMU Newsweek Penn Ave Arts 9-11 Akoya Bike Tour Initiative Presentation Across the U.S.A. InfoGraphicO Dark Night McSweeny’s Design Map TiVo Cabaret Panorama UX Design, Desktop UX design, MobileN Chicago TribuneD 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. 3. C.M.U. to Design Professional Pittsburgh NYC Pittsburgh NYC 1997 1998 1999J Junior year, Senior year, CMU Donovan and Green Education/Conferences Carnegie Mellon University Full-time Design WorkF Catastrophic eventsM Ed Tufte Seminar ExplorationA Vision Plus 4: Father passed “Republic of Info”MJ Razorfish Internship Donovan and GreenJ Vision Plus 6 “Drawing the Process”A Bike tour through EuropeS Senior year, CMU NewsweekOND 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. 4. CMU, Information Design // Train Schedule Before1997
  5. 5. CMU, Information Design // Train Schedule Redesign1997
  6. 6. Razorfish Internship // Pixeltype1997 http://www.thebluedot.com/tunick/
  7. 7. CMU, Interaction Design // Digital Book // Navigation1998 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. 8. CMU, Interaction Design // Digital Book1998
  9. 9. Donovan and Green // Diagrammatic Presentation Tools1998 - 1999
  10. 10. Donovan and Green // Diagrammatic Presentation Tools1998 - 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. 11. Start as Entrepreneur Fine Art Pittsburgh 2000 2001 2002 2003 2004J Oahu, HI Mind Over Media UPMC Solo Art Show Exploration Signage Beehive Coffeehouse, Sold 5 pieces Full-time Design WorkF Wishbox.com VoxLumina, Yoga Instructor Warhol Museum CD/Posters/Logo/Website Art Show Freelance Design WorkM Black Sheep Paper Mobile, Pittsburgh Puppet Festival, “squares” debut Aids Task Force, Catastrophic events Publication Design Graphic Identity,A Brochure Design ArtM “Pittsburgh is For Lovers” Creation of BizArt, T-Shirt design ArtoMat distributionJ Studio D’ArcJ 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 DesignS Penn Ave Arts 9-11 Akoya Initiative Presentation InfoGraphicO Dark Night CabaretN Chicago TribuneD 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. 12. Mind Over Media // Process Diagram10.2000
  13. 13. Mind Over Media // Interactive Kiosk Diagram10.2000
  14. 14. Studio D’Arc // Web Design6.2001
  15. 15. Dark Night Cabaret // Graphic Design10.2001
  16. 16. Penn Avenue Arts Initiative // Brand Identity Definition9.2001
  17. 17. Penn Avenue Arts Initiative // Graphic Design9.2001
  18. 18. Art - O - Mat // Bizart4.2003 http://www.artomat.org/
  19. 19. Akoya // Information Graphic4.2003
  20. 20. Warhol Museum // Visual Art2.2004
  21. 21. Pittsburgh AIDS Task Force // Graphic Identity and Marketing Materials4.2004
  22. 22. Information Graphics/Interactive GraphicsChicago San Francisco 2005 2006 2007 2008J Chicago Tribune Chicago Tribune Sara Lee, Emmi Solutions Full-time Design Work InfoGraphicsF Restalyne Arrka, Law Office Freelance Design Work Microsite, IA Presentation InfoGraphic Catastrophic eventsM Darwill, InfoGraphic ExplorationA McGraw Hill, InfoGraphicM University of Chicago Press, Flash Microsite PieceJ Emmi Solutions Thirst (3st), Presentation DesignJAS Bike Tour Across the U.S.A.OND 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. 23. Chicago Tribune // Information Graphics11.2004
  24. 24. Chicago Tribune // Interactive Graphics11.2004 http://www.chicagotribune.com/news/watchdog/chi-oreo-obesity-flash,0,3508291.flash
  25. 25. Restylane // Information Architecture2.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. 26. University of Chicago Press // Motion Graphics4.2007 http://www.press.uchicago.edu/books/nouvian/index.html
  27. 27. Emmi Solutions // Flash Production2.2007 http://www.emmisolutions.com/demo
  28. 28. Emmi Solutions // Process Diagram2.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. 29. Emmi Solutions // Process Diagram2.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. 30. 3st // Kinetic Identity6.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. 31. 3st // Kinetic Identity6.2008 WORDS Merchandise Mart Properties Inc LETTERS 11 4 10 3 BLOCKS OPTIONS
  32. 32. Cycling // Bike Tour9.2008 http://tour-via-bike.tumblr.com/
  33. 33. UX Design San Francisco 2009 2010 2011 2012J “Shoretell” Flip Video TiVo Freelance Design Work Production UX design, Mobile ArtFM Punchcut UX design, DesktopA Swirl UX design, Mobile/WebM Razorfish UX design, DesktopJ Information graphics Agogo Amalgamated UX design, MobileJ Renegade Craft Fair “Mystic Mobiles”A CBS Interactive Competitive AnaylysisSO McSweeny’s Design Map TiVo Panorama UX Design, Desktop UX design, MobileND 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. 34. McSweeny’s // Illustrations for the SF Panorama 642 jones street11.2009 345 fulton street 814 california street 1235 bay street 1945 hyde street 840 california street
  35. 35. Flip Video // Case Study for Android Phone12.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. 36. Flip Video // Wireframes for Android Phone12.2009 https://www.dropbox.com/s/ot1oio9qbqjqtug/android_print.pdf
  37. 37. Mystic Mobiles // Product Development4.2010 www.mysticmobiles.com
  38. 38. 511.org // Wireframes4.2011 http://trafficbeta.511.org/Parking/Index

×