Experience Driven Development - Future Insights Live 2013

  • 489 views
Uploaded on

"Experience-Driven Development & Contract First Development" presented by EffectiveUI's Ryan McGinty and SuAnne Hall at Future Insights Live 2013. …

"Experience-Driven Development & Contract First Development" presented by EffectiveUI's Ryan McGinty and SuAnne Hall at Future Insights Live 2013.

Experience-Driven Development is a user-centered, top-down development methodology that puts the needs of the user first, even above system needs. When developing solutions from scratch and using this approach, the layers of the stack are designed from the user interface backward to the persistence layer. However, in the real-world, you often aren't starting from scratch and have to develop against pre-existing solutions and take a Contract-First approach.

This session provides tools and tips for both approaches, specifically how to meet the needs of the user as well as prevent your project and budget from turning into a raging inferno.

You'll learn:
- How Contract-First Development can reconcile discrepancies between the user's needs and system capabilities.
- How to decompose a wireframe into software contracts.
- How to be part of the experience design solution rather than saying, "No, we can't get there from here".
- How to use modern Javascript Frameworks, like Backbone, to build amazing experiences while adhering to software contracts.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
489
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Experience-Driven Development &Contract-First DevelopmentRyan McGinty & SuAnne HallFuture Insights 2013Monday, April 29, 13
  • 2. hello!Ryan McGintyHTML Solutions LeadEffectiveUIryan.mcginty@effectiveui.comSuAnne HallExperience DesignEffectiveUIsuanne.hall@effectiveui.com | @swan5280Tweeting about this talk? please use #effectiveui and #FILiveMonday, April 29, 13
  • 3. What we’ll talk aboutWhy Experience-Driven Development?Case study with 24/7 MediaMonday, April 29, 13
  • 4. What we’ll talk aboutWhy Experience-Driven Development?Case study with 24/7 MediaContract-First Development DiscussionDeconstructing wireframes into software contracts, and why the CFD process worksMonday, April 29, 13
  • 5. What we’ll talk aboutWhy Experience-Driven Development?Case study with 24/7 MediaContract-First Development DiscussionDeconstructing wireframes into software contracts, and why the CFD process worksBalancing Software Contracts with Experience-Driven DevelopmentHow to use modern JavaScript frameworks to implement software contractsMonday, April 29, 13
  • 6. What we’ll talk aboutWhy Experience-Driven Development?Case study with 24/7 MediaContract-First Development DiscussionDeconstructing wireframes into software contracts, and why the CFD process worksBalancing Software Contracts with Experience-Driven DevelopmentHow to use modern JavaScript frameworks to implement software contractsHow to be Part of the SolutionThe benefits of a healthy relationship between dev and designMonday, April 29, 13
  • 7. What we’ll talk aboutWhy Experience-Driven Development?Case study with 24/7 MediaContract-First Development DiscussionDeconstructing wireframes into software contracts, and why the CFD process worksBalancing Software Contracts with Experience-Driven DevelopmentHow to use modern JavaScript frameworks to implement software contractsHow to be Part of the SolutionThe benefits of a healthy relationship between dev and designQ&A timeMonday, April 29, 13
  • 8. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.Why Experience-Driven Development?Monday, April 29, 13
  • 9. Which way is the bus going? Right or Left?Monday, April 29, 13
  • 10. The door must beon the other sideof the bus!!!Which way is the bus going? Right or Left?Monday, April 29, 13
  • 11. Because you can never guess how users willinterpret the products you’re building based onyour own assumptions and experiences.Why Experience-Driven Development?Monday, April 29, 13
  • 12. Because using an experience-driven process can:Why Experience-Driven Development?๏ reduce development costs and inefficiencies๏ create long-lasting and loyal customer relationships๏ give you an edge over your competition๏ generate more conversions/business๏ make more $$$Monday, April 29, 13
  • 13. Because a product that is simply ‘user friendly’will no longer survive.It must also be:Why Experience-Driven Development?Monday, April 29, 13
  • 14. Because a product that is simply ‘user friendly’will no longer survive.It must also be:Why Experience-Driven Development?UsefulMeaningful EngagingPersonalCommunicativeSimplifying ContextualDelightfulMonday, April 29, 13
  • 15. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.Monday, April 29, 13
  • 16. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.Monday, April 29, 13
  • 17. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.Contract-First Developmentand Wireframe DeconstructionMonday, April 29, 13
  • 18. Contract-First Development๏ With experience-driven development, theuser needs are met first and the experiencedesign is implemented with continuous inputfrom development.Monday, April 29, 13
  • 19. Contract-First Development๏ With experience-driven development, theuser needs are met first and the experiencedesign is implemented with continuous inputfrom development.๏ Inevitably UX needs, budget, businessneeds, and system constraints will come toa head.Monday, April 29, 13
  • 20. Contract-First Development๏ With experience-driven development, theuser needs are met first and the experiencedesign is implemented with continuous inputfrom development.๏ Inevitably UX needs, budget, businessneeds, and system constraints will come toa head.๏ By developing data contracts, front-end andback-end developers can maximizedevelopment throughput and minimize cost.Monday, April 29, 13
  • 21. CaseStudy:Analytical reports for managerial andexecutive-level usersUser needs identified from customer insightresearch:๏ Simplify the report analysis experience by allowingusers to quickly find answers to “exploratory” high-level questions:๏ Designing & developing for an iPad-friendly contextwas important“Which publishers in my inventory are being underutilized?”“Who’s exceeding their goals, and who’s falling short?”“Where can I get a quality deal for a good rate?”Monday, April 29, 13
  • 22. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.24/7 Media Wireframe๏ First we identified the components to beginthe process of deconstructing the userexperience into contracts.Identify the ComponentsMonday, April 29, 13
  • 23. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.24/7 Media WireframeIdentify the Components๏ First we identified the components to beginthe process of deconstructing the userexperience into contracts.๏ Inventory Results CountMonday, April 29, 13
  • 24. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.24/7 Media WireframeIdentify the Components๏ First we identified the components to beginthe process of deconstructing the userexperience into contracts.๏ Inventory Results Count๏ My Watchlist CountMonday, April 29, 13
  • 25. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.24/7 Media WireframeIdentify the Components๏ First we identified the components to beginthe process of deconstructing the userexperience into contracts.๏ Inventory Results Count๏ My Watchlist Count๏ All Vendors List (Paginated)Monday, April 29, 13
  • 26. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.24/7 Media WireframeIdentify the Components๏ First we identified the components to beginthe process of deconstructing the userexperience into contracts.๏ Inventory Results Count๏ My Watchlist Count๏ All Vendors List (Paginated)๏ All Vendors List (Filtered)Monday, April 29, 13
  • 27. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.Balancing Software Contractswith Experience-Driven DevelopmentMonday, April 29, 13
  • 28. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.Why Use Contracts?๏ Further describe the rules and data constraints in order to maintain claritybetween front-end development and back-end service providers.๏ Allow for mock web service data to be used during development of a client-sideMVC application. This can create a simplified dev environment without the need toconnect to active back-end services.๏ Provide a baseline for both client-side and server-side unit testing.๏ Potentially use the contracts for code generation and validation.Monday, April 29, 13
  • 29. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.Start with an Example Response[{"vendorId": 123434343,"vendorName": "Comcast","vendorLogo": "http://servername/images/logo/Comcast.png","vendorType": "Network","spending30days": 1345675,"impressions30days": 43434323,"totalUniques": 45323232,"avgCTR": 3.445,"avgCPC": 1.34,"avgCPM": 2.43,"avgFloorRate": 3.445},{....}]Monday, April 29, 13
  • 30. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.The Example will Leave Unanswered Questions[{"vendorId": 123434343,"vendorName": "Comcast","vendorLogo": "http://servername/images/logo/Comcast.png","vendorType": "Network","spending30days": 1345675,"impressions30days": 43434323,"totalUniques": 45323232,"avgCTR": 3.445,"avgCPC": 1.34,"avgCPM": 2.43,"avgFloorRate": 3.445},{....}]๏ Are all fields required?๏ Can spending30days be a float?๏ At what endpoint can this recordbe retrieved?๏ How can we get a filtered list ofvendors?๏ Should the service providepagination data?Monday, April 29, 13
  • 31. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.Taking the Contracts to the Next Level๏ Creating a dialogue around a sample response is helpful.๏ We found that we could have done a better job of creating the contractsbeforehand.๏ There were times when we switched our application from mock data to liveservices, that the application responded differently than expected.Monday, April 29, 13
  • 32. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.Creating the Contract Using JSON Schemahttp://json-schema.org/{“title” : “Vendor Schema”,“type” : “Object”,“properties” : ["vendorId": { “type” : “integer” },"vendorName": { “type” : “string” },"vendorLogo": { “type” : “string” },"vendorType": { “type” : “string” },"spending30days":{ “type” : “integer”, “minimum” : 0 },...............],“required” : [ “vendorName”, “vendorLogo”,“vendorType”, “spending30Days”, “totalUniques” ]}๏ Describe a component’sproperties.๏ Data types, minimum/maximumvalues, accepted data patterns(regex), etc.๏ Provide a list of propertiesrequired by the contract.Monday, April 29, 13
  • 33. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.Utilizing JSON Hyper-Schema to Describe Service Endpoints{“title” : “Vendor Schema”,...............links : [{“title” : “Searchable list of Vendors”,“rel” : “parent”,“href” : “/vendors/{pageIndex}”,“method” : “POST”,“schema” : {“type” : “object”,“properties” : {“searchTerm” : { “type” : “string” },“sortBy” : { “type” : “string” }..................}}}]}๏ Define how the user actionsinteract with the service.๏ Include descriptive details in titleso developers understand thepurpose.๏ Describe the system endpoints /links and any pertinent details ofthe client request.Monday, April 29, 13
  • 34. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.Contract Negotiations๏ If there is an existing back-end system in place, compromises will inevitably berequired.๏ The contract (schema) will allow front-end / back-end teams to iron out anapproach that will work without compromising user needs.๏ This approach reduces the number of surprises throughout the developmentprocess through mutual clarity.๏ It is better to call out any dependancies or limitations early in the process.Monday, April 29, 13
  • 35. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.How to Use Modern JavaScriptFrameworks with Contract-FirstDevelopmentMonday, April 29, 13
  • 36. Choosing a FrameworkThere are many modern JavaScript frameworks to choose fromMonday, April 29, 13
  • 37. Framework Requirements for the 24/7 Media Project๏ We wanted a more flexible, lightweight framework that we could mix and matchwith other libraries.Monday, April 29, 13
  • 38. Framework Requirements for the 24/7 Media Project๏ We wanted a more flexible, lightweight framework that we could mix and matchwith other libraries.๏ We wanted something that would work easily with a RESTful persistence layer.Monday, April 29, 13
  • 39. Framework Requirements for the 24/7 Media Project๏ We wanted a more flexible, lightweight framework that we could mix and matchwith other libraries.๏ We wanted something that would work easily with a RESTful persistence layer.๏ We wanted built-in routing capabilities to help us maintain application state.Monday, April 29, 13
  • 40. Framework Requirements for the 24/7 Media Project๏ We wanted a more flexible, lightweight framework that we could mix and matchwith other libraries.๏ We wanted something that would work easily with a RESTful persistence layer.๏ We wanted built-in routing capabilities to help us maintain application state.๏ For these reasons, we decided to choose Backbone as our client-side MV*framework.Monday, April 29, 13
  • 41. Backbone.jsBackbone.js gives structure to web applications by providing:๏ models with key-value binding and custom events๏ collections with a rich API of enumerable functions๏ views with declarative event handlingBackbone connects it all to your existing API over a RESTful JSON interface.Monday, April 29, 13
  • 42. Backbone.js - Models๏ Here is an example of the vendormodel in Backbone.๏ We can use the contract to createdefaults for the model as well asprovide direction for Backbone’svalidation function.๏ Whenever data changes in themodel, Backbone will automaticallyfire events that the application canbind to.var VendorMod = Backbone.Model.extend( { idAttribute : vendorId, defaults : { vendorId : "", vendorName : "", totalSites : "", vendorLogo : "", vendorType : "", featured : "", stickey : "", watchlist : "", avgFloorRate : ""......................... },validate : function() { .... }}Monday, April 29, 13
  • 43. Backbone.js - Models๏ During our contractgeneration, we found out that24/7’s existing API did notwork in a standard way forsaving models.๏ Here is an example ofoverriding Backbone’s Syncfunction.var VendorMod = Backbone.Model.extend( {........sync : function( method, model, options ) {// Backbone will try to request BASE_SERVER_URL/ vendorId we need tochange thatif( method == patch ) {model.url = this.collection.url;//Use post instead of patchoptions.type = POST;//Add vendorIdif( !options.hasOwnProperty( attrs ) ) options.attrs = {}; options.attrs.vendorId = this.get( vendorId );}return Backbone.sync( method, model, options );},.....}Monday, April 29, 13
  • 44. Backbone.js - Collections๏ A collection is a list ofBackbone models.๏ We tell the collection whattype of model to instantiate.๏ The URL provided willautomatically be parsed intoa collection of Vendor modelswhen the built in “fetch()”var VendorCollection = Backbone.Collection.extend( {model : VendorMod,url : ‘/js/vendors/data/sampleVendorCollection.JSON’,parse : function( response ) {return response[0].records;}}Monday, April 29, 13
  • 45. Backbone.js - Views๏ The view is backed by thevendor collection and is setto re-render when thecollection changes.๏ This is now a re-usable viewcomponent, which can beused anywhere, that mapsback to our original JSONcontract.var VendorListView = Backbone.View.extend( {tagName : ‘ul’,className : ‘vendorList’,events : {‘click .pageButton’ : ‘changePage’}initialize : function() {this.template = _.template( vendorItemTemplate );this.collection.on( ‘reset’, this.render, this );},render : function() {this.collection.each( function( vendorModel ) {this.$el.append( this.template( vendorModel.toJSON() );}, this );return this;},changePage : function( event ) { .... }}Monday, April 29, 13
  • 46. Takeaways from the 24/7 Media Project๏ Contract-First Development combined with Backbone.js allowed us to:๏ Work independently from the client’s back-end team without any access to theirpersistence layer.๏ Deliver high quality, componentized code that was easy for the remote team tointegrate with.Monday, April 29, 13
  • 47. Takeaways from the 24/7 Media Project๏ Contract-First Development combined with Backbone.js allowed us to:๏ Work independently from the client’s back-end team without any access to theirpersistence layer.๏ Deliver high quality, componentized code that was easy for the remote team tointegrate with.๏ The clear separation of concerns decoupled the front- and back-end teams,and allowed for a greater focus on each discipline.Monday, April 29, 13
  • 48. Takeaways from the 24/7 Media Project๏ Contract-First Development combined with Backbone.js allowed us to:๏ Work independently from the client’s back-end team without any access to theirpersistence layer.๏ Deliver high quality, componentized code that was easy for the remote team tointegrate with.๏ The clear separation of concerns decoupled the front- and back-end teams,and allowed for a greater focus on each discipline.๏ Leveraging JSON Schema for data contracts, instead of just sample data, wouldhave made the process more seamless.Monday, April 29, 13
  • 49. All  informa+on  contained  in  this  presenta+on,  or  presented  verbally  in  conjunc+on  with  this  presenta+on  is  specifically  iden+fied  as  “Confiden+al  Informa+on.”    As  such,  disclosure  of  this  Confiden+al  Informa+on  to  any  third  party  is  strictly  prohibited.How to be Part of theExperience-Driven SolutionMonday, April 29, 13
  • 50. USER EXPERIENCEVISUAL DESIGNTECHNOLOGYCUSTOMER INSIGHTDISCOVER ENVISION ELABORATE CONSTRUCTMonday, April 29, 13
  • 51. How Does the CFD Process Support You and Your Users?Communication comes earlier in the design process๏ No “chucking over the fence” to development.Monday, April 29, 13
  • 52. How Does the CFD Process Support You and Your Users?Communication comes earlier in the design process๏ No “chucking over the fence” to development.๏ More efficient prioritization - discover up front and focus on what’s really needed, not just what’sbelieved to be needed.Monday, April 29, 13
  • 53. How Does the CFD Process Support You and Your Users?Communication comes earlier in the design process๏ No “chucking over the fence” to development.๏ More efficient prioritization - discover up front and focus on what’s really needed, not just what’sbelieved to be needed.๏ Time built in to revise design solutions to accommodate for system constraintsor scoping concerns.Monday, April 29, 13
  • 54. Tired of Always Saying No?How to be part of the experience design solution rather than saying “No, wecan’t get there from here”๏ Identify and start framing conversations/negotiations around the implementation of the user’s needs,not the user need itself.Monday, April 29, 13
  • 55. “If I’d asked my customers what theywanted, they’d have said a faster horse.”-Henry FordMonday, April 29, 13
  • 56. What Are the User Needs?“horstrich” by psdbox.comSpeed: “I need to get from pointA to point B faster than with mycurrent horse.”Monday, April 29, 13
  • 57. What Are the User Needs?http://anosikestanley.blogspot.com/2012/04/meet-worlds-largest-horse.htmlConvenience: “I need to getmyself and my wife from point Ato point B without taking twohorses.”Monday, April 29, 13
  • 58. What Are the User Needs?amazon.com customer image for “Accoutrements Horse Head Mask”Cost: “I need to get myself andmy spouse from point A to pointB for around the same costas two horses and a carriage.”Monday, April 29, 13
  • 59. Communicate with design (way) before and during development๏ Talk about potential or known system constraints.๏ Constantly ask implementation and interactivity-related questions. You’re the first user of the productso question when something seems ‘off’ to you.๏ Help identify error handling and edge cases as early as possible.How to be Part of the UX Design SolutionMonday, April 29, 13
  • 60. Thank you!Monday, April 29, 13