Matt copeland: a snapshot.

Matt copeland: a snapshot.

• 1.
  Matt Copeland: asnapshot. User. Designer. Content Page 1 About me: a quick look. Page 2 Mind Maps: beyond lists. Page 3 Flows: info design. Page 4 Visual Designs: texture. Pages 5-11 Work Sample: distributor portal. Page 12 Resume: one page.
• 2.
  About me: aquick look. Skill set: Gear: Personal Background: UX Designer, Information MacBook Pro, iPad, iPhone, I'm an adventure seeker with a thirst for knowledge. My work-ethic Architect, UI Designer, Moleskine. and 'ambidextrous mind' can be attributed to my parents, an Developer. Architect and a CPA; both musicians. Languages: Software: I enjoy traveling as my family is spread throughout the country: HTML5, CSS3, JS, PHP, CS5.5, Xcode, Omnigraffle, Baltimore, Columbus, Detroit, Scottsdale and San Francisco. SQL, Objective C. Axure, iThoughtsHD. May 2011 I've been busy. M Fi Pe St C M En Br Di Ki Pa St Bl Kr in tn DL oc ar m ag ac ar om lo af er ck te es co be tW LC to ks tF gi eo kB stri l- an s er zin ni rly ire Fo oo bo an er ic M -J -D im a a g ry ar C st ds d d -J -S im al i -E In la ke er Bl -P -F rP ob -M m rk no C oc on tR co -I bu ac y er re -i va ag ia m ic de m Jo es so at to eb Pa tio lF ro ag m gr s hn ea iv na oo si d er n un eg er -E e rc 's te lT or Sa ce k -C y -U at dr h co + ra ta + le or + An on ai in l Jo X m Fa s Fa si er + fe m al + Ap b ce ng So yt ce re er Br C Ap p bo ic nc ce lie bo ci + an pl s ok nt al e Ec ok ic Ap di Si M at om ng My Startups pl te io an ic ns + + m ag at Packanimal D Fa er io er es Projects ce ce ns ig bo n ok St ud io Matt Copeland: a snapshot. 2 / 12
• 3.
  Mind Maps: beyondlists. Mind mapping helps me to process complex information and recap conversations. I make these diagrams during meetings/briefs using an iPad app called iThoughtsHD. It's fast and effective. Diageo distributor portal. Kraft Foods: Lunchables Microsite Redesign GorillaClique Model Concept Organization of homepage widgets. Project overview: Goals, deliverables, A social network with a focus on OOH adverts. Noting overlap of content/menus for review. opportunities and target audience. Watch for it soon. Diageo Distributor Portal Brand Hierarchy. ByeBye Chicago Stocks and Blondes Features The world's largest spirit supplier has a wide A current site redesign in progress. Created in the bar while chatting with the owner array of products and the team needed to This map separates design elements (left) about his site's utility. I wish all my projects visualize the tree from Parent-Brand to SKU. from pages and features (right). involved brainstorming at the pub. The variety of whiskeys (left half) far outweighs the sum of all liquors and liqueurs (right half). Matt Copeland: a snapshot. 3 / 12
• 4.
  Flows: info design. Flowsare pieces of Information Design that help an IA to communicate with their team and document experiences. Examples below: Content Flows, User/Navigation Flows & Programming Loops. BlackBerry Facebook Campaign Flow Kraft Foods: Lunchables - Microsite Redesign Kraft Foods: Lunchables - Microsite Redesign Content Flow: change of messaging and link User-flow: High-level. Path from source (top) User-Flow: Low-level. Path through game-zone targets of a rich Facebook element. through the target (bottom, green). (purple on previous map) + data passes (black). Mintel Retro Programming Loop Mintel Data Entry System Mintel Data Entry System I designed this loop to retro-edit over 500,000 User Flow: Data-entry navigation. I used this chart in meetings to ensure clear beverage-flavor instances. communication with IT and data-entry users. Matt Copeland: a snapshot. 4 / 12
• 5.
  Visual Designs: texture. Stocks and Blondes The brick, chalkboards and wood match the exact textures found at Stocks and Blondes bar. Ajax-animation menu-page, @fontface typography & CSS3 transitions. http://stocksandblondesbar.com Marcofoster.com Bromerica Created a simple brand The simple interface puts the product at identity. Styled center focus. Grass textures, CSS3 Facebook integration, gradient menus and backgrounds, Ajax @fontface typography, animations & @fontface typography. smooth Ajax animations http://bromerica.com and beautiful photography. http://marcofoster.com Matt Copeland: a snapshot. 5 / 12
• 6.
  Work Sample: Diageodistributor portal. Model Metrics assembled a team to create a new distributor portal for the world's largest spirit supplier, Diageo. The following 5-pages display visual examples of each step of the process, while protecting proprietary information. Everything you will see was created by my own hand. Step 1: White boards. Step 2: Mind Mapping. Step 3: Sketching. Everything starts with a content inventory. Translating the whiteboards into mind maps to The process of sketching opens the mind and Content inventory begins on whiteboards. communicate with the team and document the allows one to think about the elements. thought process. Step 4: Wireframes. Step 5: Visual design. Step 6: Prototype. UI elements began to take shape with the wires. Colors, gradients, drop shadows and textures. In agile development, clean reusable code is *Visual Designs and prototypes often have a important. I create prototypes with lean HTML5, reciprocal relationship. CSS3, and javascript. Matt Copeland: a snapshot. 6 / 12
• 7.
  Diageo: white boards. Layit all out on the table.. err board. Matt Copeland: a snapshot. 7 / 12
• 8.
  Diageo: mind maps. Itranslated the information from the whiteboards and discussions into mind maps. Matt Copeland: a snapshot. 8 / 12
• 9.
  Diageo: sketching. "It's notabout the sketch. It's the process of sketching." -Bill Buxton Matt Copeland: a snapshot. 9 / 12
• 10.
  Diageo: wireframes. Internets, theearly years. Matt Copeland: a snapshot. 10 / 12
• 11.
  Diageo: visual design. Visualdesigns of the home page. Matt Copeland: a snapshot. 11 / 12
• 12.
  Resume: one page. PackanimalCreative Present Why do you want me on your team? Founder 05/2011 I'm a highly collaborative creative with the ability to Creative Consulting. UX, UI, IA independently design & develop digital experiences. http://packanimalcreative.com Razorfish 11/2011 Tool Kit Senior Information Architect 09/2011 (contract) Hardware MacBook Pro, iPad, iPhone, Moleskine. http://razorfish.com Software CS5.5, Xcode, Omnigraffle, Axure, iThoughtsHD Model Metrics 08/2011 Languages HTML5, CSS3, JS, PHP, SQL, Objective C UX/UI Designer 06/2011 (contract) http://modelmetrics.com Mintel International 05/2011 Social PM - Product Development 02/2010 LinkedIn http://www.linkedin.com/in/matthewcopeland UX, IA, UI, QA, Competitive. http://mintel.com Twitter http://twitter.com/matthewcopeland Facebook http://www.facebook.com/matthewstevencopeland Pelotonia 09/2009 Director of Procurement 01/2009 Foursquare http://foursquare.com/matthewcopeland http://pelotonia.org SlideShare http://www.slideshare.net/matthewcopeland/ JPMorgan Chase 10/2008 Licensed banker 07/2007 Series 6/life certifications Engauge 06/2007 Contact AM & Media Intern 12/2006 http://engauge.com mobile 312.882.3870 Cameron Mitchell 03/2007 email [email protected] Restaurants 07/2004 Home Office Intern address 365 N Jefferson Street #2609 Chicago, IL 60661 Education Class of The Ohio State University 2007 Business / Hospitality Study of experiential business in entertainment and travel. Matt Copeland: a snapshot. 12 / 12