Matt Copeland is a UX designer and information architect with skills in UI design, development, and visual design. He has over 10 years of experience in content strategy and information architecture. His work sample highlights a project redesigning an online distributor portal.

1. Matt Copeland: a snapshot.
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: a quick 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: beyond lists.
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.
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 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: Diageo distributor 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.
Lay it all out on the table.. err board.
Matt Copeland: a snapshot. 7 / 12

8. Diageo: mind maps.
I translated the information from the whiteboards and discussions into mind maps.
Matt Copeland: a snapshot. 8 / 12

9. Diageo: sketching.
"It's not about the sketch. It's the process of sketching." -Bill Buxton
Matt Copeland: a snapshot. 9 / 12

10. Diageo: wireframes.
Internets, the early years.
Matt Copeland: a snapshot. 10 / 12

11. Diageo: visual design.
Visual designs of the home page.
Matt Copeland: a snapshot. 11 / 12

12. Resume: one page.
Packanimal Creative 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 matt@packanimalcreative.com
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