Lean Development: Design Through Iterative Experiments
-
Upload
salesforce-developers -
Category
Technology
-
view
272 -
download
5
description
Transcript of Lean Development: Design Through Iterative Experiments
![Page 1: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/1.jpg)
Lean DevelopmentLean DevelopmentDesign through Iterative Experiments
Gretchen DeKnikker, SocialPandas, Co-founder & CMO
@gretchende
Jason Ouellette, SocialPandas, Co-founder & CTO
@jmouel
![Page 2: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/2.jpg)
Gretchen DeKnikkerGretchen DeKnikker
Co-founder & CMO
@gretchende
Co-founder & CMO
@gretchende
![Page 3: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/3.jpg)
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
![Page 4: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/4.jpg)
What is “Lean”?
Lean application development is iterative design through
experimentation and validated learning.
![Page 5: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/5.jpg)
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.
![Page 6: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/6.jpg)
Lean UX
Lean UX evolves Build-Measure-Learn to Think-Make-Check
![Page 7: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/7.jpg)
The Enterprise Buyer
![Page 8: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/8.jpg)
The Enterprise Buyer
![Page 9: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/9.jpg)
The Enterprise Buyer
![Page 10: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/10.jpg)
The Enterprise Buyer
![Page 11: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/11.jpg)
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
![Page 12: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/12.jpg)
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.
![Page 13: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/13.jpg)
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.
![Page 14: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/14.jpg)
We had to “stage the house”…
![Page 15: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/15.jpg)
…and ate a little “fat”
Data visualization exploration Customer design feedback
Back-end data collection Limited front-end data display
UI Design Navigation
LeanFat
![Page 16: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/16.jpg)
Jason OuelletteJason Ouellette
Co-founder & CTO
@jmouel
Co-founder & CTO
@jmouel
![Page 17: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/17.jpg)
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
![Page 18: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/18.jpg)
Demo of finished product
Features
• Meeting list• Event, Contact,
Opportunity, Account
• Meeting report• Event, Opportunity
![Page 19: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/19.jpg)
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
![Page 20: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/20.jpg)
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
![Page 21: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/21.jpg)
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.
![Page 22: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/22.jpg)
Develop the code: Easel.io to Visualforce (2 of 2)
4. Create and import static resources Bootstrap
Font Awesome (www.fontawesome.io)
![Page 23: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/23.jpg)
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) { /* ... */ }
![Page 24: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/24.jpg)
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">
![Page 25: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/25.jpg)
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() { /* ... */ }
![Page 26: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/26.jpg)
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>
![Page 27: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/27.jpg)
Jason OuelletteJason Ouellette
Co-founder & CTO,@jmouel
Gretchen DeKnikkerGretchen DeKnikker
Co-founder & CMO,@gretchende
![Page 28: Lean Development: Design Through Iterative Experiments](https://reader033.fdocuments.net/reader033/viewer/2022061116/5466afbbaf795917078b5fb5/html5/thumbnails/28.jpg)