Jonathan Bates<br />Creative & Design Direction<br />User Experience Development<br />Site Architecture<br />Design / Prod...
My Background<br />6 years experience at CNET Networks<br /><ul><li>1996-1998, Director of Multimedia
2001-2003, Design Director (Commerce, All Network Sites)</li></ul>Roles/Responsibilities<br /><ul><li>Manage creative + pr...
Oversee sub-brand designs, redesigns & daily production for 13 properties worldwide
Develop & design new commerce systems</li></li></ul><li>My Background<br />@Home Network<br /><ul><li>Senior Producer, Mul...
Managed production staff and videographers
Responsible for content syndication relationships with CNN, Bloomberg, NBC…</li></li></ul><li>My Background<br />Jon Bates...
Silverlight & Adobe AIR rich media content
Commerce integration
Production systems integration and training
Content planning & site architecture</li></li></ul><li>Web user experience / UI / design<br />Designs, concepts and projec...
Portfolio / Site design + User experience<br />eCatalog Best 100 Products<br />eCatalog is a product directory system view...
Vendor-maintained product required intuitive content production tools
Commerce solution for CNET allowed vendors to distribute and maintain product while delivering click-through revenue back ...
Test results sent to store manager, then sent for aggregation by Apple
Apple was ensured greater consistency in sales practices and retail proficiency
Retail managers able to measure staff proficiency and target re-training</li></li></ul><li>Portfolio / Site design + User ...
Needed to improve user & vendor experience without confusing them
Business-critical redesign: failure in UI or back-end would have impacted revenue significantly</li></li></ul><li>Portfoli...
New UI and architecture used familiar icon and common UI tools
Introduced new ‘Help’ system and running ‘Tips’ footer to educate user
Main navigation stayed consistent, allowing users to feel grounded</li></li></ul><li>Portfolio / User interface (applicati...
Account Executive customizable toolset to fit individual needs and methods of work</li></li></ul><li>Portfolio / User inte...
IM conversation logging saved to blog-like space for internal review and sharing of practices, ideas and concerns across o...
Tracking system gave HP metrics on internal awareness, which brochures did not offer
Online format allowed tweaking and revisions; brochure required 6-12 weeks advance for printing  </li></li></ul><li>Portfo...
Conversion of unmanaged sites to common network-wide templates
Integration with CNET ad & analysis while keeping previous ZD ‘buys’ online
3 month timeline, business critical</li></li></ul><li>Portfolio / Site design + User experience + Brand development<br />H...
Formidable competition meant HotGigs had to offer unique tools, services and approach
New product launch included publishing system and analysis integration, all during development</li></li></ul><li>Portfolio...
Formidable competition meant HotGigs had to offer unique tools, services and approach
New product launch included publishing system and analysis integration, all during development</li></li></ul><li>Portfolio...
Formidable competition meant HotGigs had to offer unique tools, services and approach
New product launch included publishing system and analysis integration, all during development</li></li></ul><li>Portfolio...
New offering required extensibility in brand identity for future growth</li></li></ul><li>Portfolio / Site design + User e...
New offering required extensibility in brand identity for future growth
Logo and brand were ultimately designed to accommodate ‘Hot-’ as a future franchise</li></li></ul><li>Portfolio / Site des...
New offering required extensibility in brand identity for future growth
Upcoming SlideShare
Loading in …5
×

Design Portfolio - Jonathan Bates - Online Senior Creative + New Media Developer

1,369 views
1,307 views

Published on

Portfolio of Senior Online Media Creative Jonathan Bates, designer and developer of innovative rich media, dynamic content and multi-platform products. More at http://www.jonbatesdesign.com or jonathan@jonbatesdesign.com.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,369
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Design Portfolio - Jonathan Bates - Online Senior Creative + New Media Developer

  1. 1. Jonathan Bates<br />Creative & Design Direction<br />User Experience Development<br />Site Architecture<br />Design / Production Management<br />Commerce Integration<br />Presentation of Design Work, Site Architecture & Branding<br />Revised December 2008 More portfolio and client information at www.jonbatesdesign.com <br />
  2. 2. My Background<br />6 years experience at CNET Networks<br /><ul><li>1996-1998, Director of Multimedia
  3. 3. 2001-2003, Design Director (Commerce, All Network Sites)</li></ul>Roles/Responsibilities<br /><ul><li>Manage creative + production staff (4-30+)
  4. 4. Oversee sub-brand designs, redesigns & daily production for 13 properties worldwide
  5. 5. Develop & design new commerce systems</li></li></ul><li>My Background<br />@Home Network<br /><ul><li>Senior Producer, Multimedia</li></ul>Roles/Responsibilities<br /><ul><li>Produced daily broadband video content for 1.2 million subscriber portal
  6. 6. Managed production staff and videographers
  7. 7. Responsible for content syndication relationships with CNN, Bloomberg, NBC…</li></li></ul><li>My Background<br />Jon Bates Design<br /><ul><li>Creative Director</li></ul>Roles/Responsibilities<br /><ul><li>Multimedia/Dynamic Flash content
  8. 8. Silverlight & Adobe AIR rich media content
  9. 9. Commerce integration
  10. 10. Production systems integration and training
  11. 11. Content planning & site architecture</li></li></ul><li>Web user experience / UI / design<br />Designs, concepts and projects by Jonathan Bates<br />
  12. 12. Portfolio / Site design + User experience<br />eCatalog Best 100 Products<br />eCatalog is a product directory system viewable on- or offline. <br /><ul><li>Tight page load restrictions
  13. 13. Vendor-maintained product required intuitive content production tools
  14. 14. Commerce solution for CNET allowed vendors to distribute and maintain product while delivering click-through revenue back to CNET</li></li></ul><li>Portfolio / Site design + User experience<br />Apple eMac Retailer Toolkit<br />The Retailer Toolkit was an online system for sales team product training<br /><ul><li>Watch-and-Quiz format highlighted selling points, specs and more
  15. 15. Test results sent to store manager, then sent for aggregation by Apple
  16. 16. Apple was ensured greater consistency in sales practices and retail proficiency
  17. 17. Retail managers able to measure staff proficiency and target re-training</li></li></ul><li>Portfolio / Site design + User experience<br />CNET Reviews site redesign<br />‘Reviews’ is the primary commerce engine and revenue producer for CNET<br /><ul><li>Redesign included new commerce back-end, new ad system & new network-wide common templates
  18. 18. Needed to improve user & vendor experience without confusing them
  19. 19. Business-critical redesign: failure in UI or back-end would have impacted revenue significantly</li></li></ul><li>Portfolio / User interface (application)<br />Solonis Portal redesign<br />The Portal is a total-business interface for sales, inventory and reporting<br /><ul><li>Existing product was clunky and unintuitive, causing user complaints
  20. 20. New UI and architecture used familiar icon and common UI tools
  21. 21. Introduced new ‘Help’ system and running ‘Tips’ footer to educate user
  22. 22. Main navigation stayed consistent, allowing users to feel grounded</li></li></ul><li>Portfolio / User interface (application)<br />Solonis Portal redesign<br />The Portal is a total-business interface for sales, inventory and reporting<br /><ul><li>New contact management and logging environment
  23. 23. Account Executive customizable toolset to fit individual needs and methods of work</li></li></ul><li>Portfolio / User interface (application)<br />Solonis Portal redesign<br />The Portal is a total-business interface for sales, inventory and reporting<br /><ul><li>Integration of features like Instant Messaging encouraged interaction between team members
  24. 24. IM conversation logging saved to blog-like space for internal review and sharing of practices, ideas and concerns across organization</li></li></ul><li>Portfolio / Site design + User experience<br />HP Change internal promotion<br />HP staff worldwide needed to be included in the roll-out of HP’s new ads<br /><ul><li>Online web format replaced previous print brochure approach, resulting in significant budget savings
  25. 25. Tracking system gave HP metrics on internal awareness, which brochures did not offer
  26. 26. Online format allowed tweaking and revisions; brochure required 6-12 weeks advance for printing </li></li></ul><li>Portfolio / Site design + User experience<br />ZDNet worldwide redesign<br />CNET acquired ZDNet in 2001, requiring the rebuild of all properties worldwide to work with ad, content and analysis systems at CNET<br /><ul><li>Conversion of 5+ years static pages to dynamic publishing system pages
  27. 27. Conversion of unmanaged sites to common network-wide templates
  28. 28. Integration with CNET ad & analysis while keeping previous ZD ‘buys’ online
  29. 29. 3 month timeline, business critical</li></li></ul><li>Portfolio / Site design + User experience + Brand development<br />HotGigs site launch design<br />Contract staffing site needed new brand, site design & marketing campaign<br /><ul><li>Wide range of visitors required UI with ‘fast-track’ tools for savvy users and simple tools for newer users
  30. 30. Formidable competition meant HotGigs had to offer unique tools, services and approach
  31. 31. New product launch included publishing system and analysis integration, all during development</li></li></ul><li>Portfolio / Site design + User experience + Brand development<br />HotGigs site launch design<br />Contract staffing site: new brand, site design & marketing campaign<br /><ul><li>Wide range of visitors required UI with ‘fast-track’ tools for savvy users and simple tools for newer users
  32. 32. Formidable competition meant HotGigs had to offer unique tools, services and approach
  33. 33. New product launch included publishing system and analysis integration, all during development</li></li></ul><li>Portfolio / Site design + User experience + Brand development<br />G2 HomeWorks, Inc.<br />Branding, collateral and web site<br /><ul><li>Wide range of visitors required UI with ‘fast-track’ tools for savvy users and simple tools for newer users
  34. 34. Formidable competition meant HotGigs had to offer unique tools, services and approach
  35. 35. New product launch included publishing system and analysis integration, all during development</li></li></ul><li>Portfolio / Site design + User experience + Brand development<br />HotGigs site launch design<br />Contract staffing site needed new brand, site design & marketing campaign<br /><ul><li>Brand and logo development process involved multiple ideation stages</li></li></ul><li>Portfolio / Site design + User experience + Brand development<br />HotGigs site launch design<br />Contract staffing site needed new brand, site design & marketing campaign<br /><ul><li>Brand and logo development process involved multiple ideation stages
  36. 36. New offering required extensibility in brand identity for future growth</li></li></ul><li>Portfolio / Site design + User experience + Brand development<br />HotGigs site launch design<br />Contract staffing site needed new brand, site design & marketing campaign<br /><ul><li>Brand and logo development process involved multiple ideation stages
  37. 37. New offering required extensibility in brand identity for future growth
  38. 38. Logo and brand were ultimately designed to accommodate ‘Hot-’ as a future franchise</li></li></ul><li>Portfolio / Site design + User experience + Brand development<br />HotGigs site launch design<br />Contract staffing site needed new brand, site design & marketing campaign<br /><ul><li>Brand and logo development process involved multiple ideation stages
  39. 39. New offering required extensibility in brand identity for future growth
  40. 40. Logo and brand were ultimately designed to accommodate ‘Hot-’ as a future franchise
  41. 41. Inclusion of tagline helped solidify product identity</li></li></ul><li>Portfolio / Site design + User experience + Brand development<br />Lipservice Agency site design<br />Top national agency for voiceover talent in television and radio<br /><ul><li>Designed site in newsletter format, as old static site was rarely changed
  42. 42. Content focused on personal aspects of talent, to add depth to client perception of the actors</li></li></ul><li>Portfolio / Site design + User experience + Brand development<br />Mark Farina record release<br />Site to accompany release of new album by major San Francisco record producer and musician<br /><ul><li>Created ‘Air Farina’ concept as homage to old-style airline safety guides
  43. 43. Client was so pleased with concept that album was renamed ‘Air Farina’ and new song written with same name</li></li></ul><li>Portfolio / Site design + rebranding<br />Sabri Properties rebranding<br />Property developer with ‘image problem’ needed to rebrand & educate<br /><ul><li>Refocused site content around community involvement and donations, which had not been widely publicized
  44. 44. Many images from communities where Sabri developed, to give current residents sense of ownership
  45. 45. Press section revamped and included photos and bios highlighting good</li></li></ul><li>Portfolio / Site design + User experience + Brand development<br />ChickFlick Productions site<br />Site for independent film release “See How They Run”, a documentary about the mayoral race in San Francisco.<br />
  46. 46. Portfolio / Site design + User experience + Brand development<br />Jiwire.com site design<br />New launch site for provider of high-speed wireless Internet information, products and services<br />
  47. 47. Presentation design / print projects<br />Designs and concepts by Jonathan Bates<br />
  48. 48. Presentation design<br />Walker Art Center /HGA Architects<br />Presentation for donors and foundation<br />
  49. 49. Presentation design<br />The Good Shepherd<br />Fundraising presentation for non-profitorganization<br />
  50. 50. Presentation design<br />Entry House, Inc.<br />Presentation for non-profit human services organization advocating education, self-sustainability training, employment aid, and achieving stability to reduce need for public financial assistance and reduce the extended use of other social services programs<br />
  51. 51. Presentation design<br />Sabri Properties<br />New construction presentation for city review and community impact meetings<br />Designed in Adobe AIR as dynamic animation<br />
  52. 52. Presentation design<br />Sabri Properties<br />New construction presentation for city review and community impact meetings<br />Designed in Adobe AIR as dynamic animation<br />
  53. 53. Identity design & brand building<br />Designs and concepts by Jonathan Bates<br />
  54. 54. Identity & Brands<br />Echezeaux Restaurant<br />Total identity system<br />
  55. 55. Identity & Brands<br />Foreign Cinema Restaurant<br />Logo design and ad campaign<br />
  56. 56. Identity & Brands<br />ChickFlick Productions<br />Logo design and identity system<br />
  57. 57. Identity & Brands<br />101Blu restaurant<br />Logo design and identity system<br />
  58. 58. Identity & Brands<br />101Blu restaurant<br />Logo design and identity system<br />
  59. 59. Other design and ad development<br />Designs and concepts by Jonathan Bates<br />
  60. 60. Advertising design<br />California Freedom Coalition<br />2002 campaign for bus-stop ads by anti-Iraq war organization for worldwide protest<br />
  61. 61. Advertising design<br />3M Corporation<br />Ad campaign for new industrial fire barrier product line <br />
  62. 62. Brand design<br />IMPOSSIBLE FABRICS<br />Rebranding, ad campaign & corporate collateral system<br />
  63. 63. Broadcast design & production<br />Fox TV 1999 Emmy Awards<br />Segment for Emmy Awards show<br />(Concept producer; designer; motion graphics supervisor)<br />
  64. 64. Jonathan Bates<br />Thank you for your interest!<br />jonathan@jonbatesdesign.com<br />www.jonbatesdesign.com<br />(612) 578 0222 <br />

×