Embed Size (px)
DESCRIPTION
Presentation by Jeff Veen, Small Batch & Erika Hall, Mule Design on how designers & developers can work better together, critical components & process of good design.
Citation preview
Understanding Designers
Erika HallMule Design
Je!rey VeenSmall Batch, Inc.
What Design IsHow It Proceeds
How Not to Screw it up
Design and developmentcan seem at odds.
Design is a* problem solving methodology.
* mostly rational
Where the journey begins
Launch
Explore
CreateRefine
Build
InnovationOptimization
Tip: If you catch yourself saying “Let’s get a designer to jazz this up a bit” you’re doing it wrong.
Define your goal!
Is a functional prototype enough?
Will neglecting design confuse your users?
Will neglecting design confuse your users?
VisualDesigner Writer
Interaction Designer
Information Architect
Design Strategist
Interface Design Roles
Visual Design
Interaction Design
Information Architecture
Connect to Excel as
datasource
Write emails explaining
stats
KPIs in email subject line
Password protected reports to
share
Scheduled report emails
Threshold triggers to
email, SMS, RSS, etc.
API
Communicate Findings
Justify spending on web efforts
Share numbers across organization
Format reports outside of tool
Understand My Visitors Analyze Incoming Traffic Sources Evaluate Site and Content Performance
Help show team's
success
Validate opportunities through A/B
testing
Track budget against profit
margin & average sale
sessions to home page as
trend
Get more budget out of
my boss
Keep copies of site to show
before & after
Measure performance
of each landing page
Track success of a process at the individual
user level
Group pages based on any relationship
Show year-to-date numbers
Identify "Horizontal Funnels"
optimize landing pages
measure interaction in flash demo
More interested in conversion
than specific revenue
Check in on regular growth
Builddemographic
understanding
Connect offlineto online
Measure value of those sourcesCompare and sort sources
Identify problemsin navigation patterns
Measure content by different groupings
Find explicit ROI calculations
Test theories to improve content
Track "non-traditional" content
Improve internal search
Understand specificuser segments
Show progress of
Web team on projects
Give access to peers
Build custom reports by
hand
Segment visitors by content of
advertisement
Identify value of traffic for each media
source
See full path between 1st
click and lead generation
help advertisers
target regions
position content by audience interest
eliminate guesswork & superstition
align relevant topics to time
of day
find content that resonates
evaluate site by section (per
"tab" in navigation)
show visitors giving up
measure scrolling in
flash
Measure clicks in flash
How can each page be
changed to increase dollars
Connect phone sales to
online leads
Use custom URLS to track
offline impressions
Track AdWord converstions
Track spending for
each campaign
Classify visitors by task
rather than segment
make design decisions based on browser/
screen support
Explore current metrics
to identify opportunity
Determine budget based on last year's
traffic
Encourage advertising
staff
Each month is a tab in Excel
Communicate user behavior to advertisers
Monitor growth by country
compare blog traffic to site
traffic
compare jan to feb
prove they own a
category of content
optimize internal search
results
justify content position
validate effectiveness
of small incremental
changes
mark an event (redesign/new content/ect) and monitor
effects
measure successful registration
Did users slow down the
video
Who is bouncing on first page?
Find most popular content
did users change the volume in
flash
Separate order value
from shopping cart
Drive print readers to
more details online
track promotions to
registration
find value of each referrer
connect search engine traffic to leads Monitor
spidering
"Micromanage" traffic/ Drill
down on segment
find out where users are from
Define success
metrics rather than site metrics
Find patterns that justify new
projects
Show more/less detail for different roles at company
Build "quick and dirty"
PowerPoint deck
communicate user
demographics to advertisers
monitor overall traffic
Compare Jan. 05 to Jan. 06
view visitors per keyword grouped by
region
monitor search index
(crawlers)
show growth in leads
change order of
subcategories to drive more
sales
watch shopping cart abandonment
rates
Tracks ROI per product
How are they using internal
site search
group traffic by "level" of site
did users close the
popup window?
Use click-through to influence
position on page
When do people
abandon
how many times did they play that game
Track by category
wish we cold connect web usage to box
office
balance quantitative metrics with rich media qualitative
not cost per visit. rather
cost for lifetime of customer
Watch traffic sources by
dollars generated
segment audience by
ISP
define behavior
patterns as "visitor type"
set benchmarks to
drive goals
Understandcurrent state Explain what the numbers mean
Provide context for numbers in
reports
Raw numbers scare our
clients
Clients don't care about
details
Print site overlay to
show clients
Legend
Advertising tasks
Publishing tasks
Ecommerce tasks
Existing Features
Planned Features
Using Analytics to Measure Success
Email Reports
Discuss Report over
phone
Time per page
Connections to CRM systems
Customized Dashboards
PDF export of charts and
reports
Discovery of reports via
seamless nav
Threshold triggers to
email, SMS, RSS, etc.
Maps as a cross-segment
Identify low-performing AdWords
Remove low AdWords
watch for spikes
Top cities
Country
drilldown
Daily Visitors
Absolute
unique
visitors
Browser
versions
Connection
speed
Browser and
platform
combos
Screen
resolutions
Screen
colors
Languages
Java enabled
Flash version
Platform
versions
Hostnames
Network
location
Referring
source
Referring
sources
Domains
Geo location
AffiliationsShow position
of ad on search engine
Bounce rate per keyword
Integration with AdWords Report Center
Overall
Keywork
conversion
CPC vs
Organic
conversion
Campaign
conversion
Keyword
consideratio
ns
Keyword
Specific
testing
CPC Program
Length of
visit
Entrance
bounce rates
Top exit
points
Depth of
visit
All
navigation
Defined
funnel
abandonmen
t
Initial
navigation
Site overlay
funnel tracking
average order value
total revenue for time period
Integration with AdSense
Discovery of reports via
seamless navSite Optimizer
separate google news from search
refers
Campaign
ROI
Source ROI
Reverse goal
path
Goal
verification
Revenue and
transactions
Medium
conversion
Referral
conversion
Medium ROIOverall ad A/
B Testing
Content by
titles
Time to
transaction
Visits to
transaction
Source
conversionTop content
LanguageContent
drilldown
Average
order value
Goal
Conversion
Trakcing
Difined funel
navigationProduct
performance
Product
categories
Product
country
correlation
Product city,
region
correlation
Product
keyword
correlation
Product
source
correlation
Transaction
list
Source
Specific
Testing
Goal tracking
User-defined
Goal
conversion
Conversation
rate graph
Integration with Google Site Maps
uses regional data to combat
fraud
Define unique measure
of success
measure interactions
per minute (in rich media)
separate pages from
visitors & find ratio
Determine history of
visitors across sessions
New vs
returning
Visitor
loyalty
Visitor
recency
New vs.
returning
Visits and
Pageview
Tracking
Threshold triggers to
email, SMS, RSS, etc.
Watch for abnormalities
Monitor competitors
AdWords buys
watch for spikes
watch top keywords
Custom dashboards
Identify and cultivate
reciprocal links
LPO betaJS goal triggers
API-based iGoogle tool
AdGroup variable
2.0.0 Traffic
Sources
Overview
2.1.0 Direct Traffic
Overview
2.2.0 Referring
Sources
T Referring sources
2.2.1 Referring
Source Detail
% visitors came directlyN
% visitors came from other linksN
% from AdWords campaignsN
3.0.0 Content
Overview
Aver. Length of Visit N
Aver. Depth of VisitN
Overlay
T Top Content
Uniq. Views
Pageviews
Ave. Time
% Exit
$ Index
TEntrance &
Bounce
Uniq. Views
Pageviews
Ave. Time
% Exit
$ Index
T Exit
Uniq. Views
Pageviews
Ave. Time
% Exit
$ Index
Aver. Time on PageN
3.1.0 Content
Detail
1.0.0 Visitor
Overview
# of visitorsN
Pages/VisitN
New vs. RetruningN
Segmentation
Design Criteria
User Defined
Content
Keyword
Campaign
Source
Medium]Campaign
Keyword Content
Country Region
CityNetwork
Location
LanguageBrowser
PlatformConnection
Speed
Screen
Resolution Colors
JavaFlash
Ave. Price
Aver QTY
Account Overview
Report tools
Add to favorites
Add to dashboard
Send as email
Export options
Connect to data
Print tools
# of sourcesN
# of visitors that came directlyN
# of visitorsN
popularity ranking and % of visitors N
points to content pageN
5.0.0 Ecommerce
overview
Total RevenueN
Total TransactoinsN
# of productsN
Product CategoriesN
TProduct
Performance
Items
Trans
Revenue
Ave. Price
Aver QTY
Product Overview
Product CategoriesN
5.1.0 Product
Detail
Title + # of Trans + Revenue N
Keywords
Source
Location
City, region, country
Revenue Rank
TProduct
Performance
Items
Trans
Revenue
Ave. Price
Aver QTY
5.2.0 Transaction
list
# of TransactionsN
TProduct
Performance
Items
Trans
Revenue
5.3.0 Average
Revenue
RevenueN
Revenue
% of Total
Transactions for
each product
Total Transactions
Total Revenue
Total Revenue for
product
Total Visitors for
Page
# of VisitorsN
Traffic Source 3.1.1 All Navigation3.1.2 Initial Navigation
TInitial
Navigation (Starting Page)
Visits
Goal/Visit
T/Visit
$/Visit
T Referring source
Visits
Goal/Visit
T/Visit
$/Visit
TAll Navigation (came from)
Visits
Goal/Visit
T/Visit
$/Visit
Aver. Time on Page
Aver. Bounce
% who started
Top Content
Total Direct Trafic
Total Referral TraficVisitors from
Source
# of Visitors new and
retruning
Aver. Pageviews/
Visite
Pageviews
# of visits new and returning
Loyality
Recency
1.1.0 Average PV/
visit
1.2.0 Total
Pageviews
1.3.0 New vs.
returning
1.4.0 Loyalty
1.5.0 Recency
4.0.0 Goals
Goal Conversion?
Total CompletionN
Conversion %N
Total ValueN
Average ValueN
Abandoned FunnelN
4.3.0 Funnel Page
Funnel Visualization
Make "Entrance" and "Exit" numbers hidden until asked for by user.
4.2.0 Reverse
Goals
% of Goals Completed
Funnel Visualization
4.1.0 Goal Detail
3.1.3 Site Overlay
Detail
3.2.0 Average Time
on Page
3.3.0 Average
Bounce Rate
3.4.1 Percent who
started
Direct VisitorsS
Visits
Bounce Rate
Pages/Visits
Time on Site
First Visit To Site
Goal 1
Goal 2
Goal 3
Goal 4
Transactions
Revenue
Source Domain Name
# of visitorsN
iff source has one link referral:
else:
TSource's Link
Referrals
Visits
Bounce Rate
Pages/Visits
Time on Site
First Visit To Site
Goal 1
Goal 2
Goal 3
Goal 4
Transactions
Revenue
URL
2.2.2 Link Detail
# of visitorsN
popularity ranking and % of visitors N
points to content pageN
Visitors from Link
Search EnginesT
2.3.0 Search
Engines Overview
(all)
% visitors from search enginesN
# of keywordsN
% of total trafficN
% of each search
engine
# of paid keywordsN
Visits
Bounce Rate
Pages/Visits
Time on Site
First Visit To Site
Goal 1
Goal 2
Goal 3
Goal 4
Transactions
Revenue
Search Engine Name
Total # of Keywords
2.3.2 Search
Engine Detail
(all)
% of engine's traffic
for top 5 keywords
# of visitorsN
# of keywordsN
# of visitors from paid keywordsN
Visitors from this Search EngineS
% Bounce
Pages/Visits
Avg. Time on Site
% First Visit To Site
% Goal 1
% Goal 2
% Goal 3
% Goal 4
# of Transactions
Total Revenue
# of Products
link to geo map for this segment
link to language list for this segment
KeywordsT
Visits
Bounce Rate
Pages/Visits
Time on Site
First Visit To Site
Goal 1
Goal 2
Goal 3
Goal 4
Transactions
Revenue
Keyword
2.3.4 Top
Keywords
(all)
% of search traffic
for top 5 keywords
# of keywordsN
KeywordsT
Visits
Bounce Rate
Pages/Visits
Time on Site
First Visit To Site
Goal 1
Goal 2
Goal 3
Goal 4
Transactions
Revenue
Keyword
2.3.6 Keyword
Detail
visitors from
keyword
# of visitorsN
points to content page(s)N
is part of campaignN
Visitors from this KeywordS
% Bounce
Pages/Visits
Avg. Time on Site
% First Visit To Site
% Goal 1
% Goal 2
% Goal 3
% Goal 4
# of Transactions
Total Revenue
# of Products
link to geo map for this segment
link to language list for this segment
Search EnginesT
Visits
Bounce Rate
Pages/Visits
Time on Site
First Visit To Site
Goal 1
Goal 2
Goal 3
Goal 4
Transactions
Revenue
Search Engine Name
if from Google AdWords:
link to AdWords keyword detailsN
segmentable by engine
segmentable by paid/organic
Search EnginesT
2.3.1 Search
Engines Overview
(paid)
# of keywordsN
% of total trafficN
% of each search
engine
# of paid keywordsN
Visits
Bounce Rate
Pages/Visits
Time on Site
First Visit To Site
Goal 1
Goal 2
Goal 3
Goal 4
Transactions
Revenue
Search Engine Name
# of Paid Keywords
2.3.3 Search
Engine Detail
(paid)
% of engine's paid
traffic for top 5
keywords
# of visitorsN
# of keywordsN
# of visitors from paid keywordsN
Visitors from this Search EngineS
% Bounce
Pages/Visits
Avg. Time on Site
% First Visit To Site
% Goal 1
% Goal 2
% Goal 3
% Goal 4
# of Transactions
Total Revenue
# of Products
link to geo map for this segment
link to language list for this segment
KeywordsT
Visits
Bounce Rate
Pages/Visits
Time on Site
First Visit To Site
Goal 1
Goal 2
Goal 3
Goal 4
Transactions
Revenue
Keyword
# of paid keywordsN
2.3.5 Top
Keywords
(paid)
% of search traffic
for top 5 keywords
# of paid keywordsN
KeywordsT
Visits
Bounce Rate
Pages/Visits
Time on Site
First Visit To Site
Goal 1
Goal 2
Goal 3
Goal 4
Transactions
Revenue
Keyword
# of keywordsN
Visitors from this sourceS
% Bounce
Pages/Visits
Avg. Time on Site
% First Visit To Site
% Goal 1
% Goal 2
% Goal 3
% Goal 4
# of Transactions
Total Revenue
# of Products
link to geo map for this segment
link to language list for this segment
Visitors from this sourceS
% Bounce
Pages/Visits
Avg. Time on Site
% First Visit To Site
% Goal 1
% Goal 2
% Goal 3
% Goal 4
# of Transactions
Total Revenue
# of Products
link to geo map for this segment
link to language list for this segment
2.4.0 AdWords
Campaigns
Overview
AdWords traffic, %
from top 4 + "other"
campaigns
# of visitorsN
# of campaignsN
Visitors from AdWordsS
% Bounce
Pages/Visits
Avg. Time on Site
% First Visit To Site
% Goal 1
% Goal 2
% Goal 3
% Goal 4
# of Transactions
Total Revenue
# of Products
link to geo map for this segment
link to language list for this segment
AdWords CampaignsT
Visits
Bounce Rate
Pages/Visits
Time on Site
First Visit To Site
Goal 1
Goal 2
Goal 3
Goal 4
Transactions
Revenue
Campaign Name
2.4.1 AdWords
Campaign Detail
Campaign traffic, %
from top 4 + "other"
ad groups
# of visitorsN
# of ad groupsN
Visitors from this campaignS
% Bounce
Pages/Visits
Avg. Time on Site
% First Visit To Site
% Goal 1
% Goal 2
% Goal 3
% Goal 4
# of Transactions
Total Revenue
# of Products
link to geo map for this segment
link to language list for this segment
Campaign Ad GroupsT
Visits
Bounce Rate
Pages/Visits
Time on Site
First Visit To Site
Goal 1
Goal 2
Goal 3
Goal 4
Transactions
Revenue
Ad Group Name
2.4.2 AdWords Ad
Group Detail
Ad group traffic, %
from top 4 + "other"
keywords
# of visitorsN
# of keywordsN
Visitors from this ad groupS
% Bounce
Pages/Visits
Avg. Time on Site
% First Visit To Site
% Goal 1
% Goal 2
% Goal 3
% Goal 4
# of Transactions
Total Revenue
# of Products
link to geo map for this segment
link to language list for this segment
Ad Group KeywordsT
Visits
Bounce Rate
Pages/Visits
Time on Site
First Visit To Site
Goal 1
Goal 2
Goal 3
Goal 4
Transactions
Revenue
Keyword
2.4.3 AdWords
Keyword Detail
???
# of visitorsN
link to standard keyword detailN
Ads for this keywordT
# of clicks
% Goal 1
% Goal 2
% Goal 3
% Goal 4
Ad
Keyword positionsT
# of Visits
% Bounce
Pages/Visits
Avg. Time on Site
% First Visit To Site
% Goal 1
% Goal 2
% Goal 3
% Goal 4
# of Transactions
Total Revenue
Position
% from all paid searchN
traffic rank among your keywordsN
traffic rank among your enginesN
traffic rank among your paid searchN
to Search Engines Overview (paid) (2.3.1)
traffic rank among your AW campaignsN
traffic rank among your AW ad groupsN
% Bounce
Pages/Visits
Avg. Time on Site
% First Visit To Site
% Goal 1
% Goal 2
% Goal 3
% Goal 4
# of Transactions
Total Revenue
# of Products
Writer
Front-end Developer
Design Strategist
Case Study:Measure Map
Home Page -
unregistered
Home Page -
Logged In
Tour
User Weblog
BadgeYEScookie?
NO
Posts Data
Date Data
Event
Description
Intercept
page
System Pages
Account Settings
Alerts Help/FAQ
Ask for URL
(or login)Valid?
No
"What's up with
that crappy URL?
YesBlog
verificatrion
and sign-up
Good data?
No
Yes
"That name is taken"
or "That password sucks"
Getting
Started Page
We found the
badge!
"Try it out"
Valid?
Yes
Login
No
Home page
Good
- very friendly. type, icons, language all contribute
- simple message "Simple & SECURE web document sharing"
- screenshot
- 1 2 3 steps
- obvious Get Started link
Bad
- tabs at the top are unnecessary. feels like I have to learn the
home page to use the app. who cares?
- visual hierarchy - what do I look at first?
what's most important here?
- colors are shit
Good
- RED! Hurray! Bold but friendly.
- Logotype - icon - search box. I love how they've included
their core functionality into a clever identity. love this.
- Attention to detail. Content boxes have tiny, clean drop
shadows. look at those subtle dotted underlines on links,
styled form elements. gorgeous.
- great layout, whitespace, simplicity.
- This is my favorite design of all of these. I love the
sensibility, and think it matches the directions we've been
moving very well.
Bad
- so damn red. seriously, I kinda get sick of looking at it
Common Pitfalls
Common Pitfalls1. Poorly Defined Goals2. Lack of Process3. Subjectivity
I hate orange.
What we talked about
Design is: making and documenting decisions about the experience of your audience/users/customers
Design requires: knowledge, skills, and thoughtful feedback
Design works: if you are clear about your expectations, priorities, and goals
