0
Understanding
   Designers

 Erika Hall    Je rey Veen
Mule Design   Small Batch, Inc.
What Design Is
  How It Proceeds
How Not to Screw it up
Design and development
   can seem at odds.
Design is a* problem
solving methodology.




              * mostly rational
Where the journey begins
Optimization   Innovation

                Launch

  Build             Explore




  Refine             Create
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?
Design       Visual    Information   Interaction
Strategist   Designer    Architect     Designer     Writer




          ...
Visual Design
Interaction Design
Information
Architecture
Using Analytics to         Understand My Visitors                                                                         ...
Account
          Overview




                                                            2.0.0 Traffic
          1.0.0 V...
Writer
Front-end
Developer
Design Strategist
Case Study:
Measure Map
quot;What's up with                          quot;That name is takenquot;
                                                ...
Good
 - very friendly. type, icons, language all contribute
 - simple message quot;Simple & SECURE web document sharingquo...
Common Pitfalls
Common Pitfalls
1. Poorly Defined Goals
2. Lack of Process
3. Subjectivity
I hate orange.
What we talked about

Design is: making and documenting
decisions about the experience of your
audience/users/customers

D...
Thank you!




erika@muledesign.com   je @veen.com
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)
Upcoming SlideShare
Loading in...5
×

Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)

5,103

Published on

Presentation by Jeff Veen, Small Batch & Erika Hall, Mule Design on how designers & developers can work better together, critical components & process of good design.

Published in: Technology, Business
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,103
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
110
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Marrying Design & Development: a Match made in Heaven, not Hell (Jeff Veen & Erika Hall, Startonomics SF 2008)"

  1. 1. Understanding Designers Erika Hall Je rey Veen Mule Design Small Batch, Inc.
  2. 2. What Design Is How It Proceeds How Not to Screw it up
  3. 3. Design and development can seem at odds.
  4. 4. Design is a* problem solving methodology. * mostly rational
  5. 5. Where the journey begins
  6. 6. Optimization Innovation Launch Build Explore Refine Create
  7. 7. Tip: If you catch yourself saying “Let’s get a designer to jazz this up a bit” you’re doing it wrong.
  8. 8. Define your goal!
  9. 9. Is a functional prototype enough?
  10. 10. Will neglecting design confuse your users?
  11. 11. Design Visual Information Interaction Strategist Designer Architect Designer Writer Interface Design Roles Will neglecting design confuse your users?
  12. 12. Visual Design
  13. 13. Interaction Design
  14. 14. Information Architecture
  15. 15. Using Analytics to Understand My Visitors Analyze Incoming Traffic Sources E Measure Success Define Legend unique measure Measure value of of success Compare and sort sources those sources Advertising tasks uses regional Identify value Identify low- Publishing tasks Show year-to- of traffic for Remove low Build data to combat performing Understand Check in on Understand specific date numbers each media AdWords demographic fraud AdWords Connect offline Watch for Ecommerce tasks current state regular growth user segments source abnormalities understanding to online Existing Features make design Explore Classify measure Segment Track Use custom decisions help Identify and Connect Monitor current metrics watch for visitors by task interactions visitors by Track AdWord spending for URLS to track Planned Features based on advertisers cultivate phone sales to competitors to identify spikes rather than per minute (in content of converstions each offline browser/ target regions reciprocal links online leads AdWords buys opportunity segment rich media) advertisement campaign impressions screen support Define separate quot;Micromanage Drive print success Communicate pages from compare blog connect track Monitor growth find out where quot; traffic/ Drill compare jan to find value of readers to watch for metrics rather user behavior visitors & find traffic to site search engine promotions to by country users are from down on feb each referrer more details spikes than site to advertisers ratio traffic traffic to leads registration segment online metrics not cost per balance define communicate Determine view visitors Watch traffic wish we cold set segment visit. rather quantitative monitor overall behavior user history of Compare Jan. per keyword sources by connect web watch top benchmarks to audience by cost for metrics with traffic patterns as demographics visitors across 05 to Jan. 06 grouped by dollars usage to box keywords drive goals ISP lifetime of rich media quot;visitor typequot; to advertisers sessions region generated office customer qualitative Network Referring Threshold Threshold Integration Connections Discovery of Browser Platform Bounce rate triggers to triggers to Maps as a JS goal location sources with AdWords to CRM reports via versions versions per keyword email, SMS, email, SMS, cross-segment triggers Report Center systems seamless nav RSS, etc. RSS, etc. Referring Overall Affiliations Show position Connection New vs Keywork Custom Languages Hostnames source of ad on dashboards speed returning search engine conversion Browser and CPC vs Campaign platform Java enabled Domains Visitor Organic API-based conversion iGoogle tool combos loyalty conversion Keyword Keyword Country Screen Visitor consideratio Specific Flash version drilldown resolutions Geo location recency ns testing Screen New vs. CPC Program Top cities colors returning Visits and Daily Visitors Pageview Tracking Absolute unique visitors
  16. 16. Account Overview 2.0.0 Traffic 1.0.0 Visitor 3.0.0 Content 5.0.0 Ecommerce Sources 4.0.0 Goals Overview Overview overview Overview # of Visitors new and Top Content % of Goals Completed Revenue retruning % visitors came 2.1.0 Direct Traffic N directly Overview Aver. Length of N # of visitors N Visit Goal Conversion? 4.1.0 Goal Detail Total Direct Trafic N Total Revenue N Pages/Visit N Aver. Depth of Visit N Total Completion N Total Transactoins 1.2.0 Total # of visitors that N New vs. Retruning Pageviews N came directly N Aver. Time on Page 4.2.0 Reverse N Conversion % Goals S Direct Visitors N # of products Aver. N Total Value Funnel Visualization Pageviews/ 1.1.0 Average PV/ % Bounce Visite visit N Product Categories T Top Content N Average Value Product Overview Pageviews Pages/Visits # of visits new 1.3.0 New vs. Avg. Time on Site Uniq. Views N Abandoned Funnel % of Total and returning returning Pageviews Transactions for % First Visit To Site 4.3.0 Funnel Page each product Loyality 3.2.0 Average Time Ave. Time on Page % Goal 1 N Product Categorie Recency 1.4.0 Loyalty % Exit Funnel Visualization % Goal 2 Product Make quot;Entrancequot; and T Performance $ Index Segmentation quot;Exitquot; numbers hidden % Goal 3 3.1.0 Content 3.1.3 Site Overlay Items until asked for by 1.5.0 Recency Detail Detail User Defined Keyword user. % Goal 4 Entrance & Trans T Bounce Content Campaign # of Transactions Total Visitors for Revenue Uniq. Views Page Total Revenue Ave. Price Pageviews 3.3.0 Average Design Criteria N # of Visitors Bounce Rate # of Products Aver QTY Source Ave. Time Medium] Campaign Aver. Time on Page % Exit 2.2.0 Referring 2.2.1 Referring 3.4.1 Percent who Keyword Content % visitors came 2.2.2 Link Detail Aver. Bounce started N from other links Sources Source Detail $ Index % who started Country Region 5.2.0 Transaction Visitors from list Total Referral Trafic Visitors from Link City Network Source T Exit Traffic Source 3.1.1 All Navigation 3.1.2 Initial Location Navigation Initial Browser N # of sources N # of visitors N # of visitors Uniq. Views T Referring source T All Navigation T Navigation Total Transactions Language (came from) popularity ranking popularity ranking (Starting Page) N # of visitors N and % of visitors N and % of visitors Pageviews Platform Connection Visits Visits Visits N # of Transactions Speed iff source has one link points to content T Referring sources referral: N page Ave. Time Goal/Visit Goal/Visit Goal/Visit Product Screen points to content % Exit T Performance Resolution Colors Source Domain Name N page S Visitors from this source T/Visit T/Visit T/Visit Items else: $ Index Java Visits % Bounce $/Visit $/Visit $/Visit Flash Source's Link Trans T Referrals Bounce Rate Pages/Visits Revenue URL Pages/Visits Avg. Time on Site Ave. Price Visits Time on Site % First Visit To Site Aver QTY Bounce Rate First Visit To Site % Goal 1 Pages/Visits Overlay Goal 1 % Goal 2 Time on Site Goal 2 % Goal 3 5.3.0 Average First Visit To Site Revenue Goal 3 % Goal 4 Goal 1 Goal 4 # of Transactions Goal 2 Total Revenue Transactions Total Revenue Goal 3 Revenue # of Products N Revenue Goal 4 link to geo map for this Product segment T Performance Transactions link to language list for this segment Items Revenue Trans Visitors from this S source Revenue % Bounce Ave. Price Pages/Visits Aver QTY 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.3.0 Search 2.3.2 Search 2.3.4 Top 2.3.1 Search 2.3.3 Search 2.3.5 Top % visitors from 2.3.6 Keyword Engines Overview Engine Detail Keywords Engines Overview Engine Detail Keywords N search engines (all) (all) (all) (paid) (paid) (paid) Detail % of engine's paid segmentable by paid/organic % of each search % of engine's traffic % of search traffic % of each search % of search traffic traffic for top 5 segmentable by engine engine for top 5 keywords for top 5 keywords engine for top 5 keywords keywords N % of total traffic N # of visitors N # of keywords N % of total traffic N # of visitors N # of paid keywords visitors from keyword traffic rank among traffic rank among N # of keywords N your engines N # of paid keywords N # of keywords N your paid search N # of keywords N # of visitors # of paid # of paid N keywords N # of keywords T Keywords N keywords N # of keywords T Keywords traffic rank among N your keywords # of visitors from T Search Engines N # of visitors from paid keywords Keyword T Search Engines N paid keywords Keyword points to content N page(s) Search Engine Name Visitors from this Visits Search Engine Name Visitors from this Visits S S Search Engine Search Engine N is part of campaign Bounce Rate Bounce Rate Total # of Keywords % Bounce # of Paid Keywords % Bounce if from Google AdWords: Pages/Visits Pages/Visits link to AdWords Visits Pages/Visits Visits Pages/Visits N keyword details Bounce Rate Time on Site Bounce Rate Time on Site Avg. Time on Site Avg. Time on Site Visitors from this S Keyword Pages/Visits First Visit To Site Pages/Visits First Visit To Site % First Visit To Site % First Visit To Site % Bounce Goal 1 Goal 1
  17. 17. Writer
  18. 18. Front-end Developer
  19. 19. Design Strategist
  20. 20. Case Study: Measure Map
  21. 21. quot;What's up with quot;That name is takenquot; that crappy URL? or quot;That password sucksquot; No No Blog Home Page - Ask for URL Valid? Yes Good Yes Getting verificatrion data? unregistered (or login) Started Page and sign-up Tour Login quot;Try it outquot; No Valid? We found the Intercept Posts Data badge! page Yes NO Home page User Weblog Home Page - cookie? YES Logged In Date Data Badge System Pages Event Account Settings Description Alerts Help/FAQ
  22. 22. Good - very friendly. type, icons, language all contribute - simple message quot;Simple & SECURE web document sharingquot; - 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
  23. 23. Common Pitfalls
  24. 24. Common Pitfalls 1. Poorly Defined Goals 2. Lack of Process 3. Subjectivity
  25. 25. I hate orange.
  26. 26. 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
  27. 27. Thank you! erika@muledesign.com je @veen.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×