The document discusses lean UX principles, focusing on iterative design and experimentation to enhance user experience in enterprise applications. It contrasts minimum viable products (MVPs) with minimum sellable products (MSPs) and presents a case study on applying lean UX to a social selling platform. Tools like easel.io and bootstrap are highlighted for developing high-fidelity prototypes that can be used in code, demonstrating the transition from design to a live application.

1. Lean Development
Design through Iterative Experiments
Gretchen DeKnikker, SocialPandas, Co-founder & CMO
@gretchende
Jason Ouellette, SocialPandas, Co-founder & CTO
@jmouel

2. Gretchen DeKnikker
Co-founder & CMO
@gretchende

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

4. What is “Lean”?
Lean application development is iterative design through
experimentation and validated learning.

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

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

7. The Enterprise Buyer

8. The Enterprise Buyer

9. The Enterprise Buyer

10. The Enterprise Buyer

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

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

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

14. We had to “stage the house”…

15. …and ate a little “fat”
Fat
Lean
Data visualization exploration
Customer design feedback
Back-end data collection
Limited front-end data display
UI Design
Navigation

16. Jason Ouellette
Co-founder & CTO
@jmouel

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

18. Demo of finished product
Features
• Meeting list
• Event, Contact,
Opportunity, Account
• Meeting report
• Event, Opportunity

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

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

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

22. Develop the code: Easel.io to Visualforce (2 of 2)
4. Create and import static resources
 Bootstrap
 Font Awesome (www.fontawesome.io)

23. 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) { /* ... */ }

24. Develop the code: Navigation with AngularJS
1. Provide navigation function in Angular controller
1.
$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">

25. Develop the code: Calling Apex via AngularJS
AngularJS
DF13MeetingTrackerController.load(function(result, event) {
if (event.status) {
$scope.meetings = result;
$rootScope.$apply();
}
}, { escape: false });
Apex Controller
public with sharing class DF13MeetingTrackerController {
@RemoteAction
public static List<Event> load() { /* ... */ }

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

27. Gretchen DeKnikker
Jason Ouellette
Co-founder & CMO,
@gretchende
Co-founder & CTO,
@jmouel