Minimum Viable Web workshop

The Minimum Viable Web WorkshopKristofer Layon

HighEdWeb // October 10, 2012Milwaukee, Wisconsin

@klayon // #WRK9

Welcome to my presentation about the Minimum Viable Web. “Minimum viable” is a product management term, used to bring a disciplined focus to increasing the value of a product. So as the title implies, this presentation focuses on how to improve the web by managing it as a product that can be continually and iteratively improved.

The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9

Please use a note card and write down your name and a descriptive job title.

Initial exercise


Next, please take several Post-It notes and jot down everything that you are responsible for delivering as part of your job.

Job deliverables

Agile design and development



1. Requirements2. Analysis3. Design4. Develop5. Test6. Document7. Maintain and update

Waterfall Method

Emphasizes design perfection first,then building a complete product next.


Waterfall Method


Individuals and interactions over processes and tools

Working software over comprehensive documentation

Customer collaboration over contract negotiation

Responding to change over following a plan

http://agilemanifesto.org

Agile Manifesto



Lean UX + product management



Inspired by Lean Startup and Agile Development theories, Lean UX is the practice of bringing the true nature of a product to light faster, in a collaborative, cross-functional way with less emphasis on deliverables and greater focus on a shared understanding of the actual experience being designed.

http://www.newcontext.com

Lean UX

\




• UX, design, development work together as a team• Goal-driven and outcome-focused• Repeatable and routinized• Research with users is the best source of information• Focus on solving the right problem• Generate options quickly, but pick one to focus on• Pose a hypothesis and validate• Use rapid cycles to analyze and adjust: think, make, check

http://www.luxr.co

Lean UX




Comparing smaller, iterative improvement over time (green) to a longer, larger effort (red).


But when you zoom out, the more iterative method — even if it *feels* slower — can actually get you to more improvement. Iterating less is risky and prone to more course correction, and those changes can be big steps backward.


Product management is an organizational lifecycle function within an organization dealing with the planning, forecasting, and marketing of a product at all stages of the product lifecycle. A product manager is often responsible for analyzing market conditions and defining features of a product. Product management serves an interdisciplinary role.

http://www.newcontext.com

Product management



Product management is gathering and orchestratinga lot of data and opinions, using them to make

the most objective decisions possible.


Our customers’ opinions are more importantthan our opinions.



http://www.pragmaticmarketing.com

Our product management opinions should be based on articulating our market’s (i.e. customers’) needs and desires. As this coffee mug reminds us, our own opinions from an internal team’s perspective are not necessarily relevant.



Designer

Architect

Engineer

Owner

Bank

Contractor

Guests


A product manager should synthesize needs and desires not just from market analysis, but also from team and other internal analysis. In this way, it’s a big coordination and administrative effort. A lot like how an architect has a lot to coordinate for a good building design — it involves input from a wide range of perspectives and areas of expertise.

Marketing

ProductManager

UX

Design

Admin.

Faculty

I.T.


Similarly, a product manager doesn’t work in a vacuum. He or she needs to shape priorities based on input from all of these others areas of expertise that touch on the product and the business context for the product.

Human-centered design


Part One:The Victorian Web


I remember when I was pulled into the Victorian Web — it was nine years ago, when the CSS Zen Garden web site was brand new. Dave Shea created the site to showcase the power of CSS; two years later, Peachpit published a book that was inspired by the site and written by Shea and co-author Molly Holzschlag.



CSS Zen Garden is still pretty cool. The trouble is, it’s also kind of dangerous. As what CSS does in web standards, CSS Zen Garden separates style from content. So at the time, this felt liberating because it freed designers from cramming visual design into HTML tables.



And when you get to themes like “Under the Sea” that feature a giant squid, you realize that there’s a complete disconnect between the style and content. It’s fun, beautiful, and graphically well-designed. But the designs in these examples are superfluous. They’re pure ornamentation.

http

://k

aren

swhi

msy

.com

/pub

lic-d

omai

n-im

ages

/vic

tori

an-d

ress

es/i

mag

es/v

icto

rian

-dre

sses

-2.jp

g


We’ve had plenty of other examples of elaborate ornamentation in design. This example of an illuminated manuscript is not only much older, but it is a bit different: it’s a complete fusion of style and content. It’s actually the print equivalent of laying out web pages in tables. So the situation of favoring elaborate ornamentation in design is several centuries old.

http://en.wikipedia.org/wiki/Abraham_Maslow


http

://s

f.blu

eher

onto

urs.

com

/201

0/09

/vic

tori

an-f

ernd

ale.

htm

l


We see predecessors of the Victorian Web in Victorian architecture too. And I don’t mean to say that this design is terrible — it isn’t. Nonetheless, the vibrant colors and intricate ornamentation don’t have much to do with the function of the architecture. Arguably, it’s another example of excessive design. It’s certainly not a minimum viable design.



http

://k

aren

swhi

msy

.com

/pub

lic-d

omai

n-im

ages

/vic

tori

an-d

ress

es/i

mag

es/v

icto

rian

-dre

sses

-2.jp

g


And in fashion: quite a bit like CSS Zen Garden for the web. Only here, apparel is mostly ornamentation and style. It’s not designed to be lived in, to be accommodating, to be responsive. This is stiff, formal dress. Excessively so. And it reflected values of the era: lack of freedom, lack of flexibility, lack of self-expression. Again, not at all a minimum viable approach.



Modernism to the Rescue


But Modernism can help us — Modernism seems to do a better job at focusing on what minimum needs are. And this is not about visual style, it’s about being focused.

(form follows function)


In fact, Modernism was itself a sea change and has been helping to reinvent design for a century. The central tenet of Modernism is paring back form and ornamentation, and prioritizing function instead. Sounds like a good way to proceed with a web that is a minimum viable solution instead of excessively ornamented in ways that won’t always deliver value.

It is always better to be slightly underdressed.

Coco Chanel


Fashion is another example of design being revolutionized by Modernist thinking. One would think that clothing has always been human-centered, but remember those elaborate Victorian dresses? Enter Coco Chanel: she pared fashion back to simple elegance, and made the case that women’s fashion design could be progressive and liberating, not stifling.

http

://w

ww

.cha

nel.c

om/


Of course, Chanel is also a widely-recognized brand represented by a clean graphic design. The double-C design has a double-meaning: it is Coco’s initials, and also represents the gold and silver chains that she adorned her handbags with.



http

://w

ww

.cha

nel.c

om/


Today, the tradition of Chanel is still the same: simple and elegant design, best represented by the classic “little black dress” and black handbag accessory.



http

://w

ww

.cre

ativ

erev

iew

.co.

uk/i

mag

es/u

ploa

ds/2

011/

04/l

ondo

nund

ergr

ound

sign

1_0.

jpg


Modernist homes follow a similar sensibility. They break down the barriers between form and function, and even between inside and outside. Modernist architecture also reduces barriers between nature and human life via its transparent, expansive planes. In many ways, it works very nicely.



http

://w

ww

.cre

ativ

erev

iew

.co.

uk/i

mag

es/u

ploa

ds/2

011/

04/l

ondo

nund

ergr

ound

sign

1_0.

jpg


And by allowing materials to be presented in a pure and unadulterated manner, their inner beauty and inherent structural qualities are allowed to be directly expressed. The design is minimal — just enough to enhance the material and structure.



http

://e

n.w

ikip

edia

.org

/wik

i/Fi

le:E

dwar

d_Jo

hnst

on.p

ng

Edward Johnston(1872-‐1944)


One of my favorite examples of human-centered Modernism is in graphic design. It involved two contributors, Edward Johnston and Harry Beck. Johnston designed one of the first Modern sans-serif typefaces for the London Underground. Named after him, Johnston is still used today for all signage and the London Underground’s map.



http

://h

arry

beck

.com

/

Harry Beck(1902-‐1974)


Harry Beck redesigned the map itself, reinventing how mapping could be done.



http

://s

ilvia

karc

heva

91.fi

les.

wor

dpre

ss.c

om/2

011/

04/i

mg0

0311

.jpg


Prior to Beck’s and Johnston’s involvement, the London Underground’s map was rather typical: the map was a bit too literal to be very useful, and the typographic design was not very refined.



http

://w

ww

.tfl.g

ov.u

k/as

sets

/im

ages

/gen

eral

/bec

kmap

1.jp

g


The new design is a refined minimalism. The rail lines are abstracted — Beck understood that the map didn’t need to be a literal representation of the physical system. There is also a new emphasis on typography. And it is all color-coded to help customers quickly distinguish one line from another.



http

://s

hop.

tfl.g

ov.u

k/Si

teD

ata/

Roo

t/Pr

intS

hop/

unde

rgro

und_

map

.gif


The redesign persists today, and even though it has been updated the core design is very much unchanged. Moreover, the London Underground map has become the template for all nearly other mass transit maps in production today around the world.



http

://m

arko

ffai

th.fi

les.

wor

dpre

ss.c

om/2

011/

10/l

ondo

n_un

derg

roun

d_si

gn.jp

g


Beck and Johnston did more than redesign the map: they extended their typography and graphic standards to station signage and other communications. The result is one of the first corporate branding standards in history, and it remains one of the most recognizable brands in the world — even to people who have never been to London.



http

://w

ww

.cre

ativ

erev

iew

.co.

uk/i

mag

es/u

ploa

ds/2

011/

04/l

ondo

nund

ergr

ound

sign

1_0.

jpg


Analyzing the London Underground further, it is important to consider its advertising. Note the content: it is not focused on the service itself or its technology. It is instead focused on people’s needs and interests. Here, the ad makes the case that one can take the train to see the Wimbledon tennis tournament.



Modernism was the advent ofuser-centered product design.


Human Modernism is people-centered. And this Modernism introduced us to product design: using design to advance what people can do, and to help them do things better.

User interviews


Throughout the product management process, UX analysis is essential... in particular usability evaluation. Getting ideas in front of customers regularly, whether they are early in ideation or developed and released, allows product management to continually validate the direction of product improvement.

• Identity: name, what they look like, what they like

•Demographics: what else about who they are or how they live?

•Their needs: what do they want to do regarding your content or service IN THEIR WORDS

•Your responses: repeat needs back, plus ask them what they would expect to see or read to accomplish this IN THEIR WORDS


users are people

User stories


But I suggest that Modernism can help us — Modernism appears to do a better job at focusing on what minimum needs are. And this is not about visual style, it’s about being focused.

User stories focus on people, not solutions.


Students visiting our web site will use a jQuery enhanced web form to interact with our event

registration, and will get there by seeing “Forms” in the top nav.


Bad

•Output: what you make•Outcome: the UX results of using what you

make• Impact: the business results of using what you

make


As a student, I am able to register for an event on your web site.


Good

As a student, I prefer to register for an event on your web site using my smartphone.


Better

As a student, I prefer to register for an event on your web site using my smartphone. I am

more likely to register that wayand attend the event.


Best

Kano Model



One tool for analyzing product attributes is the Kano Model, originally developed for the Japanese auto industry. It breaks product attributes down into three categories. Note that the different categories yield different results because of their varying importance.

http

://w

ww

.van

-caf

e.co

m/s

hop/

imag

es/2

2S.4

19.0

91C

.jpg


A quick explanation by way of analyzing a car: a basic feature of a car is a steering wheel. In other words, not having a steering wheel is a fundamental problem. It’s a basic requirement, so long as cars are actively steered by a human driver (maybe someday they won’t be).



http

://w

ac.4

50f.e

dgec

astc

dn.n

et/8

0450

F/97

3the

daw

g.co

m/f

iles/

2011

/11/

fuel

-gau

ge.jp

g


A performance attribute of a car is fuel efficiency. The less fuel it needs, the less it costs to operate the car. This is enhanced performance.



http://1.bp.blogspot.com/-7y-e8Fm1_Ik/T6rYexg6AOI/AAAAAAAADOA/ELLTW_Lc5XQ/s1600/Crazy+Hair+Kelli.jpg


A delightful feature of a car could be a convertible top. Putting it down lets you sit in the sun and have the wind blow through your hair. It can make a car a lot of fun to drive, but it doesn’t aid in performance and it is also not a basic function of a car.


In approaching a product, we can see how managing features and priorities with the Kano model can work. If we are building a car, it has to start with the basics like a frame.


Then it needs other basic attributes: additional body parts and a steering wheel.


And it most certainly needs wheels -- another basic requirement.


A windshield is mostly a basic requirement as well. But it also has performance attributes: it helps make the car’s shape more streamlined, which aids in energy efficiency.


An add-one feature like a light bar on the roof is mostly a desirable attribute. Some people might think it looks cool; it’s not a basic or performance feature.


The right balance of basic, performance, and desirable features makes the owner of the car happy and satisfied.


On the other hand, the wrong balance of the three Kano attributes can get you in trouble. You don’t want to prioritize performance and desirable features until you have all of the essential basic features delivered. Desirable or performance features cannot make up for missing basic features.

http

://w

ww

.dilb

ert.c

om

Executives like graphs.


A blend of these tools and visualizations are very helpful. And using charts and graphs can be very helpful and persuasive. As a designer, the may not be your first choice of medium for communicating your ideas, but you need to recognize that well-presented data can help you meet goals.



http

://w

ww

.vet

eran

auto

csod

ak.h

u/ke

pek/

trab

ant6

0126

.jpg

Performance DelightBasic

54321 Trabant

Kano attributes


Here’s another example of how Kano analysis can be used to assess a product. This example begins with the Trabant, an East German car produced until the late 1980s when East and West Germany were reunified. As westerners, we would probably assess this product in this way: all 1s on a 5 point scale.



http

://w

ww

.vet

eran

auto

csod

ak.h

u/ke

pek/

trab

ant6

0126

.jpg


54321 Porsche

Kano attributes


Similarly, we might determine that a Porsche, another German car, would be all 5s. It not only meets the basic requirements for a car, its performance is high, and it’s beautiful and delightful to drive.



http

://w

ww

.vet

eran

auto

csod

ak.h

u/ke

pek/

trab

ant6

0126

.jpg


54321 Porsche

Parent of 3 childrenKano attributes


On the other hand, it’s important to know your customers. What if the customer I’m trying to satisfy is a parent of three children? Then a Porsche would rate lower on basics— not enough room for those kids. Performance-wise, it’s also an inefficient vehicle for family tasks like getting groceries. It’s still delightful, but not a solid 5 points for this customer.



http

://w

ww

.vet

eran

auto

csod

ak.h

u/ke

pek/

trab

ant6

0126

.jpg


54321 Toyota Minivan

Parent of 3 childrenKano attributes


Whereas a Toyota minivan, which is decidedly unexciting and common, would rate highly in all categories for a family with several children. It has a lot of room, is fuel efficient, can haul a lot, and has doors you can open remotely. It’s a great mix of basic, performance, and delight for that customer.



http

://w

ww

.vet

eran

auto

csod

ak.h

u/ke

pek/

trab

ant6

0126

.jpg


54321 Trabant

East German in 1985Kano attributes


Returning a moment to the Trabant: before the demise of the Iron Curtain and the introduction of a free market to a reunified Germany, the Trabant was a good car. Because it was the only car available. Another example of context for product success: time and place.



http

://w

ww

.vet

eran

auto

csod

ak.h

u/ke

pek/

trab

ant6

0126

.jpg


54321 Trabant

East German in 2012Kano attributes


But after reunification and the introduction of a free market and consumer choice, no one bought Trabants any more so production of it eventually stopped. The larger forces around it changed its value. The dike had broken. Just like the powerful forces of mobile have reduced the value of our old Victorian web designs. Are our old web designs just as irrelevant and outdated as a Trabant?



The Kano Model


So going back to a Kano graph, focus on delivering all basic value to your users first. Then determine how to add performance or delightful features. Leaving a basic feature incomplete will result in users thinking it is inadequate or even broken.

The Kano Model


But completing all basic requirements, and then adding something that enhances performance or delight, should make users satisfied and even very happy with your product.

Prioritizing and roadmapping


You can have more than one group of priorities,

yet everything can’t be a priority.

Product management is about identifying needs

and managing priorities to achieve satisfaction.


The discipline of product management is the discipline of analyzing a variety of needs, putting them in priority, and working with a team to focus on the right priorities, at the right time, for the right reasons. It requires a blend of market understanding, savvy communications and diplomacy, and enthusiasm for improving a product. But also patience for doing smaller amounts at a time.

http

://w

ww

.wen

gern

a.co

m/


By using market data to inform usefulness, setting priorities, and learning how to say no to things that users don’t need, you can avoid designing a mobile app or website that ends up like this: trying to do everything for everyone that, in the process, ending up being too cumbersome to make anyone happy.



http

://w

ww

.wen

gern

a.co

m/


What you want to aim for instead is the most elegant solution for your users’ needs, and that is often pared down to something more simple. And possibly even smaller, but more than one solution, to address different types of user personas.




The very best example of a Minimum Viable web product with a Modern design, yet high performance and even delightful features, is Google search. It essentially meets nothing more than a single, well-defined need — except for “I’m Feeling Lucky” and Google doodles (Star Trek example).

Product roadmap


Determining a Minimum Viable Product, and then prioritizing how to continue improving it, can be done using a variety of tools. The Kano Model is one; a product roadmap is another. The roadmap helps you plan enhancements over time. The next quarter might be more certain; after that, you might not be sure yet which priorities will rise to the top. And sometimes priorities change.

Prototyping


http

://v

imeo

.com

/384

8499

2


Prototyping should be as low-fidelity as possible. Just enough to communicate an idea, but not overpromise with design details. In fact, too many design details can distract reviewers from the essence of the design that you’re getting input or feedback on.



Presentations & questions


• Start with people.• Their needs are the start of your design.• Minimum Viable Product: the least

amount of design / development needed.• Iterate and add only if more is requested.• Result: simpler, lightweight solution that

you’re more willing to change over time.

Minimum Viable Web Design:


Minimum Viable Web design starts with human needs and the content or services people are seeking. It priorities content in a hierarchy, and then only adds as much visual enhancement as necessary. The results should aim to work on any device. If they work on a small screen, they will work on a large screen (and can always be progressively enhanced further for desktop).

• Get away from your desk – talk to people.• Get market data, then write user stories.• Road map product enhancements.• Prioritize, estimate, prototype solutions.• Be agile: iterate, deliver, evaluate, and repeat.

Online Product Management:


Web Product management is these tools and processes that can be used to develop the right Minimum Viable Web for your customers. They are also tused to develop strong relationships with everyone involved: customers, stakeholders, designers, and developers. It’s product management’s job to make everyone understand your web product’s direction.


If you are interested in approaching mobile design from a Minimum Viable approach, you might want to check out a book that I wrote last year entitled “Mobilizing Web Sites”.


ReworkJason Fried

The Lean StartupEric Reis

InspiredMarty Cagan

www.mindtheproduct.com

And here are some of my other favorite books about product management and lean UX and design.

http://www.mindtheproduct.com

http://www.mindtheproduct.com

@klayon

www.kristoferlayon.com

[email protected]


http://www.kristoferlayon.com

http://www.kristoferlayon.com

mailto:[email protected]

mailto:[email protected]

Date post:	27-Jan-2015
Category:	Documents
Upload:	kristofer-layon
View:	120 times
Download:	2 times

Minimum Viable Web workshop

Documents