Girl Geek Dinner

2,749 views

Published on

Intuit hosted a Girl Geek Dinner at its Mountain View campus, featuring Intuit speakers Cheryl Ainoa, Amanda Linden, Manasa Murthy and Anu Tewary. The Girl Geek Dinner events are hosted in locations around the world and are designed to encourage women to be involved in technology, along with provide networking and recruiting opportunities.

Presentations include:
"Harmony: Design innovation in QuickBooks Online (QBO)"
"JavaScript at Scale in QuickBooks Online (QBO)"
"Why we need more girl geeks"

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

No Downloads
Views
Total views
2,749
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • Girl Geek Dinner

    1. 1. Welcome!
    2. 2. Harmony: Design innovation in QuickBooks Online (QBO) Amanda Linden, Design Leader, QuickBooks Web & Mobile Girl Geek Dinner | Feb. 6, 2014
    3. 3. We used to work like this … Requirements 3 Design Build
    4. 4. We delivered …
    5. 5. … Complexity Variances in interaction design across our products and within a product 5
    6. 6. … Confusion Variances in tone and voice across our products and within a product 6
    7. 7. … Inconsistency Visual design disparity across the ecosystem and within the products 7
    8. 8. … Loose connections Showing our org structure in our designs 8
    9. 9. For the QuickBooks redesign, we worked differently Design Build User Experience Requirements 9
    10. 10. We broke down the application into components
    11. 11. Application components 11
    12. 12. Application components 12
    13. 13. We designed to enable two core actions: create & find
    14. 14. Global create 14
    15. 15. Create and search 15
    16. 16. With these pieces in place, developers could create pages on their own
    17. 17. 17
    18. 18. How elements appear on the screen Transaction browser (trowser) Drawer 18
    19. 19. 19
    20. 20. We had more time to focus on innovation
    21. 21. One-click expense capture 21
    22. 22. Invoice customization 22
    23. 23. 23
    24. 24. Thank you
    25. 25. JavaScript at Scale in QuickBooks Online (QBO) Manasa Murthy, Senior Development Manager Girl Geek Dinner | Feb. 6, 2014
    26. 26. What scale means for QBO 1.5M active users Up to 150 workflows Released in 174 countries 26
    27. 27. Technologies used in QBO Client Rendering Data-Only Transport Developer API Services Global Accounting Engine World-Wide Data Centers WAA
    28. 28. What matters most Happy engineers – latest technology, Agility Maintainability Faster loading pages Better quality 28
    29. 29. Functionality vs. complexity: what’s typical Complexity $(‘#typical’) Functionality over time 29
    30. 30. Functionality vs. complexity: our goal Complexity Upfront investment yields dividends as functionality grows Functionality over time 30
    31. 31. Scaled to 100+ engineers with ~100K lines of client code. Complexity is still manageable. 31
    32. 32. Use OO JavaScript return declare([Stateful, Evented], { constructor: function (args) { this.dirty = false; }, isDirty: function () { return this.dirty || this.inherited(); } … }); 32
    33. 33. Two-way binding Definition: The ability to bind changes to an object’s properties to changes in the UI, and vice versa. <div data-qbo-bind="visible: showDate"> <div>${nls.date}</div> <input class="dateInput” data-qbobind="value: date" data-dojo-type="qbo/widgets/DateTextBox”/> </div> Our homegrown two-way binding framework is inspired by 33
    34. 34. CSS requires engineering design • Proper CSS scoping • Apply top-level scoped styles to enable progressive layout • Use a pre-processor .qbo { .invoice { background: $formBackground; height: $formHeight - $marginHeight; } .menuVisible { .forms { margin-left: 0px; } } } 34
    35. 35. Single-page application • Entire page loaded only once • Refresh only parts of the application • Responsive UI 35
    36. 36. Asynchronous module definition Definition: AMD is a JavaScript API that lets you define and manage modules and their dependencies. define([ "dojo/_base/declare", "libs/jquery", "libs/highcharts", "libs/underscore", "libs/backbone" ], function(declare, $, Highcharts, _, Backbone) { … }); Provides a no-build (F5) dev experience. Also builds minified, optimized layers. 36
    37. 37. Unit test define([ "intern!object” ], function (registerSuite) { registerSuite({ Name: "sampleSuite", Setup: function () {}, beforeEach: function () {}, afterEach: function () {}, teardown: function () {}, "test1”: function () {} … //More tests }); }); 37 Services isolation allows you to mock XHR calls. intern
    38. 38. End results Happy engineers • Went from 2 months to 2 weeks to write a new form • Build times went from 2 min to 0 min on client side Maintainability • ~100K lines of JavaScript • Separation of concerns – JavaScript, Java, CSS, HTML • Onboarding down to 1 week Faster loading pages • < 2 sec for top workflows • Better performance across the globe Better quality • ~400 unit tests just on the client side 38
    39. 39. Thank you
    40. 40. Why we need more girl geeks Anu Tewary, Director of Data Products and Founder of Technovation Challenge Girl Geek Dinner | Feb. 6, 2014
    41. 41. My path to a career in technology 41
    42. 42. The Level Up team 42
    43. 43. The challenges CHALLENGE 1: Not enough girls enter the field of technology. Girls see themselves as users, not innovators, of technology. CHALLENGE 2: Once in the field, not enough women stay. 56% of women leave the field mid-career. 43
    44. 44. The Technovation Challenge • Girls program mobile apps to solve problems in their community. • Girls pitch business plans for funding. • Mentors use their deep technical expertise while gaining experience launching a new venture. 44
    45. 45. Girls as innovators • When girls participate in the innovation process, the outcome is diverse. • We get ideas for apps such as Uber and Pinterest ahead of their time! • AND we get apps such as Arrive, StudiCafe, IOU, and MASH 45
    46. 46. Why is it great to be a woman in tech? • Sometimes it isn’t ... it’s lonely.  - There aren’t enough of us here ... but there should be.  • It’s changing and what we’re doing here is making it better.  - It’s fun to be part of the solution.  46
    47. 47. Trending in the right direction Varsha R. Level Up Analytics interns 47
    48. 48. Inspire and be inspired! Sign up to be a mentor! Email Judy@Iridescentlearning.org 48
    49. 49. Questions? Comments? Meet for coffee? anutewary@gmail.com
    50. 50. Q&A

    ×