http://pc.joebrokken.com Brokken Design Tue, 19 Jul 2011 07:32:21 +0000 http://pc.joebrokken.com en http://pc.joebrokken.com/Emerging-Media-1 http://pc.joebrokken.com/following/pc.joebrokken.com/Emerging-Media-1 Tue, 19 Jul 2011 07:32:21 +0000 Brokken Design 1748042 visit site <img src="http://payload.cargocollective.com/1/3/116901/1748042/Emerging-media-services.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1748042/Emerging-media-services_o.png" data-mid="8599449" border="0" align="left"/> Problem Emerging Media is a social media startup and they needed a blog platform to reach their customers with. The company wanted a handful of pages to explain what they do and a blog roll that could be updated regularly to drive traffic to the site. <img src="http://payload.cargocollective.com/1/3/116901/1748042/Emergin-media-post2.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1748042/Emergin-media-post2_o.png" data-mid="8599451" border="0" align="left"/> Solution The Emerging Media site takes cues from current social media trends with it's monochromatic branding. The "about" and "services" page have eye-catching graphics and easy to read blocks of information. Follow the eye path and you reach a learn more button that leads the user onward. <img src="http://payload.cargocollective.com/1/3/116901/1748042/emerginmediapost.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1748042/emerginmediapost_o.png" data-mid="8599452" border="0" align="left"/> http://pc.joebrokken.com/Brokken-Design-Mobile http://pc.joebrokken.com/following/pc.joebrokken.com/Brokken-Design-Mobile Thu, 14 Jul 2011 19:51:05 +0000 Brokken Design 1729916 Problem I wanted to make a mobile site that was easy to browse through in 2-5min. I was very pleased with the eyeflow and simplicity of my Cargo Collective website. The visual navigation on the home screen is populated at the end of every post, making it easy to browse the entire site. <img src="http://payload.cargocollective.com/1/3/116901/1729916/brokken design mobile.jpg" width="670" height="354" width_o="902" height_o="477" src_o="http://payload.cargocollective.com/1/3/116901/1729916/brokken design mobile_o.jpg" data-mid="8506863" border="0" align="left"/> Solution Brokken Design Mobile is a sleek, scaled down experience. I narrowed down the number of images on the site and embedded video links to shorten load time. The Brokken Design Mobile web app was created using the jQtouch mobile framework for iPhone. If you have an iPhone, try it.<img src="http://payload.cargocollective.com/1/3/116901/1729916/brokken design chip.jpg" width="107" height="108" width_o="107" height_o="108" src_o="http://payload.cargocollective.com/1/3/116901/1729916/brokken design chip_o.jpg" data-mid="8506865" border="0" align="left"/> http://pc.joebrokken.com/Safeco-VIP http://pc.joebrokken.com/following/pc.joebrokken.com/Safeco-VIP Tue, 07 Jun 2011 07:09:38 +0000 Brokken Design 1554891 Problem Baseball fans can spend over 20 minutes in the snack line waiting for a quick order like beer and a hotdog. But time spent in line is time spent away from the game. Safeco Field needs an app that gives sportsfans the VIP service right to their seat. Research <img src="http://payload.cargocollective.com/1/3/116901/1554891/p35.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1554891/p35_o.png" data-mid="7610096" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1554891/p36.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1554891/p36_o.png" data-mid="7610094" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1554891/p37.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1554891/p37_o.png" data-mid="7610091" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1554891/p38.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1554891/p38_o.png" data-mid="7610087" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1554891/p39.png" width="670" height="502" width_o="2032" height_o="1524" src_o="http://payload.cargocollective.com/1/3/116901/1554891/p39_o.png" data-mid="7610084" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1554891/p40.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1554891/p40_o.png" data-mid="7610077" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1554891/p41.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1554891/p41_o.png" data-mid="7610074" border="0" align="left"/> Rapid Prototype Walkthrough A series of flat screens are linked using Adobe Fireworks to create a user interface (UI) prototype for this live feature tour. Feedback The prototype walk-through was a tremendous win because it gave us an opportunity for another round of user feedback. Based on our user feedback we were able to re-define the taskflow and create a VIP experience that was fun to use and easy to navigate. <img src="http://payload.cargocollective.com/1/3/116901/1554891/p58.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1554891/p58_o.png" data-mid="7668519" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1554891/p59.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1554891/p59_o.png" data-mid="7668521" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1554891/p60.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1554891/p60_o.png" data-mid="7668522" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1554891/p61.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1554891/p61_o.png" data-mid="7668580" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1554891/p62.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1554891/p62_o.png" data-mid="7668581" border="0" align="left"/> Team I worked with designer Stacey Rozich to create the UI design for the Safeco VIP app. I was responsible for developing the look and feel of the screens and creating the live screens for our prototype walkthrough. <img src="http://payload.cargocollective.com/1/3/116901/1554891/SafecoBusshelter.jpg" width="670" height="934" width_o="1767" height_o="2465" src_o="http://payload.cargocollective.com/1/3/116901/1554891/SafecoBusshelter_o.jpg" data-mid="7686728" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1554891/SafecoVIP_Ad.jpg" width="670" height="1035" width_o="2048" height_o="3165" src_o="http://payload.cargocollective.com/1/3/116901/1554891/SafecoVIP_Ad_o.jpg" data-mid="7686727" border="0" align="left"/> http://pc.joebrokken.com/WT-Vintners http://pc.joebrokken.com/following/pc.joebrokken.com/WT-Vintners Fri, 03 Jun 2011 08:17:11 +0000 Brokken Design 1538825 <img src="http://payload.cargocollective.com/1/3/116901/1538825/p24_2.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538825/p24_2_o.jpg" data-mid="7610614" border="0" align="left"/> visit site Problem WT Vintners is a boutique Washington wine company that needed a branding package. They needed a wine label, logo, and a website that scaled from desktop to mobile. <img src="http://payload.cargocollective.com/1/3/116901/1538825/p23.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538825/p23_o.jpg" data-mid="7524829" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538825/p25.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538825/p25_o.jpg" data-mid="7524831" border="0" align="left"/> Solution WT Vintners' wine label and logomark represent their "old world no tricks" approach to winemaking. I took cues from the multicolored illustration and chose an Art Nouveau look for the brand. Based upon the success of the inaugural vintage we worked to create a logo for the larger WT Vintners brand. The WTV seal serves as a master brand logo that can be applied to new label designs as the brand grows. Website At first glance the WT Vintners website is very simple. Its complexity lies within the Search Engine Optimization (SEO) keywords woven into the website's inner workings. After researching viable keywords, detailed attention was paid to the way they were inserted into headings, image tags, and navigation to achieve optimal SEO ranking. <img src="http://payload.cargocollective.com/1/3/116901/1538825/p33.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538825/p33_o.jpg" data-mid="7610615" border="0" align="left"/> WTV | Keyword Statement WT Vintners | A boutique Washington wine company making great wine. We source syrah grapes from the Walla Walla Valley and Horse Heaven Hills, WA. http://pc.joebrokken.com/Boast http://pc.joebrokken.com/following/pc.joebrokken.com/Boast Fri, 03 Jun 2011 08:09:10 +0000 Brokken Design 1538780 Problem Many brick and mortar businesses are having trouble with online competition because online marketers can offer deals and incentives 24 hours a day. Brick and mortar businesses need help harnessing the power of mobile advertising. <img src="http://payload.cargocollective.com/1/3/116901/1538780/p22_5.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538780/p22_5_o.jpg" data-mid="7554201" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538780/p21.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538780/p21_o.jpg" data-mid="7524658" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538780/p18.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538780/p18_o.jpg" data-mid="7524654" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538780/p19.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538780/p19_o.jpg" data-mid="7524655" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538780/P71.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538780/P71_o.png" data-mid="7811628" border="0" align="left"/> Challenge Design an app that helps users share recent purchases quickly and easily. The app will use location-based software to give businesses a chance to encourage local shoppers to stop in. Sketches and Screens <img src="http://payload.cargocollective.com/1/3/116901/1538780/p63.png" width="640" height="593" width_o="640" height_o="593" src_o="http://payload.cargocollective.com/1/3/116901/1538780/p63_o.png" data-mid="7668712" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538780/p64.png" width="640" height="593" width_o="640" height_o="593" src_o="http://payload.cargocollective.com/1/3/116901/1538780/p64_o.png" data-mid="7668714" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538780/p65.png" width="640" height="593" width_o="640" height_o="593" src_o="http://payload.cargocollective.com/1/3/116901/1538780/p65_o.png" data-mid="7668716" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538780/p66.png" width="640" height="593" width_o="640" height_o="593" src_o="http://payload.cargocollective.com/1/3/116901/1538780/p66_o.png" data-mid="7668717" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538780/p67.png" width="640" height="593" width_o="640" height_o="593" src_o="http://payload.cargocollective.com/1/3/116901/1538780/p67_o.png" data-mid="7668718" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538780/p68.png" width="640" height="593" width_o="640" height_o="593" src_o="http://payload.cargocollective.com/1/3/116901/1538780/p68_o.png" data-mid="7668721" border="0" align="left"/> I worked with designer Nevena Stoeva to research and create this user interface design. I estimate my contribution to be 75% of the design, 25% of the research and 50% of the wireframing, with Nevena providing the rest. http://pc.joebrokken.com/Handy-Work http://pc.joebrokken.com/following/pc.joebrokken.com/Handy-Work Fri, 03 Jun 2011 07:48:23 +0000 Brokken Design 1538758 A collection of screen printed designs for home and leisure. <img src="http://payload.cargocollective.com/1/3/116901/1538758/p14.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538758/p14_o.jpg" data-mid="7524421" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538758/p15.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538758/p15_o.jpg" data-mid="7524422" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538758/p16.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538758/p16_o.jpg" data-mid="7524423" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538758/p17.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538758/p17_o.jpg" data-mid="7524424" border="0" align="left"/> I Rain Seattle - design for Pike Place Market t-shirt stand Sportsball - 4-color collaboration with designer Chris Olsen 4 Your Glasses - custom coaster set Tic-Tac-Coasters - interactive coaster set http://pc.joebrokken.com/Magazine-redesign http://pc.joebrokken.com/following/pc.joebrokken.com/Magazine-redesign Fri, 03 Jun 2011 07:28:23 +0000 Brokken Design 1538715 Problem Redesigning one of my favorite local food and culture magazines was an incredible challenge. I needed to update the look and feel of Edible Seattle magazine, while retaining the audience and appeal of the publication in its current state. <img src="http://payload.cargocollective.com/1/3/116901/1538715/p8.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538715/p8_o.jpg" data-mid="7524234" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538715/p9.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538715/p9_o.jpg" data-mid="7524235" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538715/p11.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538715/p11_o.jpg" data-mid="7524237" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538715/p12.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538715/p12_o.jpg" data-mid="7524238" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538715/p13.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538715/p13_o.jpg" data-mid="7524239" border="0" align="left"/> Solution The new logomark and type treatment represent sustainability, quality craftsmanship and the pioneering spirit of Edible Seattle. I paid close attention to the categorization of recipes for easy meal planning and navigation. The newly expanded "What's in Season?" centerfold serves as a decorative pull-out to hang on the fridge. http://pc.joebrokken.com/Anomaly http://pc.joebrokken.com/following/pc.joebrokken.com/Anomaly Fri, 03 Jun 2011 07:12:27 +0000 Brokken Design 1538692 Problem Anomaly is an urban boutique electronics store. They stock premium Mac and PC devices and need a brand identity that will appeal to today's upwardly mobile tech-savvy electronics consumer. <img src="http://payload.cargocollective.com/1/3/116901/1538692/p4.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538692/p4_o.jpg" data-mid="7524151" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538692/p5.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538692/p5_o.jpg" data-mid="7524156" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538692/p6.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538692/p6_o.jpg" data-mid="7524157" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1538692/p7.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1538692/p7_o.jpg" data-mid="7524159" border="0" align="left"/> Solution The letter A made from the combination of many components represents Anomaly's pledge that their products "just work together". The letterhead and envelope bring a cheerful flair to day-to-day business communications and a metallic coating adds flash to the new business card. http://pc.joebrokken.com/Meridian-Tea http://pc.joebrokken.com/following/pc.joebrokken.com/Meridian-Tea Fri, 03 Jun 2011 06:22:39 +0000 Brokken Design 1522342 Problem The packaging for Meridian Tea needs to look at home on the supermarket shelf next to other tea boxes, but it needs to convey Meridian Tea's superiority to its neighboring brands. <img src="http://payload.cargocollective.com/1/3/116901/1522342/P1.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1522342/P1_o.jpg" data-mid="7523365" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1522342/p2.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1522342/p2_o.jpg" data-mid="7523367" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1522342/p3.jpg" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1522342/p3_o.jpg" data-mid="7523368" border="0" align="left"/> Solution Meridian Tea plays off the double meaning of the word meridian; representing the voyages of worldly tea traders along the meridian lines of the globe as well as those of traditional Chinese medicine. I found natural items to create custom textures for the package, and used Chinese medical charts to create the illustration of the "Meridian Hero". These elements combine with a highly visible logo that stands out from the rest of the packaging to emphasize the brand. Process <img src="http://payload.cargocollective.com/1/3/116901/1522342/p51.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1522342/p51_o.png" data-mid="7637656" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1522342/p52.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1522342/p52_o.png" data-mid="7637659" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1522342/p53.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1522342/p53_o.png" data-mid="7637660" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1522342/p54.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1522342/p54_o.png" data-mid="7637661" border="0" align="left"/> <img src="http://payload.cargocollective.com/1/3/116901/1522342/p50.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1522342/p50_o.png" data-mid="7637655" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1522342/p56.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1522342/p56_o.png" data-mid="7637797" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1522342/p57.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1522342/p57_o.png" data-mid="7637807" border="0" align="left"/><img src="http://payload.cargocollective.com/1/3/116901/1522342/p55.png" width="640" height="480" width_o="640" height_o="480" src_o="http://payload.cargocollective.com/1/3/116901/1522342/p55_o.png" data-mid="7637663" border="0" align="left"/>