http://www.watchjohnny.com Jonathan Harris - Art Director, Designer Tue, 17 Jan 2012 17:10:33 +0000 http://www.watchjohnny.com en http://www.watchjohnny.com/MarcusBrown-net http://www.watchjohnny.com/following/watchjohnny.com/MarcusBrown-net Tue, 17 Jan 2012 17:10:33 +0000 Jonathan Harris - Art Director, Designer 2623556 Marcus Brown is the most recognizable icon in the sport and one of the world's best water-skiers. Our goal has been to create a site that bring's Marcus's brand to life in the digital realm as well as establish the epicenter for the sport of waterskiing. www.marcusbrown.net The web (and mobile site) is the home to Marcus's unique web-based TV program where he will dive into the life of professional athletes across all sports and explore their drive and motivation for pursuing their personal passions. The site chronicles Marcus's incredible life as world-class athlete, spokesman for the most prestigious brands in the sport (Mastercraft & HO) and the ambassador of the greatest adrenaline sports. We have brought this story to life by fusing together all of his social media channels and providing a place for Marcus to tell his tales. In addition, Marcus provides product review for water ski gear and cool clothes and garb that fit the lifestyle. Finally, each month Marcus will feature a young and inspiring athlete, helping to seed the future of this support. A big thanks to Matt Ramerman for the opportunity to work on this project, Zach Anderson for the development and technical strategy, and Andrew Gall for some great copy. Website walkthrough <img src="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBrown01.jpg" border="0" width="670" height="515" width_o="670" height_o="515" src_o="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBrown01_o.jpg" align="left" /> <img src="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBrown02.jpg" border="0" width="670" height="515" width_o="670" height_o="515" src_o="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBrown02_o.jpg" align="left" /> <img src="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBrown03.jpg" border="0" width="670" height="515" width_o="670" height_o="515" src_o="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBrown03_o.jpg" align="left" /> <img src="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBrown04.jpg" border="0" width="670" height="515" width_o="670" height_o="515" src_o="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBrown04_o.jpg" align="left" /> <img src="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBrown05.jpg" border="0" width="670" height="515" width_o="670" height_o="515" src_o="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBrown05_o.jpg" align="left" /> Background design elements <img src="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBKG01.jpg" border="0" width="670" height="515" width_o="670" height_o="515" src_o="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBKG01_o.jpg" align="left" /> <img src="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBKG02.jpg" border="0" width="670" height="515" width_o="670" height_o="515" src_o="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBKG02_o.jpg" align="left" /> <img src="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBKG03.jpg" border="0" width="670" height="515" width_o="670" height_o="515" src_o="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBKG03_o.jpg" align="left" /> <img src="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBKG04.jpg" border="0" width="670" height="515" width_o="670" height_o="515" src_o="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBKG04_o.jpg" align="left" /> <img src="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBKG05.jpg" border="0" width="670" height="515" width_o="670" height_o="515" src_o="http://payload16.cargocollective.com/1/0/20108/2623556/MarcusBKG05_o.jpg" align="left" /> http://www.watchjohnny.com/Color-Palette-of-the-Occupy-Movement http://www.watchjohnny.com/following/watchjohnny.com/Color-Palette-of-the-Occupy-Movement Wed, 09 Nov 2011 18:04:58 +0000 Jonathan Harris - Art Director, Designer 2279600 Driving in to the office, I passed under an overpass occupied by protestors. Beyond their message, my attention was also caught by how similarly outfitted they all were, which inspired this palette. <img src="http://payload.cargocollective.com/1/0/20108/2279600/Occupy1.jpg" border="0" width="670" height="554" width_o="670" height_o="554" src_o="http://payload.cargocollective.com/1/0/20108/2279600/Occupy1_o.jpg" align="left" /> http://www.watchjohnny.com/Strategies360-com-redesign http://www.watchjohnny.com/following/watchjohnny.com/Strategies360-com-redesign Tue, 25 Oct 2011 20:09:37 +0000 Jonathan Harris - Art Director, Designer 2203796 While employed at Strategies 360 (and currently employed as Creative Director) I was tasked with the job of redesigning the company website. We continued to grow at a very fast rate and because of this, this project evolved several times during the design phase. I'm happy the site has launched and can be experienced here, or below in the slideshow. Integrating social media elements as well as designing for mobile were of utmost importance. <img src="http://payload.cargocollective.com/1/0/20108/2203796/S360site01.jpg" border="0" width="670" height="500" width_o="670" height_o="500" src_o="http://payload.cargocollective.com/1/0/20108/2203796/S360site01_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/2203796/S360site02.jpg" border="0" width="670" height="500" width_o="670" height_o="500" src_o="http://payload.cargocollective.com/1/0/20108/2203796/S360site02_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/2203796/S360site03.jpg" border="0" width="670" height="500" width_o="670" height_o="500" src_o="http://payload.cargocollective.com/1/0/20108/2203796/S360site03_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/2203796/S360site04.jpg" border="0" width="670" height="500" width_o="670" height_o="500" src_o="http://payload.cargocollective.com/1/0/20108/2203796/S360site04_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/2203796/S360site05.jpg" border="0" width="670" height="500" width_o="670" height_o="500" src_o="http://payload.cargocollective.com/1/0/20108/2203796/S360site05_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/2203796/S360site06.jpg" border="0" width="670" height="500" width_o="670" height_o="500" src_o="http://payload.cargocollective.com/1/0/20108/2203796/S360site06_o.jpg" align="left" /> http://www.watchjohnny.com/Concept-Redesign-of-BMWusa-com http://www.watchjohnny.com/following/watchjohnny.com/Concept-Redesign-of-BMWusa-com Fri, 17 Dec 2010 18:09:13 +0000 Jonathan Harris - Art Director, Designer 865934 Below is a brief breakdown of my redesign concept. Please email me if you'd like a more detailed accounting of the process and my UX ideas. The challenge: What opportunities might there be to support product consideration while creating an improved consumer experience that can reinforce the core value proposition “The Ultimate Driving Machine” without losing the simplicity desired by loyalist customers? Existing BMWusa.com site: <img src="http://payload.cargocollective.com/1/0/20108/865934/BMWusa_jh_old.jpg" border="0" width="670" height="515" width_o="670" height_o="515" src_o="http://payload.cargocollective.com/1/0/20108/865934/BMWusa_jh_old_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/865934/BMWusa_jh_oldmobile.jpg" border="0" width="670" height="515" width_o="670" height_o="515" src_o="http://payload.cargocollective.com/1/0/20108/865934/BMWusa_jh_oldmobile_o.jpg" align="left" /> Current site review: The user experience is identical to the competition in nearly every conceivable way. Visually, the photography the user is presented with is generally bland and static, even with the addition of flash scrolling and zooming. Functionally, the site is too feature/benefit forward and the design gestalt is overly sterile. It has completely lost the “Ultimate Driving Machine” value proposition and essentially rejects visually and experientially everything that makes driving and owning a BMW a pleasure. UX in Mobile format: bmwusa.com’s mobile format is clunky, confusing and already appears outdated. Imagery is low quality and navigation is not very intuitive. It does however, offer more than just car model information, which is all you’ll find on Mercedes Benz’s much sleeker and properly designed mobile site. Interesting to note: bmwusa.com utilizes the least amount of screen real estate at just 985x605 pixels, whereas direct competitor Mercedes Benz (mbusa.com) requires a minimum of 1200x925 to view without scrolling. Clearly bmwusa is more easily viewable on smaller screens, but it feels like MB is making a statement about their clientele in this decision. Their customers demand the best and latest technology. Recognizing the three types of consumers and their paths to the site: 1. Acquisition A potential customer engages a dynamic rich media banner, possibly at New York Times or Wall Street Journal. Links to a promotional interactive microsite, which is all brand and emotion with a heavy focus on BMW core values. Links from there to bmwusa.com 2. Consideration This customer is highly aware of BMW and understands and appreciates the core values. Customer comes directly to bmwusa.com 3. Loyalist Owner/customer. He/she comes for product information, interaction with other owners, and pride purposes. Proposed site redesign: Now understanding the different customer types and pathways to the bmwusa.com website, and the overall success of BMW’s existing business model, I would have to assume that the various metrics show their current site is operating at a level of efficiency that I personally cannot prove is beatable, or unbeatable. Instead of tearing apart the entire structure, I elected to pursue a re-order of the options presented, with the addition of some proposed new features such as video highlights of featured autos, and a more aggressive and enticing selection of product photography more in-line with the core value proposition “The Ultimate Driving Machine”. <img src="http://payload.cargocollective.com/1/0/20108/865934/BMWusa_jh_1.jpg" border="0" width="670" height="435" width_o="670" height_o="435" src_o="http://payload.cargocollective.com/1/0/20108/865934/BMWusa_jh_1_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/865934/BMWusa_jh_2.jpg" border="0" width="670" height="435" width_o="670" height_o="435" src_o="http://payload.cargocollective.com/1/0/20108/865934/BMWusa_jh_2_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/865934/BMWusa_jh_3.jpg" border="0" width="670" height="435" width_o="670" height_o="435" src_o="http://payload.cargocollective.com/1/0/20108/865934/BMWusa_jh_3_o.jpg" align="left" /> BMWusa.com Mobile redesign Taking design elements from the updated website, the mobile version will offer a cleaner, trimmed down selection of immediate options (more options become available as you explore deeper), but I’ve also added the “Build Your Own” feature to the front page. An option to view the full site is still available. <img src="http://payload.cargocollective.com/1/0/20108/865934/BMWusa_jh_4.jpg" border="0" width="670" height="435" width_o="670" height_o="435" src_o="http://payload.cargocollective.com/1/0/20108/865934/BMWusa_jh_4_o.jpg" align="left" /> http://www.watchjohnny.com/Education-Landscape-Infographic http://www.watchjohnny.com/following/watchjohnny.com/Education-Landscape-Infographic Tue, 12 Oct 2010 23:08:10 +0000 Jonathan Harris - Art Director, Designer 697977 Washington State's education system structure can be confusing to explain, especially during an election year. This infographic breaks it down for ease of consumption. It's the first of what will be a series of three placemat sized prints. <img src="http://payload.cargocollective.com/1/0/20108/697977/Edu_landscape.jpg" border="0" width="670" height="434" width_o="670" height_o="434" src_o="http://payload.cargocollective.com/1/0/20108/697977/Edu_landscape_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/697977/Edu_landscape_det001.jpg" border="0" width="670" height="434" width_o="670" height_o="434" src_o="http://payload.cargocollective.com/1/0/20108/697977/Edu_landscape_det001_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/697977/Edu_landscape_det002.jpg" border="0" width="670" height="434" width_o="670" height_o="434" src_o="http://payload.cargocollective.com/1/0/20108/697977/Edu_landscape_det002_o.jpg" align="left" /> Completed while with Strategies 360 http://www.watchjohnny.com/Decade-IPA http://www.watchjohnny.com/following/watchjohnny.com/Decade-IPA Wed, 29 Sep 2010 19:33:24 +0000 Jonathan Harris - Art Director, Designer 350144 Decade IPA packaging design for Taphandles Inc. as a self-promotional tool. <img src="http://payload.cargocollective.com/1/0/20108/350144/decade_ipa.jpg" border="0" width="670" height="528" width_o="670" height_o="528" src_o="http://payload.cargocollective.com/1/0/20108/350144/decade_ipa_o.jpg" align="left" /> {Artwork produced while employed by Taphandles Inc.} http://www.watchjohnny.com/Taphandles-Inc http://www.watchjohnny.com/following/watchjohnny.com/Taphandles-Inc Mon, 20 Sep 2010 16:35:32 +0000 Jonathan Harris - Art Director, Designer 228681 Turning 10 years old is a milestone for any company, and Taphandles chose to announce it with the creation of this printed invitation / postcard, and poster showcasing their expanded design capabilities. <img src="http://payload.cargocollective.com/1/0/20108/228681/TI_invite.jpg" border="0" width="670" height="1342" width_o="670" height_o="1342" src_o="http://payload.cargocollective.com/1/0/20108/228681/TI_invite_o.jpg" align="left" /> Invitation postcard {Artwork produced while employed by Taphandles Inc.} <img src="http://payload.cargocollective.com/1/0/20108/228681/TI-10POSTER.jpg" border="0" width="670" height="867" width_o="670" height_o="867" src_o="http://payload.cargocollective.com/1/0/20108/228681/TI-10POSTER_o.jpg" align="left" /> Poster {Artwork produced while employed by Taphandles Inc.} http://www.watchjohnny.com/Local-Hero http://www.watchjohnny.com/following/watchjohnny.com/Local-Hero Mon, 20 Sep 2010 16:33:50 +0000 Jonathan Harris - Art Director, Designer 228669 Local Hero is a quarterly contest held by big al brewing in Seattle, WA. Local home brewers are invited to submit recipes and samples and the winner is awarded with having their beer brewed at the big al brewery and served at more than a handful of pubs and bars. The concept behind this poster stems from old WWII propaganda posters and acts as a call to action for the home brewing community. <img src="http://payload.cargocollective.com/1/0/20108/228669/BigAl_poster.jpg" border="0" width="670" height="1035" width_o="670" height_o="1035" src_o="http://payload.cargocollective.com/1/0/20108/228669/BigAl_poster_o.jpg" align="left" /> {Artwork produced while employed by Taphandles Inc.} http://www.watchjohnny.com/The-old-watchjohnny-com http://www.watchjohnny.com/following/watchjohnny.com/The-old-watchjohnny-com Wed, 15 Sep 2010 23:11:07 +0000 Jonathan Harris - Art Director, Designer 637594 The original version of my portfolio was meant to feel like a peek into one of my most personal possessions, my Moleskine® journal where most of my ideas are born. Eventually an excess of work and an all too difficult to update site design was replaced with what you're visiting today. I must say I do miss the feeling of intimacy that is now lacking. <img src="http://payload.cargocollective.com/1/0/20108/637594/watchjohnny_old01.jpg" border="0" width="670" height="564" width_o="670" height_o="564" src_o="http://payload.cargocollective.com/1/0/20108/637594/watchjohnny_old01_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/637594/watchjohnny_old02.jpg" border="0" width="670" height="564" width_o="670" height_o="564" src_o="http://payload.cargocollective.com/1/0/20108/637594/watchjohnny_old02_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/637594/watchjohnny_old03.jpg" border="0" width="670" height="564" width_o="670" height_o="564" src_o="http://payload.cargocollective.com/1/0/20108/637594/watchjohnny_old03_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/637594/watchjohnny_old04.jpg" border="0" width="670" height="564" width_o="670" height_o="564" src_o="http://payload.cargocollective.com/1/0/20108/637594/watchjohnny_old04_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/637594/watchjohnny_old05.jpg" border="0" width="670" height="564" width_o="670" height_o="564" src_o="http://payload.cargocollective.com/1/0/20108/637594/watchjohnny_old05_o.jpg" align="left" /> http://www.watchjohnny.com/Mazatlan-Tourism http://www.watchjohnny.com/following/watchjohnny.com/Mazatlan-Tourism Tue, 14 Sep 2010 21:00:13 +0000 Jonathan Harris - Art Director, Designer 634740 CONCEPT WORK Mazatlanlifestyle.net was in need of a new website to better advertise the city as a premier destination for the vacation condo buyer. The proposed design was to be heavily photo-centric and driven by user created video and journal entries highlighting the many activities in and around the Mazatlan area, giving a "local's" view of the vicinity to potential North American based home buyers. "Mañana is Today" is a reference to the affordability of the local real estate market. <img src="http://payload.cargocollective.com/1/0/20108/634740/Mazatlan_01.jpg" border="0" width="670" height="460" width_o="670" height_o="460" src_o="http://payload.cargocollective.com/1/0/20108/634740/Mazatlan_01_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/20108/634740/Mazatlan_02.jpg" border="0" width="670" height="460" width_o="670" height_o="460" src_o="http://payload.cargocollective.com/1/0/20108/634740/Mazatlan_02_o.jpg" align="left" /> Existing site: <img src="http://payload.cargocollective.com/1/0/20108/634740/Mazatlan_old.jpg" border="0" width="670" height="460" width_o="670" height_o="460" src_o="http://payload.cargocollective.com/1/0/20108/634740/Mazatlan_old_o.jpg" align="left" />