minimum viable web: edui 2012
DESCRIPTION
TRANSCRIPT
The Minimum Viable WebKristofer Layon
edUi — September 25, 2012Richmond, Virginia
© 2012 Capella Educa@on Company
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 | edUi — September 25, 2012
1. The Victorian Web2. Modernism3. Human Modernism4. Mobile5. Product Management
Here is a preview of what I am going to cover. I’ll begin by looking at how design has historically been overly elaborate, undemocratic, and not very responsive and accommodating of change. Then we’ll look at how Modernism altered that, and what we can learn from this to become better managers of the things that we design and build for online use.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
1. The Victorian Web
To best understand the Minimum Viable Web, we should first review how the web has been designed up until a few years ago. For the first 15 years or so, the web was stuck in the equivalent of the Victorian Age. An age in which designers paid a lot of attention to elaborate visual presentation, often at the expense of focusing on content quality and responsiveness to environment.
Part One:The Victorian Web
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
Part One:The Victorian Web
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
Part One:The Victorian Web
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Except I think these examples separate design from content a bit *too* much. As you look through the CSS Zen Garden designs today, you get pulled into them as pictures. At the expense of the content, which becomes secondary to the visual examples.
Part One:The Victorian Web
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
://s
f.blu
eher
onto
urs.
com
/201
0/09
/vic
tori
an-f
ernd
ale.
htm
l
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
2. Modernism to the Rescue
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
(form follows function)
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
http
://m
it81
.com
/bak
er/s
ites
/def
ault
/file
s/im
ages
/aal
to.jp
g
Alvar Aalto(1898-‐1976)
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Alvar Aalto: a pioneer of Modern design from Finland. And I don’t think it’s a coincidence that a pioneer of Modernism was from Finland, as Finns are culturally focused on being determined about simplicity. This is due to a mix of circumstances where they had large periods of history defined by being frugal, isolated from the rest of the world, and dominated by their neighbors.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
An iconic example of Modernist design is the Savoy Vase by Alvar Aalto. It demonstrates how elegant form doesn’t need ornamentation to be effective and even beautiful. This is form, function, and material in perfect balance. The glass is allowed to express its own beauty and truth. Just as web material — content — should.
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
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
3. Human Modernism — Focus on People
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Modernism is sometimes criticized for being cold, detached, and mechanical. And some examples are. I would argue that the best Modernism, however, is intensely focused on human needs and desires. Human Modernism.
(or the advent of user-centered product design)
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Another example from Aalto: this isn’t just an aesthetic design for a sink. Aalto studied how water came out of faucets and splashed in and out of sinks. His sink design minimizes splashing, thereby also making the sink quieter to use.
http
://e
n.w
ikip
edia
.org
/wik
i/Fi
le:E
dwar
d_Jo
hnst
on.p
ng
Edward Johnston(1872-‐1944)
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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)
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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 Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
The new design is a refined minimalism. The rail lines are much more cleanly depicted, make it much easier to pick routes from one point to another. Stations are more clearly labeled with type that is easier to read. 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 Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
An example of a London Underground station sign, showing how outstanding its readability is and how easy to spot it is (even in the midst of busy Victorian architecture!).
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
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
It is always better to be slightly underdressed.
Coco Chanel
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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/
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Of course, Chanel is also a widely-recognized brand represented by a clean wordmark. 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/
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
4. Mobile Can Help Us Make the Web Better
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
So what can we learn from these examples? I think the lessons are: we should learn how to design better by taking fewer risks, focusing more on human needs, and letting the essence of our design be the least amount of design necessary to facilitate our product’s content or service.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Stephanie Rieger, a mobile designer in Scotland, made a similar case about web design in May of this year..
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
I like how she is thinking here, because it’s less about making a new mobile site or even an existing site mobile-optimized. She’s instead posing a different question: shouldn’t all sites be lightweight? Shouldn’t all sites be minimally designed and with minimal content?
http
://e
xtra
eccl
esia
m.fi
les.
wor
dpre
ss.c
om/2
010/
03/h
aiti
-ear
thqu
ake-
dam
age-
ee60
2c90
91fd
9e2b
.jpg
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Going back to design that isn’t lightweight or able to respond adequately to its environment, look at where that leads to problems in architecture: here’s the palace in Port-au-Prince, Haiti, after earthquake there in 2010.
http
://m
edia
.sac
bee.
com
/sta
tic/
web
logs
/pho
tos/
imag
es/2
010/
aug1
0/ka
trin
a_fiv
e_sm
/kat
rina
_fiv
e_18
.jpg
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Similarly, if we design beautiful houses but build them in places subject to hurricanes, we also take risks. Are these risks worth it? What are we really in control of here? This is a way to see what happens when our minimum viable design does not take environment into account.
http
://p
aper
s.ri
sing
sea.
net/
imag
es-f
or-r
ollin
g-ea
sem
ents
/Pho
to29
.jpg
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Hurricane Katrina was the ultimate example of demonstrating human folly: designing an entire modern city in a place where it can be completely inundated by a hurricane. Our design is only viable until it is exposed to environmental forces that we cannot control.
The dike has broken on our web designs.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
And so it is with mobile devices and the web: the dike has broken around the designs we thought were beautiful and safe. We are now designing in a new environment. Will our designs respond to these changes?
To design is to communicate clearly by whatever means you can control or master.
Milton Glaser1929-
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Milton Glaser puts the hurricane and earthquake devastation slides in a new light. Clear communications, and successful design, are centered on things that we can control. We should minimize our investment in design that can be changed by external forces that are beyond our control. Such design investment in more than is necessary is risky. How much risk do we want to take?
It is not the strongest of the species that survives, nor the most intelligent, but the one most responsive to change.
Charles Darwin1809-1882
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
http
://w
ww
.goo
drea
ds.c
om/
Or as Charles Darwin puts it, after studying variation in species that led to his theories on evolution.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
http
://e
n.w
ikip
edia
.org
/wik
i/D
arw
in's
_fin
ches
Darwin believed he found evidence of evolution in the natural variation within species such as birds. Each of these birds has a different beak shape, which Darwin proposed was due to constant, iterative changes that happened as the birds who were best-suited for their environments prevailed and reproduced.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
http
://c
hick
enor
eggb
log.
files
.wor
dpre
ss.c
om/2
010/
04/8
00px
-woo
ly_
mam
mot
h-rb
c.jp
g
Whereas the example of the Wooly Mammoth is one of inability to respond enough, or control enough variables, in its environment through adaptation. It likely died because of environmental change and being hunted to extinction by humans.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
http
://w
ww
.luke
w.c
om
So here is the changing environment of web browsing: smartphone sales eclipsed sales of PCs 2 years earlier than originally projected by Wall Street analysts.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
How will your design (and organization)weather the changes to its environment?
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Don’t redesign.
Respond and reprioritize.
Part One:The Victorian Web
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Here is an example of investing too much design time into something that does not provide value. We can spend a lot of time designing the perfect background image for our Twitter stream when viewed on desktop...
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
But here’s the mobile experience. The background image is gone. And the majority of Twitter use is mobile, so a minority of users ever see the design of the background image. Yet here, the minimum viable design still prevails; what matters is still visible and it works. Only the additional ornamentation has been lost.
5. Product Management
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
The discipline of product management helps us focus on user-centered needs and the least amount of design and product that is necessary to meet them. It also emphasizes a continuous feedback loop of revalidating design solutions with users, making design adjustments, delivering new improvements, and repeating for continuous improvement. But starting with just enough to get going.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
In August 2011, Dan Cederholm wrote a great post on his Simplebits blog about mobile optimization.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Dan has always struck a chord with me: his low-key, sincere, New England sensibility results in clear, beautiful designs and outstanding presentations. His design has always encompassed the best of Modernism: it’s spare and simple, yet very warm and human at the same time.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
An August 2011 blog post by Dan made me happy for two reasons: first, he validated my excitement for mobile and responsive design, saying that it finally felt like web design. Yes!
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
But more importantly, he also walked through the first mobile version of Dribbble.com. He noted that because it was an existing site with a tiny team, building anew with mobile first wasn’t a great option for them.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
So taking baby steps is what they did: doing something, even if it’s not perfect or starting with mobile first. This is exactly what I think everyone should do, too, if they’re not in a position to jump into mobile first. Just take baby steps instead. Small, iterative improvements. You can always do more later.
Determining priority:Maslow’s Hierarchy of Needs
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
But not going mobile first does present other challenges. If you can’t do it all at once with respect to mobile optimization, where do you begin? How do you decide? I suggest taking a look at Maslow’s Hierarchy of Needs.
Abraham Maslow(1908-‐1970)
http
://e
n.w
ikip
edia
.org
/wik
i/A
brah
am_
Mas
low
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Abraham Maslow was a pioneering developmental psychologist whose research and writing focused on his theory of a hierarchy needs, motivation, self-actualization, and human potential.
Abraham Maslow, A Theory of Human Motivation, 1943
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
This graphic of Maslow’s theory of human motivation illustrates needs in a pyramid, with the most fundamental needs at the bottom. Each layer needs to be met before you are able to focus on the next level of needs. The first four layers are basic or “deficiency needs”; the top layer is unique and the most advanced, considered “being needs”.
Kristofer Layon, A Theory of Human Motivation, 2012
Mobile
See
Read
Navigate
HTML5
Share
Pinch+Zoom
Performance
Respond
Transi'ons
Local storage
Web sockets
Offline
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
I think this hierarchy can be used to systematically analyze features or enhancements to the web, too. We need to be able to see and navigate above all else. Then we can focus on reading, and thereafter responding and sharing. After that, how fast or well this happens (performance) is important. Then there are “extras” like HTML 5.
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 | edUi — September 25, 2012
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.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
The Kano Model
Another tool for analyzing product attributes is to use 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
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Then it needs other basic attributes: additional body parts and a steering wheel.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
And it most certainly needs wheels -- another basic requirement.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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 Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
The right balance of basic, performance, and desirable features makes the owner of the car happy and satisfied.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
A blend of these tools and visualizations are very helpful. Not just to help a product manager make decisions, but also to communicate them. Another key element of product management is making everyone— from your customers and stakeholders to your designers and developers— understand how you are setting priorities. Charts and graphs can be very helpful and persuasive.
http
://w
ww
.vet
eran
auto
csod
ak.h
u/ke
pek/
trab
ant6
0126
.jpg
Performance DelightBasic
54321 Trabant
Kano attributes
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
Performance DelightBasic
54321 Porsche
Kano attributes
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
Performance DelightBasic
54321 Porsche
Parent of 3 childrenKano attributes
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
Performance DelightBasic
54321 Toyota Minivan
Parent of 3 childrenKano attributes
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
Performance DelightBasic
54321 Trabant
East German in 1985Kano attributes
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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
Performance DelightBasic
54321 Trabant
East German in 2012Kano attributes
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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 Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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 Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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 Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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 does neets nothing more than a single, well-defined need — except for “I’m Feeling Lucky” and Google doodles (Star Trek example).
• Start with people.• Design from your content out.• The least amount of design and
development necessary to meet a need.• Iterate and add only if more is requested.• The result: a more simple, lightweight
solution.
Minimum Viable Design:
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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:
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
Web Product management are the tools and processes you can use to develop the right Minimum Viable Web for your customers. They are also the tools and processes you can use to develop strong relationships with everyone involved: customers, stakeholders, designers, and developers. It’s your job to make everyone understand your web product’s direction.
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012
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”. Although it predates Dan Cederholm’s approach to Dribbble’s mobile design, it takes the same idea of prioritizing baby steps of improvement to gradually make a fixed-width site more responsive to mobile screens.
@klayon
kristoferlayon.com
The Minimum Viable Web | Kristofer Layon | edUi — September 25, 2012