Lean DevelopmentLean DevelopmentDesign through Iterative Experiments

Gretchen DeKnikker, SocialPandas, Co-founder & CMO

@gretchende

Jason Ouellette, SocialPandas, Co-founder & CTO

@jmouel

Gretchen DeKnikkerGretchen DeKnikker

Co-founder & CMO

@gretchende

Co-founder & CMO

@gretchende

Lean UX and the Enterprise Buyer

Today we’ll cover What is Lean UX?

Applying Lean principles in the enterprise

Overview of tools for higher fidelity UX

Force.com as a sandbox for Lean UX experiments

What is “Lean”?

Lean application development is iterative design through

experimentation and validated learning.

Lean UX

User Experience is a person’s perceptions and responses that

result from the use or anticipated use of a product, service or

system.

Lean UX

Lean UX evolves Build-Measure-Learn to Think-Make-Check

The Enterprise Buyer

The Enterprise Buyer

The Enterprise Buyer

The Enterprise Buyer

MVP vs MSP

A minimum viable product (MVP) is the version of a new product or service which allows a team to collect the maximum amount of validated learning with the least effort

A minimum sellable product (MSP) is the version that will get an enterprise user to change their behavior and the way they work

All about SocialPandas

SocialPandas is a social selling platform that helps B2B sales teams

leverage popular social networks to connect with prospects, shorten

sales cycles, boost deal sizes, and grow loyal customer relationships.

Case Study: Applying Lean UX to the Enterprise Buyer

We did all the “right” things…

•Extensive customer development

•High fidelity mockups, low fidelity prototypes

…but it wasn’t working.

We had to “stage the house”…

…and ate a little “fat”

Data visualization exploration Customer design feedback

Back-end data collection Limited front-end data display

UI Design Navigation

LeanFat

Jason OuelletteJason Ouellette

Co-founder & CTO

@jmouel

Co-founder & CTO

@jmouel

Sample Application: Sales Meeting Tracker

High-fidelity prototype live app Demo of finished product

Build the prototype• Goals and tools

• Easel.io and Bootstrap

Develop the code• Easel.io to Visualforce

• Visualforce the “lightweight” way

• AngularJS: Navigation, calling Apex, and data binding

Demo of finished product

Features

• Meeting list• Event, Contact,

Opportunity, Account

• Meeting report• Event, Opportunity

Build the prototype: goals and tools

Goals HTML5 mobile app to validate ideas, run experiments with users

Artifacts must be directly usable in code, not disposable

Tools: good/bad/ugly Visual fidelity vs. code usefulness

Developer and designer workflow, the “what-if” gaps

Round-trip issues

Build the prototype: Easel.io and Bootstrap

Easel.io: powered by Bootstrap Bootstrap (as grid system) in 1 minute

<div class="container">

<div class="row-fluid">

<span class="span12">

<h2 class="heading navbar-inverse">Meetings

<button class="btn pull-left btn-mini"> <i class="icon icon-chevron-left"></i> Back</button>

</h2>

</span>

</div>

</div>

Getting started with Easel.io

Develop the code: Easel.io to Visualforce (1 of 2)

1. Make sure each Easel page has a unique top-level CSS class. Assign it to the BootstrapContainer.

2. Export from Easel.io. Test locally and tweak exported CSS/HTML.

Gotchas: Bootstrap version, images.

3. Create simple Visualforce page with no header/sidebar. Put CSS for each page into <style> tag.

Put HTML for each page into separate DIVs with top-level CSS class.

Develop the code: Easel.io to Visualforce (2 of 2)

4. Create and import static resources Bootstrap

Font Awesome (www.fontawesome.io)

Develop the code: Visualforce the “lightweight” way

Single Page Applications MVC-ish frameworks

Remote Action Client-side ViewState is not your friend (until it’s server-side)

@RemoteAction

public static List<Event> load() { /* ... */ }

@RemoteAction

public static void save(Event event, Opportunity opportunity) { /* ... */ }

Develop the code: Navigation with AngularJS

1. Provide navigation function in Angular controller1. $scope.nav = function(path) {

$location.path(path);

$scope.editMode = path != '';

}

2. Use navigation function in anchors, buttons<button type="button" ng-click="nav('')">Back</button>

3. Show/hide DIVs based on $scope variable<div ng-show="editMode" class="meeting-report container-fluid">

Develop the code: Calling Apex via AngularJS

AngularJSDF13MeetingTrackerController.load(function(result, event) {

if (event.status) {

$scope.meetings = result;

$rootScope.$apply();

}

}, { escape: false });

Apex Controllerpublic with sharing class DF13MeetingTrackerController {

@RemoteAction

public static List<Event> load() { /* ... */ }

Develop the code: Data binding with AngularJS

Inline templates<apex:outputPanel html-ng-app=""

html-ng-controller="MeetingTrackerCtrl" styleClass="container-fluid">

<div class="row-fluid">

<div class="span3">

<div class="well sidebar-nav">

<ul class="nav nav-list">

<li ng-class="navClass('{{event.Id}}')"

ng-repeat=”event in events">

<a ng-click="nav('{{event.Id}}')”>{{event.opportunity.Name}} {{event.ActivityDate |

date:'M/d'}}</a></li>

</ul>

</div>

</div>

</apex:outputPanel>

Jason OuelletteJason Ouellette

Co-founder & CTO,@jmouel

Gretchen DeKnikkerGretchen DeKnikker

Co-founder & CMO,@gretchende