design portfolio - jonathan bates
DESCRIPTION
Creative Director, hands-on designer and developer of dynamic user experiences for web, social media, applications, mobile and widget platforms, utilizing technologies including Flash, AIR, Silverlight, FLEX, iOS, Android, MOSS, AJAX and moreTRANSCRIPT
![Page 1: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/1.jpg)
Jonathan Bates (612) 578 0222 [email protected] Bates (612) 578 0222 [email protected]
Jonathan Bates
Web design, creative direction & rich media developmentby Jonathan Bates
Revised January 2009More portfolio samples, resume and more online at jonbatesdesign.com
Creative & Design Direction
User Experience DevelopmentSilverlight / AIR /Flash Dynamic Content
Site ArchitectureDesign / Production Management
Commerce Integration
![Page 2: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/2.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
My Background
6 years experience at CNET Networks 1996-1998, Director of Multimedia 2001-2003, Design Director
(Commerce, All Network Sites)
Roles/Responsibilities Managed creative + production staff (4-30+) Oversaw sub-brand designs, redesigns &
daily production for 13 properties worldwide Developed & design new commerce systems
![Page 3: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/3.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
My Background
@Home Network Senior Producer, Multimedia
Roles/Responsibilities Produced daily broadband video content for
two million subscribers worldwide Managed production staff and
videographers Responsible for content syndication
relationships with CNN, Bloomberg, NBC…
![Page 4: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/4.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
My Background
Jon Bates Design Creative Director
Roles/Responsibilities Multimedia/Dynamic Flash content Silverlight & Adobe AIR rich media content Commerce integration Production systems integration and training Content planning & site architecture
![Page 5: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/5.jpg)
Jonathan Bates (612) 578 0222 [email protected] Bates (612) 578 0222 [email protected]
Web user experience / UI / design
Designs, concepts and projects by Jonathan Bates
![Page 6: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/6.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / Site design + User experience
eCatalog Best 100 Products
eCatalog is a product directory system viewable on- or offline.
Tight page load restrictions
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 to CNET
![Page 7: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/7.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / Site design + User experience
Apple eMac Retailer Toolkit
The Retailer Toolkit was an online system for sales team product training
Watch-and-Quiz format highlighted selling points, specs and more
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
![Page 8: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/8.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / Site design + User experience
CNET Reviews site redesign
‘Reviews’ is the primary commerce engine and revenue producer for CNET
Redesign included new commerce back-end, new ad system & new network-wide common templates
Needed to improve user & vendor experience without confusing them
Business-critical redesign: failure in UI or back-end would have impacted revenue significantly
![Page 9: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/9.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / User interface (application)
Solonis Portal redesign
The Portal is a total-business interface for sales, inventory and reporting
Existing product was clunky and unintuitive, causing user complaints
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
![Page 10: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/10.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / User interface (application)
Solonis Portal redesign
The Portal is a total-business interface for sales, inventory and reporting
Integration of features like Instant Messaging encouraged interaction between team members
IM conversation logging saved to blog-like space for internal review and sharing of practices, ideas and concerns across organization
![Page 11: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/11.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / Site design + User experience
HP Change internal promotion
HP staff worldwide needed to be included in the roll-out of HP’s new ads
Online web format replaced previous print brochure approach, resulting in significant budget savings
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
![Page 12: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/12.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / Site design + User experience
ZDNet worldwide redesignCNET acquired ZDNet in 2001, requiring the rebuild of all properties worldwide to work with ad, content and analysis systems at CNET
Conversion of 5+ years static pages to dynamic publishing system pages
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
![Page 13: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/13.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / Site design + User experience + Brand development
HotGigs site launch design
Contract staffing site needed new brand, site design & marketing campaign
Wide range of visitors required UI with ‘fast-track’ tools for savvy users and simple tools for newer users
Formidable competition meant HotGigs had to offer unique tools, services and approach
New product launch included publishing system and analysis integration, all during development
![Page 14: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/14.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / Site design + User experience + Brand development
G2 HomeWorks, Inc.Branding, collateral and web site
Wide range of visitors required UI with ‘fast-track’ tools for savvy users and simple tools for newer users
Formidable competition meant HotGigs had to offer unique tools, services and approach
New product launch included publishing system and analysis integration, all during development
![Page 15: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/15.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / Site design + User experience + Brand development
Lipservice Agency site design
Top national agency for voiceover talent in television and radio
Designed site in newsletter format, as old static site was rarely changed
Content focused on personal aspects of talent, to add depth to client perception of the actors
![Page 16: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/16.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / Site design + User experience + Brand development
Mark Farina record release
Site to accompany release of new album by major San Francisco record producer and musician
Created ‘Air Farina’ concept as homage to old-style airline safety guides
Client was so pleased with concept that album was renamed ‘Air Farina’ and new song written with same name
![Page 17: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/17.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / Site design + rebranding
Sabri Properties rebranding
Property developer with ‘image problem’ needed to rebrand & educate
Refocused site content around community involvement and donations, which had not been widely publicized
Many images from communities where Sabri developed, to give current residents sense of ownership
Press section revamped and included photos and bios highlighting good
![Page 18: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/18.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / Site design + User experience + Brand development
ChickFlick Productions site
Site for independent film release “See How They Run”, a documentary about the mayoral race in San Francisco.
![Page 19: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/19.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Portfolio / Site design + User experience + Brand development
Jiwire.com site design
New launch site for provider of high-speed wireless Internet information, products and services
![Page 20: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/20.jpg)
Jonathan Bates (612) 578 0222 [email protected] Bates (612) 578 0222 [email protected]
Presentation design / print projects
Designs and concepts by Jonathan Bates
![Page 21: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/21.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Presentation design
Walker Art Center /HGA ArchitectsPresentation for donors and foundation members prior to construction of major addition to Walker Art Center facitilty
![Page 22: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/22.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Presentation design
Entry House, Inc.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
![Page 23: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/23.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Presentation design
Sabri PropertiesNew construction presentation for city review and community impact meetings
Designed in Adobe AIR as dynamic animation
![Page 24: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/24.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Presentation design
Sabri PropertiesNew construction presentation for city review and community impact meetings
Designed in Adobe AIR as dynamic animation
![Page 25: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/25.jpg)
Jonathan Bates (612) 578 0222 [email protected] Bates (612) 578 0222 [email protected]
Identity design & brand building
Designs and concepts by Jonathan Bates
![Page 26: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/26.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Identity & Brands
Echezeaux RestaurantTotal identity system
![Page 27: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/27.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Identity & Brands
Foreign Cinema RestaurantLogo design and ad campaign
![Page 28: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/28.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Identity & Brands
ChickFlick ProductionsLogo design and identity system
![Page 29: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/29.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Identity & Brands
101Blu restaurantLogo design and identity system
![Page 30: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/30.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Identity & Brands
101Blu restaurantLogo design and identity system
![Page 31: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/31.jpg)
Jonathan Bates (612) 578 0222 [email protected] Bates (612) 578 0222 [email protected]
Other design and ad development
Designs and concepts by Jonathan Bates
![Page 32: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/32.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Advertising design
California Freedom Coalition2002 campaign for bus-stop ads by anti-Iraq war organization for worldwide protest
![Page 33: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/33.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Advertising design
3M CorporationAd campaign for new industrial fire barrier product line
![Page 34: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/34.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Brand design
IMPOSSIBLE FABRICSRebranding, ad campaign & corporate collateral system
![Page 35: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/35.jpg)
Jonathan Bates (612) 578 0222 [email protected] 2008
Broadcast design & production
Fox TV 1999 Emmy AwardsSegment for Emmy Awards show
(Concept producer; designer; motion graphics supervisor)
![Page 36: Design Portfolio - Jonathan Bates](https://reader033.vdocument.in/reader033/viewer/2022052900/55624e83d8b42a6c368b4ce6/html5/thumbnails/36.jpg)
Jonathan Bates (612) 578 0222 [email protected] Bates (612) 578 0222 [email protected]
Jonathan Bates
www.jonbatesdesign.com
(612) 578 0222 Revised 10 Jan 2009
Thank you for your interest!