• Save
Matt copeland: a snapshot.
Upcoming SlideShare
Loading in...5
×
 

Matt copeland: a snapshot.

on

  • 852 views

 

Statistics

Views

Total Views
852
Views on SlideShare
845
Embed Views
7

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 7

http://coderwall.com 4
http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Matt copeland: a snapshot. Matt copeland: a snapshot. Presentation Transcript

    • Matt Copeland: a snapshot. User. Designer. ContentPage 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.
    • About me: a quick look. Skill set: Gear: Personal Background: UX Designer, Information MacBook Pro, iPad, iPhone, Im 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 Ive been busy. M FiPe 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 ioMatt Copeland: a snapshot. 2 / 12
    • Mind Maps: beyond lists.Mind mapping helps me to process complex information and recap conversations. I make these diagrams duringmeetings/briefs using an iPad app called iThoughtsHD. Its fast and effective.Diageo distributor portal. Kraft Foods: Lunchables Microsite Redesign GorillaClique Model ConceptOrganization 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 FeaturesThe worlds largest spirit supplier has a wide A current site redesign in progress. Created in the bar while chatting with the ownerarray of products and the team needed to This map separates design elements (left) about his sites utility. I wish all my projectsvisualize the tree from Parent-Brand to SKU. from pages and features (right). involved brainstorming at the pub.The variety of whiskeys (left half) far outweighsthe sum of all liquors and liqueurs (right half).Matt Copeland: a snapshot. 3 / 12
    • Flows: info design.Flows are 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 RedesignContent Flow: change of messaging and link User-flow: High-level. Path from source (top) User-Flow: Low-level. Path through game-zonetargets 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 SystemI designed this loop to retro-edit over 500,000 User Flow: Data-entry navigation. I used this chart in meetings to ensure clearbeverage-flavor instances. communication with IT and data-entry users.Matt Copeland: a snapshot. 4 / 12
    • 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.comMarcofoster.com BromericaCreated a simple brand The simple interface puts the product atidentity. Styled center focus. Grass textures, CSS3Facebook integration, gradient menus and backgrounds, Ajax@fontface typography, animations & @fontface typography.smooth Ajax animations http://bromerica.comand beautifulphotography.http://marcofoster.comMatt Copeland: a snapshot. 5 / 12
    • Work Sample: Diageo distributor portal.Model Metrics assembled a team to create a new distributor portal for the worlds 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 andContent 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
    • Diageo: white boards.Lay it all out on the table.. err board.Matt Copeland: a snapshot. 7 / 12
    • Diageo: mind maps.I translated the information from the whiteboards and discussions into mind maps.Matt Copeland: a snapshot. 8 / 12
    • Diageo: sketching."Its not about the sketch. Its the process of sketching." -Bill BuxtonMatt Copeland: a snapshot. 9 / 12
    • Diageo: wireframes.Internets, the early years.Matt Copeland: a snapshot. 10 / 12
    • Diageo: visual design.Visual designs of the home page.Matt Copeland: a snapshot. 11 / 12
    • Resume: one page.Packanimal Creative Present Why do you want me on your team?Founder 05/2011 Im a highly collaborative creative with the ability toCreative Consulting. UX, UI, IA independently design & develop digital experiences.http://packanimalcreative.comRazorfish 11/2011 Tool KitSenior Information Architect 09/2011(contract) Hardware MacBook Pro, iPad, iPhone, Moleskine.http://razorfish.com Software CS5.5, Xcode, Omnigraffle, Axure, iThoughtsHDModel Metrics 08/2011 Languages HTML5, CSS3, JS, PHP, SQL, Objective CUX/UI Designer 06/2011(contract)http://modelmetrics.comMintel International 05/2011 SocialPM - Product Development 02/2010 LinkedIn http://www.linkedin.com/in/matthewcopelandUX, IA, UI, QA, Competitive.http://mintel.com Twitter http://twitter.com/matthewcopeland Facebook http://www.facebook.com/matthewstevencopelandPelotonia 09/2009Director of Procurement 01/2009 Foursquare http://foursquare.com/matthewcopelandhttp://pelotonia.org SlideShare http://www.slideshare.net/matthewcopeland/JPMorgan Chase 10/2008Licensed banker 07/2007Series 6/life certificationsEngauge 06/2007 ContactAM & Media Intern 12/2006http://engauge.com mobile 312.882.3870Cameron Mitchell 03/2007 email matt@packanimalcreative.comRestaurants 07/2004Home Office Intern address 365 N Jefferson Street #2609 Chicago, IL 60661Education Class ofThe Ohio State University 2007Business / HospitalityStudy of experiential businessin entertainment and travel.Matt Copeland: a snapshot. 12 / 12