Experience Driven Development - Future Insights Live 2013

Experience-Driven Development &
Contract-First Development
Ryan McGinty & SuAnne Hall
Future Insights 2013
Monday, April 29, 13

hello!
Ryan McGinty
HTML Solutions Lead
EffectiveUI
ryan.mcginty@effectiveui.com
SuAnne Hall
Experience Design
EffectiveUI
suanne.hall@effectiveui.com | @swan5280
Tweeting about this talk? please use #effectiveui and #FILive

What we’ll talk about
Why Experience-Driven Development?
Case study with 24/7 Media

Contract-First Development Discussion
Deconstructing wireframes into software contracts, and why the CFD process works

Balancing Software Contracts with Experience-Driven Development
How to use modern JavaScript frameworks to implement software contracts

How to be Part of the Solution
The beneﬁts of a healthy relationship between dev and design

How to be Part of the Solution
The beneﬁts of a healthy relationship between dev and design
Q&A time

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.

Which way is the bus going? Right or Left?

The door must be
on the other side
of the bus!!!
Which way is the bus going? Right or Left?

Because you can never guess how users will
interpret the products you’re building based on
your own assumptions and experiences.

Because using an experience-driven process can:
๏ 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 $$$

Because a product that is simply ‘user friendly’
will no longer survive.
It must also be:

Because a product that is simply ‘user friendly’
will no longer survive.
It must also be:
Useful
Meaningful EngagingPersonal
CommunicativeSimplifying Contextual
Delightful

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.

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.
and Wireframe Deconstruction

๏ With experience-driven development, the
user needs are met ﬁrst and the experience
design is implemented with continuous input
from development.

from development.
๏ Inevitably UX needs, budget, business
needs, and system constraints will come to
a head.

from development.
๏ Inevitably UX needs, budget, business
needs, and system constraints will come to
a head.
๏ By developing data contracts, front-end and
back-end developers can maximize
development throughput and minimize cost.

Case
Study:
Analytical reports for managerial and
executive-level users
User needs identiﬁed from customer insight
research:
๏ Simplify the report analysis experience by allowing
users to quickly ﬁnd answers to “exploratory” high-
level questions:
๏ Designing & developing for an iPad-friendly context
was 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?”

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 begin
the process of deconstructing the user
experience into contracts.
Identify the Components

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.
๏ Inventory Results Count

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.
๏ My Watchlist Count

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.
๏ All Vendors List (Paginated)

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.
๏ All Vendors List (Paginated)
๏ All Vendors List (Filtered)

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 Contracts
with Experience-Driven Development

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 clarity
between front-end development and back-end service providers.
๏ Allow for mock web service data to be used during development of a client-side
MVC application. This can create a simplified dev environment without the need to
connect 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.

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
},
{....}
]

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 record
be retrieved?
๏ How can we get a filtered list of
vendors?
๏ Should the service provide
pagination data?

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 contracts
beforehand.
๏ There were times when we switched our application from mock data to live
services, that the application responded differently than expected.

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 Schema
http://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’s
properties.
๏ Data types, minimum/maximum
values, accepted data patterns
(regex), etc.
๏ Provide a list of properties
required by the contract.

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 actions
interact with the service.
๏ Include descriptive details in title
so developers understand the
purpose.
๏ Describe the system endpoints /
links and any pertinent details of
the client request.

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 be
required.
๏ The contract (schema) will allow front-end / back-end teams to iron out an
approach that will work without compromising user needs.
๏ This approach reduces the number of surprises throughout the development
process through mutual clarity.
๏ It is better to call out any dependancies or limitations early in the process.

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 JavaScript
Frameworks with Contract-First
Development

Choosing a Framework
There are many modern JavaScript frameworks to choose from

Framework Requirements for the 24/7 Media Project
๏ We wanted a more ﬂexible, lightweight framework that we could mix and match
with 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.

๏ 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.

Backbone.js
Backbone.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 handling
Backbone connects it all to your existing API over a RESTful JSON interface.

Backbone.js - Models
๏ Here is an example of the vendor
model in Backbone.
๏ We can use the contract to create
defaults for the model as well as
provide direction for Backbone’s
validation function.
๏ Whenever data changes in the
model, Backbone will automatically
ﬁre events that the application can
bind to.
var VendorMod = Backbone.Model.extend( {

idAttribute : 'vendorId',

defaults : {

vendorId : "",

vendorName : "",

totalSites : "",

vendorLogo : "",

vendorType : "",

featured : "",

stickey : "",

watchlist : "",

avgFloorRate : ""
.........................

},
validate : function() { .... }
}

Backbone.js - Models
๏ During our contract
generation, we found out that
24/7’s existing API did not
work in a standard way for
saving models.
๏ Here is an example of
overriding Backbone’s Sync
function.
var VendorMod = Backbone.Model.extend( {
........
sync : function( method, model, options ) {
// Backbone will try to request BASE_SERVER_URL/ vendorId we need to
change that
if( method == 'patch' ) {
model.url = this.collection.url;
//Use post instead of patch
options.type = 'POST';
//Add vendorId
if( !options.hasOwnProperty( 'attrs' ) ) options.attrs = {};

options.attrs.vendorId = this.get( 'vendorId' );
}
return Backbone.sync( method, model, options );
},
.....
}

Backbone.js - Collections
๏ A collection is a list of
Backbone models.
๏ We tell the collection what
type of model to instantiate.
๏ The URL provided will
automatically be parsed into
a collection of Vendor models
when the built in “fetch()”
var VendorCollection = Backbone.Collection.extend( {
model : VendorMod,
url : ‘/js/vendors/data/sampleVendorCollection.JSON’,
parse : function( response ) {
return response[0].records;
}
}

Backbone.js - Views
๏ The view is backed by the
vendor collection and is set
to re-render when the
collection changes.
๏ This is now a re-usable view
component, which can be
used anywhere, that maps
back to our original JSON
contract.
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 ) { .... }
}

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 their
persistence layer.
๏ Deliver high quality, componentized code that was easy for the remote team to
integrate with.

persistence layer.
integrate with.
๏ The clear separation of concerns decoupled the front- and back-end teams,
and allowed for a greater focus on each discipline.

persistence layer.
integrate 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, would
have made the process more seamless.

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 the
Experience-Driven Solution

USER EXPERIENCE
VISUAL DESIGN
TECHNOLOGY
CUSTOMER INSIGHT
DISCOVER ENVISION ELABORATE CONSTRUCT

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 efﬁcient prioritization - discover up front and focus on what’s really needed, not just what’s
believed to be needed.

๏ More efﬁcient prioritization - discover up front and focus on what’s really needed, not just what’s
believed to be needed.
๏ Time built in to revise design solutions to accommodate for system constraints
or scoping concerns.

Tired of Always Saying No?
How to be part of the experience design solution rather than saying “No, we
can’t get there from here”
๏ Identify and start framing conversations/negotiations around the implementation of the user’s needs,
not the user need itself.

“If I’d asked my customers what they
wanted, they’d have said a faster horse.”
-Henry Ford

What Are the User Needs?
“horstrich” by psdbox.com
Speed: “I need to get from point
A to point B faster than with my
current horse.”

http://anosikestanley.blogspot.com/2012/04/meet-worlds-largest-horse.html
Convenience: “I need to get
myself and my wife from point A
to point B without taking two
horses.”

amazon.com customer image for “Accoutrements Horse Head Mask”
Cost: “I need to get myself and
my spouse from point A to point
B for around the same cost
as two horses and a carriage.”

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 ﬁrst user of the product
so 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 Solution

Thank you!

Experience Driven Development - Future Insights Live 2013

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Experience Driven Development - Future Insights Live 2013

Ähnlich wie Experience Driven Development - Future Insights Live 2013 (20)

Mehr von Effective

Mehr von Effective (16)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Experience Driven Development - Future Insights Live 2013