1. The Minimum Viable Web Workshop
Kristofer Layon
HighEdWeb // October 10, 2012
Milwaukee, 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.
2. Initial exercise
Please use a note card and
write down your name and a
descriptive job title.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
3. Job deliverables
Next, please take several Post-It
notes and jot down everything that
you are responsible for delivering as
part of your job.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
4. Agile design and development
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
5. Waterfall Method
1. Requirements
2. Analysis
3. Design
4. Develop
5. Test
6. Document
7. Maintain and update
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
6. Waterfall Method
Emphasizes design perfection first,
then building a complete product next.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
7. Agile Manifesto
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
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
8. Lean UX + product management
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
9. Lean UX
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
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
10. 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
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
11. The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
Comparing smaller, iterative improvement over time (green) to a longer, larger effort (red).
12. The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
13. Product management
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
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
14. Product management is gathering and orchestrating
a lot of data and opinions, using them to make
the most objective decisions possible.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
15. Our customers’ opinions are more important
than our opinions.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
16. http://www.pragmaticmarketing.com
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
17. Architect
Bank Designer
Contractor Engineer
Guests Owner
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
18. Product
Manager
Admin. Marketing
Faculty UX
I.T. Design
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
20. Part One:
The Victorian Web
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
21. Part One:
The Victorian Web
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
22. Part One:
The Victorian Web
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
23. http://karenswhimsy.com/public-domain-images/victorian-dresses/images/victorian-dresses-2.jpg
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
24. http://sf.blueherontours.com/2010/09/victorian-ferndale.html
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
25. http://karenswhimsy.com/public-domain-images/victorian-dresses/images/victorian-dresses-2.jpg
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
26. Modernism to the Rescue
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
27. (form follows function)
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
28. It is always better to be
slightly underdressed.
Coco Chanel
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
29. http://www.chanel.com/
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
30. http://www.chanel.com/
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
31. http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
32. http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
33. http://en.wikipedia.org/wiki/File:Edward_Johnston.png
Edward
Johnston
(1872-‐1944)
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
34. http://harrybeck.com/
Harry
Beck
(1902-‐1974)
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
Harry Beck redesigned the map itself, reinventing how mapping could be done.
35. http://silviakarcheva91.files.wordpress.com/2011/04/img00311.jpg
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
36. http://www.tfl.gov.uk/assets/images/general/beckmap1.jpg
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
37. http://shop.tfl.gov.uk/SiteData/Root/PrintShop/underground_map.gif
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
38. http://markoffaith.files.wordpress.com/2011/10/london_underground_sign.jpg
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
39. http://www.creativereview.co.uk/images/uploads/2011/04/londonundergroundsign1_0.jpg
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
40. Modernism was the advent of
user-centered product design.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
42. 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.
43. users are people
• 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
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
44. User stories
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
45. User stories focus on people, not solutions.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
46. Bad
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.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
47. • Output: what you make
• Outcome: the UX results of using what you
make
• Impact: the business results of using what you
make
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
48. Good
As a student, I am able to register for an event
on your web site.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
49. Better
As a student, I prefer to register for an event
on your web site using my smartphone.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
50. Best
As a student, I prefer to register for an event
on your web site using my smartphone. I am
more likely to register that way
and attend the event.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
52. The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
53. http://www.van-cafe.com/shop/images/22S.419.091C.jpg
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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).
55. http://1.bp.blogspot.com/-7y-e8Fm1_Ik/T6rYexg6AOI/AAAAAAAADOA/ELLTW_Lc5XQ/s1600/Crazy+Hair+Kelli.jpg
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
56. The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
57. The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
Then it needs other basic attributes: additional body parts and a steering wheel.
58. The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
And it most certainly needs wheels -- another basic requirement.
59. The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
60. The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
61. The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
The right balance of basic, performance, and desirable features makes the owner of the car
happy and satisfied.
62. The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
63. http://www.dilbert.com
Executives like graphs.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
64. 5
4
http://www.veteranautocsodak.hu/kepek/trabant60126.jpg
3
2
1 Basic Performance Delight
Trabant
Kano attributes
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
65. 5
4
http://www.veteranautocsodak.hu/kepek/trabant60126.jpg
3
2
1 Basic Performance Delight
Porsche
Kano attributes
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
66. 5
4
http://www.veteranautocsodak.hu/kepek/trabant60126.jpg
3
2
1 Porsche
Basic Performance Delight
Parent of 3 children
Kano attributes
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
67. 5
4
http://www.veteranautocsodak.hu/kepek/trabant60126.jpg
3
2
1 Toyota Minivan
Basic Performance Delight
Parent of 3 children
Kano attributes
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
68. 5
4
http://www.veteranautocsodak.hu/kepek/trabant60126.jpg
3
2
1 Trabant
Basic Performance Delight
East German in 1985
Kano attributes
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
69. 5
4
http://www.veteranautocsodak.hu/kepek/trabant60126.jpg
3
2
1 Trabant
Basic Performance Delight
East German in 2012
Kano attributes
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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?
70. The Kano Model
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
71. The Kano Model
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
73. 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 Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
74. http://www.wengerna.com/
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
75. http://www.wengerna.com/
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
76. The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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).
77. Product roadmap
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
79. http://vimeo.com/38484992
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
81. Minimum Viable Web Design:
• 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.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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).
82. Online Product Management:
• 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.
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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.
83. The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
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”.
84. Rework The Lean Startup Inspired
Jason Fried Eric Reis Marty Cagan
www.mindtheproduct.com
The Minimum Viable Web | Kristofer Layon | @klayon | #wrk9
And here are some of my other favorite books about product management and lean UX and
design.