SlideShare une entreprise Scribd logo
1  sur  28
Lean Development
Design through Iterative Experiments
Gretchen DeKnikker, SocialPandas, Co-founder & CMO
@gretchende
Jason Ouellette, SocialPandas, Co-founder & CTO
@jmouel
Gretchen DeKnikker
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”
Fat

Lean

Data visualization exploration

Customer design feedback

Back-end data collection

Limited front-end data display

UI Design

Navigation
Jason Ouellette
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 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">
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() { /* ... */ }
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>
Gretchen DeKnikker

Jason Ouellette

Co-founder & CMO,
@gretchende

Co-founder & CTO,
@jmouel
Lean Development: Design Through Iterative Experiments

Contenu connexe

Tendances

How to get your Minimum Viable Product (MVP)
How to get your Minimum Viable Product (MVP)How to get your Minimum Viable Product (MVP)
How to get your Minimum Viable Product (MVP)Lesley Robinson
 
AppNotch Enterprise
AppNotch EnterpriseAppNotch Enterprise
AppNotch Enterpriseappnotch
 
The 1 Week Minimum Viable Product (MVP)
The 1 Week Minimum Viable Product (MVP)The 1 Week Minimum Viable Product (MVP)
The 1 Week Minimum Viable Product (MVP)Alexis Roqué
 
"SCRUM allows us to create better products, more suited to the users' needs. ...
"SCRUM allows us to create better products, more suited to the users' needs. ..."SCRUM allows us to create better products, more suited to the users' needs. ...
"SCRUM allows us to create better products, more suited to the users' needs. ...Anna Zarudzka
 
Why should I care about the Minimum Viable Product (MVP)
Why should  I care about the Minimum Viable Product  (MVP)Why should  I care about the Minimum Viable Product  (MVP)
Why should I care about the Minimum Viable Product (MVP)Nektarios Sylligardakis
 
Ajax Usability for AjaxWorld
Ajax Usability for AjaxWorldAjax Usability for AjaxWorld
Ajax Usability for AjaxWorldAndreCharland
 
Building landing pages at scale at InVision - No Code Conf 2019
Building landing pages at scale at InVision - No Code Conf 2019Building landing pages at scale at InVision - No Code Conf 2019
Building landing pages at scale at InVision - No Code Conf 2019Webflow
 
Minimum Viable Product in brief!
Minimum Viable Product in brief!Minimum Viable Product in brief!
Minimum Viable Product in brief!Mohammad Milani
 
Walk, Don't Run: Incremental Change in Enterprise UX
Walk, Don't Run: Incremental Change in Enterprise UXWalk, Don't Run: Incremental Change in Enterprise UX
Walk, Don't Run: Incremental Change in Enterprise UXuxpin
 
Introduction to Indigo.Design App Builder
Introduction to Indigo.Design App BuilderIntroduction to Indigo.Design App Builder
Introduction to Indigo.Design App BuilderJason Beres
 
Minimum Viable Product - theory and workshop
Minimum Viable Product - theory and workshopMinimum Viable Product - theory and workshop
Minimum Viable Product - theory and workshopTilen Travnik
 
Mobilizing your Visualforce Application with jQuery Mobile and Knockout.js
Mobilizing your Visualforce Application with jQuery Mobile and Knockout.jsMobilizing your Visualforce Application with jQuery Mobile and Knockout.js
Mobilizing your Visualforce Application with jQuery Mobile and Knockout.jsKeir Bowden
 
Internship Presentation 2 Web Developer
Internship Presentation 2 Web DeveloperInternship Presentation 2 Web Developer
Internship Presentation 2 Web DeveloperHemant Sarthak
 
How to get a great UX job, U of Washington Presentation
How to get a great UX job, U of Washington PresentationHow to get a great UX job, U of Washington Presentation
How to get a great UX job, U of Washington PresentationPatrick Neeman
 
I'll gladly pay you Tuesday for a hamburger today: Managing UX Debt
I'll gladly pay you Tuesday for a hamburger today: Managing UX DebtI'll gladly pay you Tuesday for a hamburger today: Managing UX Debt
I'll gladly pay you Tuesday for a hamburger today: Managing UX DebtJack Moffett
 
Usability audit
Usability auditUsability audit
Usability auditIdeacto
 

Tendances (20)

How to get your Minimum Viable Product (MVP)
How to get your Minimum Viable Product (MVP)How to get your Minimum Viable Product (MVP)
How to get your Minimum Viable Product (MVP)
 
AppNotch Enterprise
AppNotch EnterpriseAppNotch Enterprise
AppNotch Enterprise
 
The 1 Week Minimum Viable Product (MVP)
The 1 Week Minimum Viable Product (MVP)The 1 Week Minimum Viable Product (MVP)
The 1 Week Minimum Viable Product (MVP)
 
"SCRUM allows us to create better products, more suited to the users' needs. ...
"SCRUM allows us to create better products, more suited to the users' needs. ..."SCRUM allows us to create better products, more suited to the users' needs. ...
"SCRUM allows us to create better products, more suited to the users' needs. ...
 
Why should I care about the Minimum Viable Product (MVP)
Why should  I care about the Minimum Viable Product  (MVP)Why should  I care about the Minimum Viable Product  (MVP)
Why should I care about the Minimum Viable Product (MVP)
 
Ajax Usability for AjaxWorld
Ajax Usability for AjaxWorldAjax Usability for AjaxWorld
Ajax Usability for AjaxWorld
 
Building landing pages at scale at InVision - No Code Conf 2019
Building landing pages at scale at InVision - No Code Conf 2019Building landing pages at scale at InVision - No Code Conf 2019
Building landing pages at scale at InVision - No Code Conf 2019
 
Minimum Viable Product in brief!
Minimum Viable Product in brief!Minimum Viable Product in brief!
Minimum Viable Product in brief!
 
Walk, Don't Run: Incremental Change in Enterprise UX
Walk, Don't Run: Incremental Change in Enterprise UXWalk, Don't Run: Incremental Change in Enterprise UX
Walk, Don't Run: Incremental Change in Enterprise UX
 
Introduction to Indigo.Design App Builder
Introduction to Indigo.Design App BuilderIntroduction to Indigo.Design App Builder
Introduction to Indigo.Design App Builder
 
Minimum Viable Product - theory and workshop
Minimum Viable Product - theory and workshopMinimum Viable Product - theory and workshop
Minimum Viable Product - theory and workshop
 
Mobilizing your Visualforce Application with jQuery Mobile and Knockout.js
Mobilizing your Visualforce Application with jQuery Mobile and Knockout.jsMobilizing your Visualforce Application with jQuery Mobile and Knockout.js
Mobilizing your Visualforce Application with jQuery Mobile and Knockout.js
 
Minimum viable product
Minimum viable productMinimum viable product
Minimum viable product
 
Internship Presentation 2 Web Developer
Internship Presentation 2 Web DeveloperInternship Presentation 2 Web Developer
Internship Presentation 2 Web Developer
 
MVP slideshare
MVP slideshareMVP slideshare
MVP slideshare
 
How to get a great UX job, U of Washington Presentation
How to get a great UX job, U of Washington PresentationHow to get a great UX job, U of Washington Presentation
How to get a great UX job, U of Washington Presentation
 
I'll gladly pay you Tuesday for a hamburger today: Managing UX Debt
I'll gladly pay you Tuesday for a hamburger today: Managing UX DebtI'll gladly pay you Tuesday for a hamburger today: Managing UX Debt
I'll gladly pay you Tuesday for a hamburger today: Managing UX Debt
 
SIIA Previews: VisibleGains
SIIA Previews: VisibleGainsSIIA Previews: VisibleGains
SIIA Previews: VisibleGains
 
Minimum Delightful Product
Minimum Delightful ProductMinimum Delightful Product
Minimum Delightful Product
 
Usability audit
Usability auditUsability audit
Usability audit
 

Similaire à Lean Development: Design Through Iterative Experiments

Emilia Ciardi - MVP e start-up: anche oggi una feature domani - Codemotion Mi...
Emilia Ciardi - MVP e start-up: anche oggi una feature domani - Codemotion Mi...Emilia Ciardi - MVP e start-up: anche oggi una feature domani - Codemotion Mi...
Emilia Ciardi - MVP e start-up: anche oggi una feature domani - Codemotion Mi...Codemotion
 
Beyond App Development
Beyond App DevelopmentBeyond App Development
Beyond App DevelopmentOsman Celik
 
Home management WebApp presentation
Home management WebApp presentationHome management WebApp presentation
Home management WebApp presentationbhavesh singh
 
PCC2 - How do I incorporate Apple-like design into my products?
PCC2 - How do I incorporate Apple-like design into my products?PCC2 - How do I incorporate Apple-like design into my products?
PCC2 - How do I incorporate Apple-like design into my products?ProductCamp Chicago
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingHemant Sarthak
 
Rachna_Vadala_Resume_updated
Rachna_Vadala_Resume_updatedRachna_Vadala_Resume_updated
Rachna_Vadala_Resume_updatedRachna Vadala
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Michele Ide-Smith
 
Sum of the Parts Speaker Series - Experience Engineering and UX
Sum of the Parts Speaker Series - Experience Engineering and UXSum of the Parts Speaker Series - Experience Engineering and UX
Sum of the Parts Speaker Series - Experience Engineering and UXvincebohner
 
Agile and data driven product development oleh Dhiku VP Product KMK Online
Agile and data driven product development oleh Dhiku VP Product KMK OnlineAgile and data driven product development oleh Dhiku VP Product KMK Online
Agile and data driven product development oleh Dhiku VP Product KMK OnlineRein Mahatma
 
Mobile Design at Gilt
Mobile Design at GiltMobile Design at Gilt
Mobile Design at GiltDavid Park
 
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villaresrayvillares
 
Building Mobile Optimized Websites
Building Mobile Optimized WebsitesBuilding Mobile Optimized Websites
Building Mobile Optimized Websiteshaxorize
 
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)Thinkful
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsclimboid
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDave Malouf
 

Similaire à Lean Development: Design Through Iterative Experiments (20)

Emilia Ciardi - MVP e start-up: anche oggi una feature domani - Codemotion Mi...
Emilia Ciardi - MVP e start-up: anche oggi una feature domani - Codemotion Mi...Emilia Ciardi - MVP e start-up: anche oggi una feature domani - Codemotion Mi...
Emilia Ciardi - MVP e start-up: anche oggi una feature domani - Codemotion Mi...
 
Beyond App Development
Beyond App DevelopmentBeyond App Development
Beyond App Development
 
Beyond App Development
Beyond App DevelopmentBeyond App Development
Beyond App Development
 
Home management WebApp presentation
Home management WebApp presentationHome management WebApp presentation
Home management WebApp presentation
 
PCC2 - How do I incorporate Apple-like design into my products?
PCC2 - How do I incorporate Apple-like design into my products?PCC2 - How do I incorporate Apple-like design into my products?
PCC2 - How do I incorporate Apple-like design into my products?
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project Coding
 
Rachna_Vadala_Resume_updated
Rachna_Vadala_Resume_updatedRachna_Vadala_Resume_updated
Rachna_Vadala_Resume_updated
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013
 
Sum of the Parts Speaker Series - Experience Engineering and UX
Sum of the Parts Speaker Series - Experience Engineering and UXSum of the Parts Speaker Series - Experience Engineering and UX
Sum of the Parts Speaker Series - Experience Engineering and UX
 
Agile and data driven product development oleh Dhiku VP Product KMK Online
Agile and data driven product development oleh Dhiku VP Product KMK OnlineAgile and data driven product development oleh Dhiku VP Product KMK Online
Agile and data driven product development oleh Dhiku VP Product KMK Online
 
Mobile Design at Gilt
Mobile Design at GiltMobile Design at Gilt
Mobile Design at Gilt
 
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
 
Building Mobile Optimized Websites
Building Mobile Optimized WebsitesBuilding Mobile Optimized Websites
Building Mobile Optimized Websites
 
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
 
AravindaKumarNew
AravindaKumarNewAravindaKumarNew
AravindaKumarNew
 
Kiely mitchell
Kiely mitchellKiely mitchell
Kiely mitchell
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
 
AshutoshMishra-v1.0
AshutoshMishra-v1.0AshutoshMishra-v1.0
AshutoshMishra-v1.0
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAs
 
Resume shivani
Resume  shivaniResume  shivani
Resume shivani
 

Plus de Salesforce Developers

Sample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce DevelopersSample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce DevelopersSalesforce Developers
 
Maximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceMaximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceSalesforce Developers
 
Local development with Open Source Base Components
Local development with Open Source Base ComponentsLocal development with Open Source Base Components
Local development with Open Source Base ComponentsSalesforce Developers
 
TrailheaDX India : Developer Highlights
TrailheaDX India : Developer HighlightsTrailheaDX India : Developer Highlights
TrailheaDX India : Developer HighlightsSalesforce Developers
 
Why developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX IndiaWhy developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX IndiaSalesforce Developers
 
CodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local DevelopmentCodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local DevelopmentSalesforce Developers
 
CodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web ComponentsCodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web ComponentsSalesforce Developers
 
Enterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web ComponentsEnterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web ComponentsSalesforce Developers
 
TrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer HighlightsTrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer HighlightsSalesforce Developers
 
Lightning web components - Episode 4 : Security and Testing
Lightning web components  - Episode 4 : Security and TestingLightning web components  - Episode 4 : Security and Testing
Lightning web components - Episode 4 : Security and TestingSalesforce Developers
 
LWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilityLWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilitySalesforce Developers
 
Lightning web components episode 2- work with salesforce data
Lightning web components   episode 2- work with salesforce dataLightning web components   episode 2- work with salesforce data
Lightning web components episode 2- work with salesforce dataSalesforce Developers
 
Lightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionLightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionSalesforce Developers
 
Migrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCPMigrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCPSalesforce Developers
 
Scale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in SalesforceScale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in SalesforceSalesforce Developers
 
Replicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data CaptureReplicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data CaptureSalesforce Developers
 
Modern Development with Salesforce DX
Modern Development with Salesforce DXModern Development with Salesforce DX
Modern Development with Salesforce DXSalesforce Developers
 
Integrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS ConnectIntegrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS ConnectSalesforce Developers
 

Plus de Salesforce Developers (20)

Sample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce DevelopersSample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce Developers
 
Maximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceMaximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component Performance
 
Local development with Open Source Base Components
Local development with Open Source Base ComponentsLocal development with Open Source Base Components
Local development with Open Source Base Components
 
TrailheaDX India : Developer Highlights
TrailheaDX India : Developer HighlightsTrailheaDX India : Developer Highlights
TrailheaDX India : Developer Highlights
 
Why developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX IndiaWhy developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX India
 
CodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local DevelopmentCodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local Development
 
CodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web ComponentsCodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web Components
 
Enterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web ComponentsEnterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web Components
 
TrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer HighlightsTrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer Highlights
 
Live coding with LWC
Live coding with LWCLive coding with LWC
Live coding with LWC
 
Lightning web components - Episode 4 : Security and Testing
Lightning web components  - Episode 4 : Security and TestingLightning web components  - Episode 4 : Security and Testing
Lightning web components - Episode 4 : Security and Testing
 
LWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilityLWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura Interoperability
 
Lightning web components episode 2- work with salesforce data
Lightning web components   episode 2- work with salesforce dataLightning web components   episode 2- work with salesforce data
Lightning web components episode 2- work with salesforce data
 
Lightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionLightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An Introduction
 
Migrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCPMigrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCP
 
Scale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in SalesforceScale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in Salesforce
 
Replicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data CaptureReplicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data Capture
 
Modern Development with Salesforce DX
Modern Development with Salesforce DXModern Development with Salesforce DX
Modern Development with Salesforce DX
 
Get Into Lightning Flow Development
Get Into Lightning Flow DevelopmentGet Into Lightning Flow Development
Get Into Lightning Flow Development
 
Integrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS ConnectIntegrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS Connect
 

Dernier

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdfChristopherTHyatt
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 

Dernier (20)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 

Lean Development: Design Through Iterative Experiments

  • 1. Lean Development Design through Iterative Experiments Gretchen DeKnikker, SocialPandas, Co-founder & CMO @gretchende Jason Ouellette, SocialPandas, Co-founder & CTO @jmouel
  • 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
  • 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
  • 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

Notes de l'éditeur

  1. Classis Build-Measure-Learn made popularized by Eric Reis in his book The Lean Startup Lean is NOT fast, cheap or a shortcut to product development Lean is hypothesis-driven experimentation and iteration based on validated learning
  2. Create small products that test assumptions using customer feedback to evolve the product and reduce waste Translates Build-Measure-Learn to Think-Make-Check Customer interviews Metrics
  3. http://www.hightechdad.com/wp-content/uploads/2009/07/angry_at_computer.png
  4. blog.thelettertwo.com
  5. http://stockmedia.cc/computing_technology/slides/DSD_4424.jpg
  6. http://spinsucks.com/wp-content/uploads/2013/04/The-Problem-with-Multitasking.jpeg When building apps for the enterprise, you&apos;re not only asking for the buyer&apos;s time and money, you&apos;re also asking them to change their behavior and how they work.  That means your product needs to be exponentially better, faster and easier than what they&apos;re doing today.
  7. Time, money, change behavior
  8. Validated hypothesis Beta Bootstrap and Easel.io Move into experimentation and rapid prototyping Iterative design Faster feedback cycles