0
Data-driven Design Making Software & Websites Better Through Use of Statistics Patrick McKenzie April 15th, 2010 Creative ...
Outline <ul><li>Introduction </li></ul><ul><li>Art & Science </li></ul><ul><li>Rationale </li></ul><ul><li>Instrumentation...
D:Downloads2264763977_fbeb2e34ba.jpg The Plan
What Happened D:DropboxMy DropboxPhotosSakura Season 2010IMG_0348.JPG
D:Downloads3452417503_88c32d1397.jpg What Happened Next
Started Business
Art into Science 芸術から技術へ Supplement the vision and craft of designers with the logic, regimentation, and process of scienc...
Rationale 目的 <ul><li>Decrease Costs </li></ul><ul><li>Decrease Uncertainty </li></ul><ul><li>Increase Satisfaction </li></...
Designing With Data <ul><li>Get Facts to Answer The Questions: </li></ul><ul><ul><li>What are users doing?  何をしているか? </li>...
Types of Instrumentation <ul><li>Analytics software </li></ul><ul><li>Heatmapping </li></ul><ul><li>Surveys </li></ul><ul>...
CrazyEgg
Landing Page <ul><li>Photo of problem solved goes here </li></ul>
Landing Page (Fixed)
Paving The Trails <ul><li>Picture of paving a path </li></ul>
Instrumenting Software
Instrumenting Software #2
Funnel Analysis ファネル分析 <ul><li>Many applications have several steps followed by a goal. </li></ul><ul><li>Only a percentag...
Software ソフト <ul><li>Google Analytics </li></ul><ul><ul><li>Free but limited </li></ul></ul><ul><ul><li>Good for starter <...
Define Funnel <ul><li>Signs In </li></ul><ul><li>Opens Word List </li></ul><ul><li>Saves Word List </li></ul><ul><li>Custo...
Collect Data <ul><li>Signs In: 260 </li></ul><ul><li>Opens Word List: 218 (83%) </li></ul><ul><li>Saves Word List: 191 (87...
Identify Areas for Improvement <ul><li>Signs In: 260 </li></ul><ul><li>Opens Word List: 218 (83%) </li></ul><ul><li>Saves ...
Implement Improvements <ul><li>Open Word List needlessly complicated: make  easier. </li></ul><ul><li>Save Button was uncl...
Before
After
Collect Metrics <ul><li>Signs In: 194 </li></ul><ul><li>Opens Word List: 155 (79%) </li></ul><ul><li>Saves Word List: 151 ...
http://farm1.static.flickr.com/21/33346213_e5d5842024.jpg Pretend You Own A Bar Salty Peanut by EuroMagic. Half of Custome...
A/B Testing <ul><li>Divide similar population into two groups randomly. </li></ul><ul><li>Treat the groups differently. </...
Actual A/B Test Half of Users See... Half of Users See...
Software Tools <ul><li>Google Website Optimizer </li></ul><ul><ul><li>Terrible.  Do not use. </li></ul></ul><ul><li>Visual...
Core A/B Testing Loop <ul><li>Identify conversion and instrument. </li></ul><ul><li>Create alternatives. </li></ul><ul><li...
Landing Pages experianvasm experianvbsm Source: whichtestwon.com
Signup Forms http://www.bingocardcreator.com/blog-images/signup-ab-tests/old-boring-signup.png
Signup Forms http://www.bingocardcreator.com/blog-images/signup-ab-tests/new-hotness-signup.png
Signup Forms Vast contact dealer form
New Features http://farm3.static.flickr.com/2422/3981364314_d4b30cb739.jpg <ul><ul><li>60 ~ 80% of features do not change ...
You can quickly create bingo cards using our included wizards! Old Version
C:UserspatrickPictures
ew-version.png Spot The New Feature
Core A/B Testing Discipline <ul><li>Accept that you do not know what is right.  ( Hardest lesson. ) </li></ul><ul><li>Test...
Conclusion <ul><li>What we learned today: </li></ul><ul><ul><li>Importance of tracking user interaction. </li></ul></ul><u...
<ul><li>Thanks for listening.  ご清聴、ありがとうございました。 </li></ul><ul><li>[email_address] ← My email. </li></ul><ul><li>http://www...
Microsoft logo: http://www.flickr.com/photos/scobleizer/2264763977/ Sleeping Salaryman: http://www.flickr.com/photos/kansa...
Upcoming SlideShare
Loading in...5
×

Data-Driven Software Design

3,987

Published on

A high level view of several techniques to use data gained from users to improve the design of software and websites.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,987
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
58
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • I delivered this presentation on April 15 th , 2010 to the Design Matters group at the Apple Store in Osaka. Please feel free to re-use any part of it. Pictures are mostly from other people and licensed CC-BY as well: see last page for attributions. Non-attributed pictures are my own -- you can consider them CC-BY as well.
  • Interesting note: Garr Reynolds, the guy behind Presentation Zen, suggested this slide get excised later (“Outline slides are boring, cost attention, and distract from the narrative.”). Oh, what will I ever do without structure…
  • Back when I was in college, outsourcing was in full swing and I thought I would be unlikely to be competitive with hundreds of thousands of Indian/Chinese engineers if I only knew how to program. So I decided to pick up a language, and stumbled into Japanese. I was going to get a nice, safe job at Microsoft or some similar international company after graduation, but didn’t feel my Japanese was up to snuff, so…
  • I came to Ogaki (a city of 150,000 in Gifu Prefecture) in 2004 to be a technical translator for the prefectural technology incubator. I worked there for three years, doing a bit of translation, a bit of interpreting, and a bit of R&amp;D when I had neither to keep me busy. I grew to love Ogaki so much that when my contract ended I wanted to stay a little longer, so I became…
  • … a Japanese salaryman , at a large company in Nagoya. (No, not THAT large company in Nagoya. One of the other ones.) I learned an awful lot about being a professional engineer, as opposed to the hobbyist with coding skills that I was on graduating university and working at the very low-stress position at the technology incubator. On the flip side, being a salaryman is sort of not conducive with work/life balance, so I was ready for a change after 2.5 years. While this was happening…
  • Brief introduction of my business. Bingo Card Creator: creates bingo cards for teachers, mostly for use in lessons. Started 7/2006 (sideline business), went full-time on 4/1/2010. Desktop application (Java) + web version. ~3,000 customers, 500,000 cards created in last year, millions upon millions downloaded.
  • Making interface/interaction design into a science, not just an art. Art is lovely, but: * Failure is too common * Uncertainty is too high * Beliefs are too unquestioned * Competent practioners are too rare Using scientific approaches means * Repeatable, scalable processes * Mathematically quantifiable certainty * Constant change with users * Any idiot (i.e. me) can do it
  • Business needs addressed by this presentation * Cost cutting: rather than spending lots on a one-shot, do many cheap experiments, develop what works. * Uncertainty: Acknowledge that we don&apos;t know what solution looks like, work to discover it, rather than praying we guess right. * Satisfaction: Adapt to measured preferences of users. Give them what they want, not what they ask for. * Success: Measurable improvements in task success. * Profits: All of the above means you make $$$.
  • High-level description of software instrumentation. Software instrumentation means tools &amp; techniques for: * Making your software capture usage data * Getting the data out again * Analyzing it * Acting on what you learn
  • Quick overview of several types of instrumentation.
  • CrazyEgg: heat mapping software. The more people click on an interface element, the ”hotter” it appears. Lets you quickly see what users are actually focused on on your pages/applications. Technical notes: works via Javascript. Business notes: dirt cheap ($9, $19, etc monthly)
  • Actual example of a problem solved by CrazyEgg This is a landing page for an adwords campaign. Goal is to have customer click on Big Ol&apos; Button to sign up for service and hopefully purchase it. Note left hand column is not active , but customers are clicking on it. Frustrated customers leave page without signing up, costing money! Note how it is very obvious what the problem is – one look at this shows it. Nice feature to have in instrumentation – the less work you have to do to get useful results, the more likely you are to actually use it.
  • Redone version of same page Note left side now has links, and they&apos;re being clicked on.
  • Paving the trails: observe what people do, then, direct your resources into making what they do better. Has great relevance for creating/extending features, creating content, etc . This story went over VERY well at the presentation: There was once a park in America created by a famous architect. When he delivered his final set of specs, the owners realized that he hadn’t included any roads in the park. They asked him how he was such a famous architect and could forget something more basic. ”Ahh, but I have not forgotten the roads – I merely do not know where to put them yet.” So they asked how he could be a famous architect and not know where to put the roads. ”Oh, I have some ideas. But then I would be laying roads just for me. So I’m going to wait a while, and watch as people walk within the park. The paths they past most often will have the grass stamped down, and trails will form, worn by each pair of passing feet. Then I will tell you where to put your roads. Pave the trails, because a road is where people want to walk. 歩くところこそが道である。 ” In software, if you want to know where you should spend your resources: pave the trails !
  • Standard overly complicated options dialog What do customers actually perceive as valuable here, and how can we cut it such that their experience improves?
  • Sample of 10,000 customers. Red numbers indicate percentage who tweaked the particular setting. As we can see, customers care about some far more than others. Note that consistently ~8% of customers tweak EVERYTHING. Power users. Identify power users automatically, give them the full version of this screen. Let normal users see only the stuff they&apos;re likely to perceive value from. Increases success tremendously (see next section on Funnels).
  • Explanation of funnel analysis
  • Software to use for Funnel Analysis I really, really like Mixpanel . See http://www.bingocardcreator.com/articles/tracking-with-mixpanel.htm
  • Steps folks go through in the core interaction loop in Bingo Card Creator.
  • Collecting data on user success at every stage in core interaction loop.
  • Find obvious candidates for improvement of core interaction loop.
  • Figure out ways to make core interaction loop better at hotspots identified for improvement. These days I’d A/B test all of these suckers, but I did not have a convenient way of doing so at the time.
  • The complicated version of the Customize form.
  • The simplified version of the Customize form – shown by default now to any user who heuristics identify as a “newbie”. (Heuristics are another topic I could do a presentation on. Ask me some time!)
  • Pretend you own a bar in a hip hop happening town like Osaka. Your business model is, obviously, getting patrons to order drinks. There are a lot of things you could do to improve how many drinks you sell: maybe spend more money on advertising the bar, or hiring comely waitresses to stand outside and hawk your bar to passersby, or changing the menu, or even moving locations. But these all cost money and you’re not guaranteed that any will work. And who is to say that if sales go up, it is because of the thing you changed, as opposed to seasonal factors or blind chance? So, because you’re a smart bartender, you start small: you figure “hey, maybe salty peanuts will make people drink more beer”. Peanuts are not more expensive than the edamame (that green soybean) you’re giving folks as an appetizer right now. So you have your staff flip a coin for every party that comes in. Heads, they get edamame , tails, they get salty peanuts. This gets marked discretely on their check. Then, at the end of the week, you sum up how many drinks are ordered by both groups, and apply a little math magic. Since your customers are exactly identical with the exception of their appetizer – because your coin does not play favorites – you know that if your math magic says “Wow, peanuts really work!” then peanuts really work. And if on average peanuts cause every person to order 5 drinks instead of 4, then just switching to peanuts increases your sales 25% without hiring more staff or moving to a new location. Welcome to A/B testing.
  • This was around Halloween. Depressingly, the Halloween-themed signup page got thumped.
  • Landing pages are easy to test: constant incoming traffic, can create alternatives virtually without impact to rest of site, customers are extraordinarily sensitive to small changes because they don’t yet have an investment in a relationship with you. Test on right won.
  • Boring signup form. Signup forms are another great place to test, because a) everybody goes through them (changes have immediate, massive business impact) and they’re so easy to screw up.
  • Prettier signup form. Won, by a bit.
  • The madlibs test. Not a great A/B test design – too much changes at once, so it is hard to isolate cause of improvement – but the right form squashed the left one. Note when I tried a similar test madlibs lost by quite a bit. Lesson: run your own tests.
  • A/B testing can help you tell which 80% of your engineer hours are being wasted prior to burning all of them. If the simplest possible version of the feature gets NO uptake – nobody even clicks on the screen to open it -- then you can be fairly confident that pouring more resources past the click is a waste.
  • Bingo Card Creator 2.51.
  • Bingo Card Creator 3.0. Did you see the change I labored for a month on? Nope? Good, you’re in good company with about 59,978 of the first 60,000 people to use this version. (The new features are under the Internet menu. Huge failure in giving customers what they wanted and in communicating the existence of a feature they wanted – ask me some other time.)
  • Transcript of "Data-Driven Software Design"

    1. 1. Data-driven Design Making Software & Websites Better Through Use of Statistics Patrick McKenzie April 15th, 2010 Creative Commons Licensed CC-BY. Please feel free to share.
    2. 2. Outline <ul><li>Introduction </li></ul><ul><li>Art & Science </li></ul><ul><li>Rationale </li></ul><ul><li>Instrumentation </li></ul><ul><li>Funnel Analysis </li></ul><ul><li>A/B Testing </li></ul><ul><li>Conclusion </li></ul><ul><li>自己紹介 </li></ul><ul><li>芸術と 技術 </li></ul><ul><li>目的 </li></ul><ul><li>動作監視 </li></ul><ul><li>ファネル分析 </li></ul><ul><li>A/Bテスト </li></ul><ul><li>まとめ </li></ul>
    3. 3. D:Downloads2264763977_fbeb2e34ba.jpg The Plan
    4. 4. What Happened D:DropboxMy DropboxPhotosSakura Season 2010IMG_0348.JPG
    5. 5. D:Downloads3452417503_88c32d1397.jpg What Happened Next
    6. 6. Started Business
    7. 7. Art into Science 芸術から技術へ Supplement the vision and craft of designers with the logic, regimentation, and process of science. デザイナーの芸術を技術の倫理、数学、体験方式で拡張する。
    8. 8. Rationale 目的 <ul><li>Decrease Costs </li></ul><ul><li>Decrease Uncertainty </li></ul><ul><li>Increase Satisfaction </li></ul><ul><li>Increase Success </li></ul><ul><li>Increase Profits </li></ul><ul><li>開発工数ダウン </li></ul><ul><li>不確実性ダウン </li></ul><ul><li>ユーザ満足度アップ </li></ul><ul><li>成功率アップ </li></ul><ul><li>利益アップ </li></ul>
    9. 9. Designing With Data <ul><li>Get Facts to Answer The Questions: </li></ul><ul><ul><li>What are users doing? 何をしているか? </li></ul></ul><ul><ul><li>Which users are doing things? 誰がしているか? </li></ul></ul><ul><ul><li>Where are they doing things? 何処にしているか? </li></ul></ul><ul><ul><li>(Maybe) Why are they doing it? 何故しているか? </li></ul></ul>
    10. 10. Types of Instrumentation <ul><li>Analytics software </li></ul><ul><li>Heatmapping </li></ul><ul><li>Surveys </li></ul><ul><li>Ad hoc analysis (Excel, etc) </li></ul><ul><li>Custom software </li></ul>
    11. 11. CrazyEgg
    12. 12. Landing Page <ul><li>Photo of problem solved goes here </li></ul>
    13. 13. Landing Page (Fixed)
    14. 14. Paving The Trails <ul><li>Picture of paving a path </li></ul>
    15. 15. Instrumenting Software
    16. 16. Instrumenting Software #2
    17. 17. Funnel Analysis ファネル分析 <ul><li>Many applications have several steps followed by a goal. </li></ul><ul><li>Only a percentage of users clear each step. </li></ul><ul><li>Funnel analysis finds where folks are falling out, to concentrate efforts on improvement </li></ul>Viewed Landing Page Signed Up For Trial Did Work $$
    18. 18. Software ソフト <ul><li>Google Analytics </li></ul><ul><ul><li>Free but limited </li></ul></ul><ul><ul><li>Good for starter </li></ul></ul><ul><li>Mixpanel </li></ul><ul><ul><li>Cheap </li></ul></ul><ul><ul><li>API </li></ul></ul><ul><ul><li>Harder to use </li></ul></ul>
    19. 19. Define Funnel <ul><li>Signs In </li></ul><ul><li>Opens Word List </li></ul><ul><li>Saves Word List </li></ul><ul><li>Customizes Cards </li></ul><ul><li>Creates Cards </li></ul><ul><li>Downloads Card </li></ul>
    20. 20. Collect Data <ul><li>Signs In: 260 </li></ul><ul><li>Opens Word List: 218 (83%) </li></ul><ul><li>Saves Word List: 191 (87%) </li></ul><ul><li>Customizes Cards 161 (84%) </li></ul><ul><li>Creates Cards: 131 (81%) </li></ul><ul><li>Downloads Card 126 (95%) </li></ul>Total Conversion Rate 126 / 260 = ~48.4%
    21. 21. Identify Areas for Improvement <ul><li>Signs In: 260 </li></ul><ul><li>Opens Word List: 218 (83%) </li></ul><ul><li>Saves Word List: 191 (87%) </li></ul><ul><li>Customizes Cards 161 (84%) </li></ul><ul><li>Creates Cards: 131 (81%) </li></ul><ul><li>Downloads Card 126 (95%) </li></ul>Total Conversion Rate 126 / 260 = ~48.4%
    22. 22. Implement Improvements <ul><li>Open Word List needlessly complicated: make easier. </li></ul><ul><li>Save Button was unclear: tweak microcopy, button design. </li></ul><ul><li>Customize Cards needlessly complicated: show less options. </li></ul>
    23. 23. Before
    24. 24. After
    25. 25. Collect Metrics <ul><li>Signs In: 194 </li></ul><ul><li>Opens Word List: 155 (79%) </li></ul><ul><li>Saves Word List: 151 (97%) </li></ul><ul><li>Customizes Cards: 127 (84%) </li></ul><ul><li>Creates Cards: 112 (88%) </li></ul><ul><li>Downloads Card 126 (98%) </li></ul>Up from 83% Up from 81% Total Conversion Rate goes from 48.5% to 56.7% 16.6% lift in customer success / revenue for 1 hour of work .
    26. 26. http://farm1.static.flickr.com/21/33346213_e5d5842024.jpg Pretend You Own A Bar Salty Peanut by EuroMagic. Half of Customers Get... Half of Customers Get...
    27. 27. A/B Testing <ul><li>Divide similar population into two groups randomly. </li></ul><ul><li>Treat the groups differently. </li></ul><ul><li>Measure difference in outcomes. </li></ul><ul><li>Scientific Method applied to design . Eliminates bias, randomness, poor test design. </li></ul>
    28. 28. Actual A/B Test Half of Users See... Half of Users See...
    29. 29. Software Tools <ul><li>Google Website Optimizer </li></ul><ul><ul><li>Terrible. Do not use. </li></ul></ul><ul><li>Visual Website Optimizer </li></ul><ul><ul><li>visualwebsiteoptimizer.com </li></ul></ul><ul><ul><li>WYSIWYG alternative creation. Very nice. </li></ul></ul><ul><ul><li>Free for now. </li></ul></ul><ul><li>A/Bingo or similar </li></ul><ul><ul><li>Rails A/B testing library. </li></ul></ul><ul><ul><li>Programmer friendly, powerful, easy to use. </li></ul></ul>
    30. 30. Core A/B Testing Loop <ul><li>Identify conversion and instrument. </li></ul><ul><li>Create alternatives. </li></ul><ul><li>Assign users randomly to alternatives </li></ul><ul><li>Watch behavior. </li></ul><ul><li>Identify winning alternative. </li></ul><ul><li>Iterate, iterate, iterate... </li></ul>
    31. 31. Landing Pages experianvasm experianvbsm Source: whichtestwon.com
    32. 32. Signup Forms http://www.bingocardcreator.com/blog-images/signup-ab-tests/old-boring-signup.png
    33. 33. Signup Forms http://www.bingocardcreator.com/blog-images/signup-ab-tests/new-hotness-signup.png
    34. 34. Signup Forms Vast contact dealer form
    35. 35. New Features http://farm3.static.flickr.com/2422/3981364314_d4b30cb739.jpg <ul><ul><li>60 ~ 80% of features do not change user behavior </li></ul></ul><ul><ul><li>Eric Ries </li></ul></ul>
    36. 36. You can quickly create bingo cards using our included wizards! Old Version
    37. 37. C:UserspatrickPictures ew-version.png Spot The New Feature
    38. 38. Core A/B Testing Discipline <ul><li>Accept that you do not know what is right. ( Hardest lesson. ) </li></ul><ul><li>Test frequently, as a matter of routine. (Helps to have one-line testing.) </li></ul><ul><li>Test changes in isolation. </li></ul><ul><li>Use evidence from tests to inform your marketing and development plans. </li></ul>
    39. 39. Conclusion <ul><li>What we learned today: </li></ul><ul><ul><li>Importance of tracking user interaction. </li></ul></ul><ul><ul><li>Funnel analysis – measuring user success and goal completion. </li></ul></ul><ul><ul><li>A/B tests – improving marketing message and product design. </li></ul></ul>
    40. 40. <ul><li>Thanks for listening. ご清聴、ありがとうございました。 </li></ul><ul><li>[email_address] ← My email. </li></ul><ul><li>http://www.kalzumeus.com ← My blog. </li></ul><ul><li>http://www.abingo.org ← A/Bingo software (OSS) </li></ul><ul><li>http://www.startuplessonslearned.com ← Eric Ries, very useful. </li></ul>
    41. 41. Microsoft logo: http://www.flickr.com/photos/scobleizer/2264763977/ Sleeping Salaryman: http://www.flickr.com/photos/kansai/3452417503/ Edamame (Green Soybeans): http://www.flickr.com/photos/kankan/33346213/ Salty Peanuts: http://www.flickr.com/photos/euromagic/2351628831/ Facepalm Statue: http://www.flickr.com/photos/cesarastudillo/3981364314/ Photo Credits
    1. A particular slide catching your eye?

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

    ×