Lean UX Integration

Lean UX Transforming How We Work

2 2

Too busy to innovate? Too busy not to.

3 3

• History of complications following build kit hand offto developers

• Duplicative, unnecessary work leads to long hoursand reduced morale

• Interferes with our ability to scale operations

• Projects routinely under scoped and over budget asa result


4 4

Case Study 1 • Standard Build Kit provided to developer• Site build did not match specs in Build Kit• Our team spent excessive hours reviewing staging server to identify discrepancies

o Over 600 discrepancies found across 72 unique screens for desktop, tablet, and mobile• Several additional calls with the client were necessary

o Supposed platform limitations were never communicated to our team despite tremendous, upfront coordination with developers to manage expectations

o Outdated, front end development methodologies hindered ability to quickly and easily implementsite wide modifications

• Adversely impacted overall quality of final producto Limited to zero resources available to correct the issues identified and was launched with known

defects


5 5

Case Study 2 • Standard Build Kit provided to developer• Site build did not match specs in Build Kit• Our team spent excessive hours reviewing staging server to identify discrepancies

• Developer transcribed copy from PSDs rather than importing or copy and pasting from providedmanuscript

• Additional hours spent on QA and editorial reviewing the content in staging environment foraccuracy

• Adversely impacted timeline


6 6

“A lot of times, people don’t know what

they want until you show it to them.”

Steve Jobs

From UX to Lean UX

7 7

“Inspired by Lean and Agile development theories,

Lean UX is the practice of bringing the true nature of our work to light faster, with less emphasis on deliverables and greater focus on the actual experience being designed.”

Jeff Gothelf Lean UX: Getting Out of the Deliverables Business Smashing Magazine, March 7th, 2011

“The greatest exponents of UX design are some of the biggest brands to emerge in the last 15 to 20 years. Google, Amazon, Facebook and Apple have all invested heavily in refining their user experience and reaped the rewards. Apple and Google are currently the two most valuable companies in the world, a fair justification for the current trend of enthusiasm for UX.”

Citation Needed

From UX to Lean UX

8 8

From UX to Lean UX

Lean UX Drivers: • Technology moves fast, so should we – Thriving in a

rapidly changing landscape requires the ability to adaptquickly

• Operational Efficiency – Increased ability to providenew service offerings and greater value proposition forour clients

• Leadership by Example – Unprecedented opportunityto excel in the industry through adoption of innovativetechniques

Lean UX is industry and content agnostic

Known Adopters:

9 9

From UX to Lean UX

Lean UX Principles: • Continuous Discovery – Allows research, feedback, and

analytics to remain relevant beyond a fixed point in time.

• Constant Iteration – Frequent incorporation of research and feedback minimizes time spent in the wrong direction.

• Fact Based Decision Making – Creates objectivity within the team and confidence in the product.

• Validating Early and Often – Turning assumptions into actionable facts moves projects forward rapidly and concisely.

• Greater Collaboration – Promotes shared understanding and consensus amongst all stake holders.

• Workflow Integration – Reduces effort exerted on extraneous documentation.

Build

10 10

From UX to Lean UX

Lean UX Results: • Estimates for build time and cost can be 50% more accurate

• Request for clarification by the development team can bereduced by 80%

• The amount of rework and bug fixes post-launch can bereduced to 25% of similar previous projects

• Prototyping can require 45% less effort than conventionaldevelopment methodologies

5000

4000 –

3000 –

2000 –

1000 –

0 – |1000

|200

|300

|400

|500

|600

|700

|800

|900

|100

S3

S3

S1S4P2

P1

–P

–S

P3

PROTOTYPINGPROJECTS

DEVELOPMENT EFFORT, MANHOURS

Deliv

ered

Sou

rce

Inst

ruct

ions

PROTOTYPING VS. SPECIFYINGSIZE AND EFFORT COMPARISONS

SPECIFYINGPROJECTS

11 11

“Wherever I see people doing something the way it’s

always been done, the way it’s ‘supposed’ to be done,

following the same old trends, well, that’s just a big red flag to

me to go look somewhere else.”

Mark Cuban

“What I’ve Learned”

Esquire, Nov 17, 2008

Transforming how we work

12 12

Transforming how we work Going from this:

13 13

Transforming how we work To this:

14 14

The Status Quo The “Big Design Upfront” model requires revisions for every

deliverable at every stage of development. The constant reconciliation

causes efforts to be expended on documentation management instead

of the product itself.

Standard Workflow Overview: 1) CW creates content outline2) IA creates sitemap3)   Internal/External Review Cycles4) Revisions applied to Content Outline5) Revisions reconciled to Sitemap6) CW creates Manuscript7)   Internal/External Review Cycles8) Revisions applied to Manuscript9) Revisions reconciled to Content Outline10) Revisions reconciled to Sitemap11) IA creates wireframes12)   Internal/External Review Cycles13) Revisions applied to Wireframes14) Revisions reconciled to Manuscript15) Revisions reconciled to Content Outline16) Revisions reconciled to Sitemap17) AD creates PSDs18)   Internal/External Review Cycles19) Revisions applied to PSDs20) Revisions reconciled to Wireframes21) Revisions reconciled to Manuscript22) Revisions reconciled to Content Outline23) Revisions reconciled to Sitemap

Note: Production design focused diagram, does not include additional documentation such as brief, BRD, FRD, and Style Guide

AD: Designs IA: Sitemap CW: Manuscript IA: Wireframes CW: Content Outline

Reconcile

Review Cycle

Sub

mis

sion

Rev

isio

ns

Review Cycle

Sub

mis

sion

Rev

isio

ns

Review Cycle

Sub

mis

sion

Rev

isio

ns

Review Cycle

Sub

mis

sion

Rev

isio

ns

Reconcile Reconcile Reconcile


Review Cycle

Sub

mis

sion

Rev

isio

ns

15 15

AD: Designs IA: CMS Backed Prototype

The Opportunity A “high fidelity prototype” model focuses on outcomes over output.

By linking the prototypes to a CMS, effort spent on reconciliation

is replaced by automated integration.

Potential Workflow Overview: 1) IA creates prototype in CMS2) CW publishes content outline to CMS3)   Internal/External Review Cycles4) Revisions applied to CMS5) CW publishes Manuscript to CMS6)   Internal/External Review Cycles7) Revisions applied to CMS8) AD exports Style Sheet to CMS9)   Internal/External Review Cycles10) Revisions applied to CMS

Note: Production design focused diagram, does not include additional documentation such as brief, BRD, FRD, and Style Guide

Review Cycle


Sub

mis

sion

Rev

isio

ns

Integrate Integrate

CW: Manuscript

16 16

Transforming how we work The Benefits

• A data driven system enforcing separation between content, layout, and behavioral elements wouldallow us to be more nimble and adaptive to the changing requirements of our clients

• CMS data exports can replace the majority of build kit documentation including Manuscript,Wireframes, PSDs, and Style Guides

• Direct integration can eliminate the risk of error when transposing content

• Original source documentation can be utilized to fulfill regulatory submission expectations andrequirements

• Required capabilities exist within current production software

• Built in responsive browser behavior allows for concurrent design of multiple screen sizes

• Real time rendering allows for quicker review cycles and constant quality assurance

17 17

“Knowing is not enough, we must apply.

Willing is not enough, we must do.”

Bruce Lee

Getting Lean

18 18

Adopt Train Test Deploy

Adopt the right CMS for our future needs:

Provide continual training to key departments:

Identify potential projects for Lean UX incorporation:

Turn Lean UX into a competitive advantage:

• Open Source• Intuitive UI• Feature Rich

• Creative• Technology• Strategy

• Capabilities App• White Papers• Pitch Work

• Operational efficiency• Higher value

proposition• Industry Leadership

Getting Lean

25 25

Reference Material

26 26

http://moduscreate.com/baby-steps-lean-ux/

https://www.rallydev.com/blog/agile/top-3-reasons-designers-object-agile-and-how-overcome-them

http://www.smashingmagazine.com/2014/01/08/lean-ux-manifesto-principle-driven-design/

http://blog.teamtreehouse.com/responsive-web-design-in-the-browser-part-1-kill-photoshop

http://blog.teamtreehouse.com/responsive-web-design-in-the-browser-part-2-the-tools

Lean UX Integration

Documents

Transcript of Lean UX Integration