pcc2 - how do i incorporate apple-like design into my products?

How do I incorporate Apple like design into my products?

Michael WalkdenVP Product DeliveryPathfinder Development LLCwww.pathf.com

April 2, 2011Product Camp Chicago

(c) Copyright 2011 Pathfinder Development LLC. www.pathf.com

DEVELOPMENT

Background

Design Matters...Now more than ever

1950s

1990s

Photo Credit: CC Ezu

As computing technology moves toward mobile devices, we’ve seen the 1990s’ growth in processor speed taper off and product development become less about horsepower [and more] about the overall design of the product.

... a healthier view of human intelligence ...

... that it is reactive, responsive, sensitive, nimble.

Brian Christian, The Atlantic March 2011

2011

What does Steve Really do For Apple?

Chief Design

Advocate

http://andrewchenblog.com/2009/12/04/does-every-startup-need-a-steve-jobs/

Agile 101

Photo By: Pattista

Agile 101

•In general agile is not new. It is collection of good software practices evolved over years of experience.

Photo By: NettasNursery

Myths About Agile

Agile is Working Without Documentation★ Documents that add value are created just-in-time ★ Much of the documentation is short-lived

One specific methodology★ It’s an umbrella term for a set of approaches and practices to software development

which share common values.

A “One Size Fits All” cookbook★ Every project and team adjusts to fit circumstances, environment, and constraints★ It’s not an all or nothing proposition

Simply iterations★ Software is developed incrementally, in time-boxed iterations

“Glorified hacking”★ There is a set of highly disciplined practices, including design which many people skip

Working without a plan★ Adaptive planning aids in delivery of highest value features to the business★ Planning occurs continually, throughout the project

Agile Values - Ingredients for highly productive, happy teams

Focus on activities that add value

Collaborative

Transparent

Adaptable

Simple

User engagement

Continuous Improvement

Lean User Experience

Design

Product ConceptProduct ConceptProduct ConceptProduct Concept

Working Working SoftwareSoftwareWorking Working SoftwareSoftware

Lean UXD Methods are ...

Lightweight

Low-Fi

Lo-Tech

External

Face to Face - Get out of the

building

Lean UXD Methods are ...

Collaborative

Fast

Repeatable

Goal Driven

Outcome Focused

Your Toolbox

Working Prototypes

Photo By: Hugo90

Pair Designing

send annotations

load in plans in pdf formatannotate plans with textaggregate annotations

arrange plans into projectsannotate with photosmanage site visits within a project

support jpeg as well as pdf plans

search for a plan by titlesearch for a plan using meta dataaccess past projectsupload files via emailupload files via iTunesupload files via a virtual plan room

mmmmm

m

add color to annotationsseparate documents into pages

display PDF table of contents

M

M

M

X

X

3 weeks

6 weeks

15 weeks

Architect

in office, preparing for site visit

captured site observations and emailed them

load pdf plans on iPad for the site

go to sitelaunch iPad app

find the plan for this particular inspection

inspect site

create annotations

Finish inspection

Connect iPad to network

Generate annotations summary and send via email

find site plans for site

review annotations

The _____________ helps _____________

to _________________________

(product, feature) (target audience)

(receive a benefit)

Problem____________________________________________________________________________________________________

______________________________________

The Story

Solution____________________________________________________________________________________________________

______________________________________

Desired Action __________________________________

Picture Caption________________________________________________

Construction Obs. App

architects/contractors

carry whole plan libary to site and record and email observations without extra paperwork

Architects often bring the wrong drawings to a site inspection and must reenter and can lose notes taken on yellow pads at a site

The iPad punch list puts all the plans at the architects fingertips, gets rid of re-entry and insures notes are not lost

Architect watches video demo and is offered link to app store

touch an object to annotate, DONE button takes you back

Business Objectives  What does success look like from a business perspective?

Users  Who are the primary users of this product?

User Objectives  Why do users want this product? What do they expect from it?

Brand Characteristics  How do we want customers to perceive the brand?

Value Propositions  What value does this product offer to the consumer?

Key Differentiators  What does this product offer that no one else can?

Measures of Success  How will we know we've been successful? Are there any key performance indicators?

Ken Mitchell

Responsible for Gig events,responsible for Gig staff,wants to sell out events, likes the service,likes innovators,staff prints thermal tickets

(Box Office Manager, The Gig)

The Challenge

All in a 1-4 Week Period

Storytelling and High level design

1.Visualize the personas - a cheap stock photo (www.fotolia.com) for each and their role. Can be more creative if that's of value (a consumer product may need

more, a B-to-B product probably not).

2.Visualize, using the personas pictures, the main idea of what the app does. Tell the story with one or a few slides. Ask: Does everyone on the team agree?

3.For each persona, get every activity they are doing listed. This is important, otherwise can end up designing pieces that don't fit together. This list can jump

start the story list.

4.For each persona, identify top goals (persona is successful if they can ________). This is usually very quick to do. The thinking work for 1-4 is best done in a time-boxed workshop with designer or PM leading and the whole team participating. Designer then mocks up a slide deck to present and validate.•After master story list is created, visualize the entire master story list. Sketch a deck of drawings that captures all the stories in visual form. The sketches are purely a fast design with everything in it, not a good design. You can only accomplish this with time boxed workshops (usually two or three 3 hour workshops). It always seems like a lot to do, yet when time boxed and everyone is pitching in it can be done. Somebody, like the PM, must serve as time-watcher and keep things moving so the goal is reached.•From 5, designer creates and mocks-up core design ideas. If stuck, pair with someone, could be anyone (doesn't have to be another designer).•Present the core design ideas in a story deck with context (personas pictures, screens, flows, whatever needed) and get client buy in. This will need to be iterated a few times most likely. This deck sets the stage for detailed design wireframes and specs during iterations.We usually have about two weeks to do this. Steps 1 -5 and part of 6 would be done during inception. The rest of 6 and 7 are done during the first iteration, which requires the first iteration's stories be independent of the core design.

If we can't do that in two weeks, we should sell the client on a longer inception if possible. Or, we have to finesse the first two iterations to allow more time for the high level design work.

Storytelling and High level design

1.Visualize the personas - a cheap stock photo (www.fotolia.com) for each and their role. Can be more creative if that's of value (a consumer product may need

more, a B-to-B product probably not).

2.Visualize, using the personas pictures, the main idea of what the app does. Tell the story with one or a few slides. Ask: Does everyone on the team agree?

3.For each persona, get every activity they are doing listed. This is important, otherwise can end up designing pieces that don't fit together. This list can jump

start the story list.

4.For each persona, identify top goals (persona is successful if they can ________). This is usually very quick to do. The thinking work for 1-4 is best done in a time-boxed workshop with designer or PM leading and the whole team participating. Designer then mocks up a slide deck to present and validate.•After master story list is created, visualize the entire master story list. Sketch a deck of drawings that captures all the stories in visual form. The sketches are purely a fast design with everything in it, not a good design. You can only accomplish this with time boxed workshops (usually two or three 3 hour workshops). It always seems like a lot to do, yet when time boxed and everyone is pitching in it can be done. Somebody, like the PM, must serve as time-watcher and keep things moving so the goal is reached.•From 5, designer creates and mocks-up core design ideas. If stuck, pair with someone, could be anyone (doesn't have to be another designer).•Present the core design ideas in a story deck with context (personas pictures, screens, flows, whatever needed) and get client buy in. This will need to be iterated a few times most likely. This deck sets the stage for detailed design wireframes and specs during iterations.We usually have about two weeks to do this. Steps 1 -5 and part of 6 would be done during inception. The rest of 6 and 7 are done during the first iteration, which requires the first iteration's stories be independent of the core design.

If we can't do that in two weeks, we should sell the client on a longer inception if possible. Or, we have to finesse the first two iterations to allow more time for the high level design work.

Inception Checklist1.Have customer fill out startup toolkit before inception2.Have internal kick off to define project strategy (product design v.s. We are implementers)3.Make sure to start with a PM, a designer, and a senior developer4.Pre-schedule workshops, transition meetings, stand-ups (if used)5.Start visual design in inception - have template of visual design done6.Educate client on our process7.Ensure notes and assumptions about stories get into Pivotal8.Personas9.High level task flows10.Cover FURPS+ for cross functional and nonfunctional requirements11.Select technology and high level architecture12.Estimate and prioritize story list13.Create a tentative release/build plan14.Identify iteration 0 tasks (and start if possible)15.Set up wiki, pivotal, email groups16.Create SOW addendum using inception estimates17.More business strategy conversations18.Show customer story board in key note of story list to tell the product's story

Inception Checklist1.Have customer fill out startup toolkit before inception2.Have internal kick off to define project strategy (product design v.s. We are implementers)3.Make sure to start with a PM, a designer, and a senior developer4.Pre-schedule workshops, transition meetings, stand-ups (if used)5.Start visual design in inception - have template of visual design done6.Educate client on our process7.Ensure notes and assumptions about stories get into Pivotal8.Personas9.High level task flows10.Cover FURPS+ for cross functional and nonfunctional requirements11.Select technology and high level architecture12.Estimate and prioritize story list13.Create a tentative release/build plan14.Identify iteration 0 tasks (and start if possible)15.Set up wiki, pivotal, email groups16.Create SOW addendum using inception estimates17.More business strategy conversations18.Show customer story board in key note of story list to tell the product's story

Photo By: nukit1

Wait?!?!Good design takes time

But...Big Designs up Front don’t work either

Don’t provide any direct value to product

Take too long

Are not accurate anyway

Foster an anti-change mentality

More about Big Designs up Front

Are difficult to estimate

Are hard to navigate

Everyone hates reading them

Have to be transformed into something developers can use

InceptionA short period of hard collaborative work; to better understand project

objectives, identify potential users, and define high level functional scope so that size of the project can be roughly estimated and an incremental release

strategy can be identified

Normally What Happens....

What Should Happen...

Traditional analysis: Exhaustively evaluate each level before moving on

Agile recognizes that:

Clarity is an iterative process…

The levels interact...

Traditional analysis: Exhaustively elaborate each level before moving on

Agile process strives to:

Do just enough to move down...you can always go back

Get to market and realize return on investment

An Agile inception Is...

Very visual - centered around tangible

models

Collaborative and inclusive

Time-boxed and rapid

Iterative and feedback driven (embracing

change)

Product & implementation cost focused

Photo By: Eleaf

How Do I Put it Together?

In battles with the business and technology goals, desirability will almost always win out

Makes it clear that product should be “insanely great”

Recruits a top design team and protects them from competing goals

Willing to spend money, adjust technology processes, all for the goal of highly desirable product

Choose Design Advocate

http://andrewchenblog.com/2009/12/04/does-every-startup-need-a-steve-jobs/

Users

Needs

Tasks

Features

User Stories

Story Board

InceptionHypothesisTest ResultsPersonasUsability TestingUser StoriesClarityCohesiveFocus on getting started

There is Only One Team - Just different roles Design + Development + Testing + Project Management + Product Management

Agile DeliveryVelocityIterationsContinuos DeploymentUser StoriesTesting

Lean UXDWireframes

Comp

Prototyping

User Behavior Analytics

Usability Testing

Product FocusCustomer Development

Funnels

Sign-ups

Analytics

Constant Innovation

There is Only One Team - Just different roles Design + Development + Testing + Project Management + Product Management

Rapid CyclesRapid Cycles

Focus on desirability

of end product

Focus on desirability

of end product

Photo By: striatic

Easy

DEVELOPMENT

Thank You.