Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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


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
  • Be the first to comment

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

  1. Understanding Designers Erika Hall Je rey Veen Mule Design Small Batch, Inc.
  2. What Design Is How It Proceeds How Not to Screw it up
  3. Design and development can seem at odds.
  4. Design is a* problem solving methodology. * mostly rational
  5. Where the journey begins
  6. Optimization Innovation Launch Build Explore Refine Create
  7. Tip: If you catch yourself saying “Let’s get a designer to jazz this up a bit” you’re doing it wrong.
  8. Define your goal!
  9. Is a functional prototype enough?
  10. Will neglecting design confuse your users?
  11. Design Visual Information Interaction Strategist Designer Architect Designer Writer Interface Design Roles Will neglecting design confuse your users?
  12. Visual Design
  13. Interaction Design
  14. Information Architecture
  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. 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. Writer
  18. Front-end Developer
  19. Design Strategist
  20. Case Study: Measure Map
  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. 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. Common Pitfalls
  24. Common Pitfalls 1. Poorly Defined Goals 2. Lack of Process 3. Subjectivity
  25. I hate orange.
  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. Thank you! je