Minimum Viable Web: MobX 2012

1,557 views
1,488 views

Published on

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,557
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
25
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Minimum Viable Web: MobX 2012

  1. 1. The Minimum Viable Web Kristofer Layon MobX — 17 November 2012 Berlin, GermanyWelcome to my presentation about the Minimum Viable Web. I am here to introduce you tosome useful product management tools and techniques to help you improve your webproducts so that your users’ needs are met better, and also so your organization or businessis more successful. Aber zuerst, es gibt etwas, das ich für meine deutsche Kollegenreparierien möchte. Ein bisschen “Bad German”, sozusagen...
  2. 2. Ich bin ein Berliner!Everyone is probably familiar with JFK’s visit to Berlin during the Cold War, and his well-known quote, “Ich bin ein Berliner” (I am a Berliner). Kennedy and his team were savvyenough to want to appeal to the local residents, so the speechwriters were careful to includethis German phrase.
  3. 3. Ich bin Berliner!Everyone is probably familiar with JFK’s visit to Berlin during the Cold War, and his well-known quote, “Ich bin ein Berliner” (I am a Berliner). Kennedy and his team were savvyenough to want to appeal to the local residents, so the speechwriters were careful to includethis German phrase.
  4. 4. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012However, German speakers know that the grammar was incorrect. The correct translation is“Ich bin Berliner”. When the article “ein” is used, the term “Berliner” refers to a jelly-filleddonut.
  5. 5. 1. What is “minimum viable”? 2. Being responsive 3. Writing and following user stories 4. Prioritizing user stories 5. Developing business proposals 6. Sharing roadmaps and release plans The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012This is a great example of showing us that we can never know our customer well enough; noamount of research can ever be enough. So my session focuses on tools and techniques thatyou can use to help you understand how to design better for the people who use yourproducts and services, whether you are a designer, developer, project manager, or haveanother role.
  6. 6. 1. What is “minimum viable”? The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012What is a “minimum viable” solution? On the surface, it sounds like it is the least amount ofdesign and development that is necessary. But it is actually more than that: it is the leastamount of design and development that will meet your users’ expectations and yourorganization’s goals.
  7. 7. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012As an example, I’ll highlight some mobile applications that I started to manage last year.After designing web sites at a traditional university for over ten years, I was excited to getmore involved in mobile design. So I was excited to accept a new job at a very nontraditional, online education company, where I could be the product manager for Capella’smobile apps. It would allow me to work on mobile product design full time.
  8. 8. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012The apps that they already started working on looked great, and were already available totheir students. The apps allow students to participate in course discussions, and also provideadditional services including mobile library tools for searching for books and articles. Theapps were considered minimum viable versions. They didn’t have every feature that theycould have, but they were a start.
  9. 9. Can you imagine a telephone service that did not ring when there was a new call? The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012The trouble is, user satisfaction surveys and app store ratings told us that few customerswere satisfied with the initial releases of these apps. Feedback confirmed that our apps thatdid not have notification options for updates or events. Users equated this to having atelephone that does not ring when there is a new phone call.
  10. 10. We would be unhappy — is there someone waiting for us to answer? The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Can you imagine if your phone did not notify you of a phone call, and needing to rememberto check it regularly to see if there is someone there waiting to talk to you? Seeing our appsin this light made us realize that even though we thought they were successful in how theywere designed, the company had been wrong to not include notifications as part of the initialrelease.
  11. 11. Similarly, without notifications our app appears to be OUT OF ORDER. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Our customers essentially told is that not including notifications made our apps appear to beout of order. So even though the company had thought that they were a minimum viableversion to release for use, in hindsight we learned that this was a mistake. So how can youknow when it is safe to release a new product, and then how do you know how to improve itlater?
  12. 12. 2. Being responsive The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Today, the discipline of product management helps us maintain focus on user-centeredneeds and the least amount of design and product that is necessary to satisfy customers. Italso emphasizes a continuous feedback loop of validating design with people, making smalladjustments, delivering new enhancements, and repeating for continuous improvement. Andstarting with just enough to get going.
  13. 13. It is not the strongest of the species that survives, nor the most intelligent, but the one http://www.goodreads.com/ most responsive to change. Charles Darwin 1809-1882 The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012As Charles Darwin put it, after studying variations in species that led to his theories onevolution: isn’t the best design the one that is most responsive to change? Just as the speciesthat are most well-suited for their environments thrive (and the ones that are not eitheradapt or die out), web products need to respond to their environment as well — anenvironment that includes user expectations.
  14. 14. http://en.wikipedia.org/wiki/Darwins_finches The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Darwin saw evidence of evolution in the natural variation within species such as birds. Each ofthese birds has a different beak shape, which Darwin understood was due to constant,iterative changes that happened as the species who were best-suited to eat certain seedsreproduced over time through natural selection. This process emphasizes the successfuldetails of a “design” over time.
  15. 15. http://chickenoreggblog.files.wordpress.com/2010/04/800px-wooly_mammoth-rbc.jpg The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Whereas the example of the Wooly Mammoth is one of inability to respond enough to theenvironment through adaptation. It likely died because of rapid environmental changes, orperhaps being hunted to extinction by humans. In either case it was unable to respond toenvironmental changes that threatened its success. We don’t want to our product designs tobe like Wooly Mammoths.
  16. 16. http://www.lukew.com The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012So here is the changing environment of web browsing: smartphone sales eclipsed sales ofPCs 2 years earlier than projected by Wall Street analysts. Boom! It’s the equivalent of anasteroid slamming into the planet of web design and making many species of dinosaurs goextinct. You do not want your web products to be among the casualties, do you?
  17. 17. Compe//ve  Analysis:  current Capella Phoenix Walden Liberty Ashford Strayer iPhone  App  Store 2.5 3.0 2.5 3.0 4.0 n/a Android  App  Store  (Google  Play) 2.3 4.4 2.5 3.5 4.0 n/a Discussion  read Discussion  write NoAficaAons:  grades NoAficaAons:  reply  from  instructor NoAficaAons:  reply  from  classmate Course  media  (docs,  A/V,  ebooks) Campus  news Library Register  for  courses Tasks ©  2012  Capella  Educa/on  Company  —  Confiden/al  —  Do  not  distribute The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012So the first technique that I encourage you to use is what I did when I started to improve thismobile product. I took a closer look at our environment, including our competition. I did thisby looking at app store ratings of the iOS and Android versions of our mobile apps. Ourcompetitors with notifications had higher customer satisfaction.
  18. 18. Compe//ve  Analysis:  2013 Capella Phoenix Walden Liberty Ashford Strayer iPhone  App  Store 4.0 3.0 2.5 3.0 4.0 n/a Android  App  Store  (Google  Play) 4.0 4.4 2.5 3.5 4.0 n/a Discussion  read Discussion  write NoAficaAons:  grades NoAficaAons:  reply  from  instructor NoAficaAons:  reply  from  classmate Course  media  (docs,  A/V,  ebooks) Campus  news Library Register  for  courses Tasks ©  2012  Capella  Educa/on  Company  —  Confiden/al  —  Do  not  distribute The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Today I believe that adding notifications to our mobile apps should increase customersatisfaction. In other words, without notifications in our initial release, our mobile solutiondid not meet the minimum expectations that our customers had. Though I don’t mean tosuggest that competition should be your only roadmapping guide; you don’t want toparticipate in a feature war. But competitive analysis is one good way to determine how toimprove a product, and this type of visualization is also a good way to obtain support fromclients and business stakeholders.
  19. 19. How can your design (and organization) weather environmental changes? The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012So how can product management help your or your client’s web product succeed, especiallywhen technological and customer preference changes are rapid?
  20. 20. Don’t set out to redesign. Respond and reprioritize. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012It can seem daunting to react, thinking that product redesigns are necessary to succeed. Andsometimes that is the case. But before reaching that point, decide instead to just respond andreprioritize what you do. You may be able to respond enough to be successful withoutneeding to fully redesign your solutions.
  21. 21. 3. Writing and following user stories The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012User stories are one of the most important tools for keeping design and development teamsfocused on environmental changes and user expectations.
  22. 22. User stories: Defining user needs in human terms The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012I’d like you to focus on writing and solving user stories rather than just thinking of goodtechnical solutions. User stories ensure that your design solutions are properly focused onsolving human needs. By defining and maintaining a backlog of user stories on which tofocus your design and development, you have a disciplined way to iteratively improve yourweb site or app over time.
  23. 23. User stories help you focus your success on making a real impact, not just delivering solutions. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Good user stories focus exclusively on user’s human needs, but not just that. They shouldalso incorporate business goals. User stories should help guide design and development inways that improve customers’ user experiences in ways that also improve organizational orbusiness goals.
  24. 24. Bad Students visiting our web site will use a jQuery 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 | MobX — 17.Nov.2012Here’s a poor example of a user story. It mixes up a developer’s personal bias toward usingjQuery with what a user actually needs to do. But the fact is, people visiting a web site are notseeking to interact with jQuery. They’re coming to a site to learn something or get somethingdone. So help them get that done in the leanest, most responsive way possible. Thedeveloper’s preference may not necessarily be part of the best solution.
  25. 25. The right ingredients •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 | MobX — 17.Nov.2012By focusing on output, outcome, and impact, you can write user stories that define what yoursolution needs to solve. That way you’ll have a user-centered way to measure success.Because success isn’t about delivering jQuery, it’s about increasing outcomes that have a realimpact on organizational goals.
  26. 26. Good As a student, I am able to register for an event on your web site. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012So this is a good start to a user story. It defines a basic output: an event registration.
  27. 27. 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 | MobX — 17.Nov.2012This is slightly more refined, because it defines an outcome: it puts the desired output in thecontext of a desired outcome, being able to generate the output on a smartphone.
  28. 28. 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 | MobX — 17.Nov.2012And this user story is an example of one that defines not just output and outcome, butimpact of the design. You’re not just going to measure registrations, or even mobileregistrations. You’re going to measure success by how many people attend the event, and ofthose how many were able to register on their preferred device of a smartphone. This goesbeyond the typical measure of success: web analytics.
  29. 29. 4. Prioritizing user stories The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012By interviewing and surveying users, noting their preferences and expectations, and thenwriting good user stories, you can develop a backlog of user stories. This backlog is whatyour team can focus on as they determine how to design and develop product improvementsthat will increase customer satisfaction. But what happens if you have too many stories to tryto solve? Then you need to prioritize.
  30. 30. Determining priority: Maslow’s Hierarchy of Needs The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012I suggest taking a look at Maslow’s Hierarchy of Needs as a way to understand how humanneeds are met, and a framework to assess which user stories might be the most importantones to work on first.
  31. 31. http://en.wikipedia.org/wiki/Abraham_Maslow Abraham Maslow (1908-1970) The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Abraham Maslow was a pioneering developmental psychologist whose research and writingfocused on a theory of a hierarchy of human needs, motivation, self-actualization, andpotential.
  32. 32. Abraham Maslow, A Theory of Human Motivation, 1943 The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012This graphic of Maslow’s theory of human motivation illustrates these needs in a pyramid,with the most fundamental needs as the foundation at the bottom. Each layer needs to bemet 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”.
  33. 33. Local storage Offline Web sockets Transitions HTML 5 Performance Respond Share Read Pinch+Zoom See Navigate Mobile Kristofer Layon, A Theory of Human Motivation, 2012 The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012I think this hierarchy can be used to systematically analyze features or enhancements to theweb, too. We need to be able to see and navigate above all else. Then we can focus onreading, and thereafter responding and sharing. After that, how fast or well this happens(performance) is important. Then there are “extras” like HTML 5 and JavaScript.
  34. 34. http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/ The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Brad Frost liked my suggestion and created this version for a Smashing Magazine article thathe wrote in August 2012: start with giving people access to data and information, then helpthem interact with it, the improve performance, and focus on extra enhancements last.
  35. 35. You can have more than one priority, but everything can’t be your top priority. Product management is about identifying needs and managing priorities to maximize satisfaction. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012As you try to assess opportunities and priorities for improving the design of your product,there are other ways to analyze how products satisfy customer needs and expectations. Let’stake a look at another way to think about this.
  36. 36. Kano Model The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Another useful tool for analyzing product attributes is the Kano Model, originally developedfor the Japanese auto industry. It breaks product attributes down into three categories. Notethat the different attribute categories yield different results because of customerexpectations.
  37. 37. http://www.van-cafe.com/shop/images/22S.419.091C.jpg The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012A quick explanation by way of analyzing a car: a basic feature of a car is a steering wheel. Inother 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). Buthaving a steering wheel doesn’t get your car high consumer ratings either.
  38. 38. http://wac.450f.edgecastcdn.net/80450F/973thedawg.com/files/2011/11/fuel-gauge.jpg The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012A performance attribute of a car is fuel efficiency. The less fuel it needs, the less it costs tooperate the car. This is enhanced performance. So for some customers lower fuel efficiencyresults in lower product satisfaction. But high fuel efficiency results in higher satisfaction. Soit’s much less binary than having, or not having, a basic attribute.
  39. 39. http://1.bp.blogspot.com/-7y-e8Fm1_Ik/T6rYexg6AOI/AAAAAAAADOA/ELLTW_Lc5XQ/s1600/Crazy+Hair+Kelli.jpg The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012A delightful feature of a car could be a convertible top. Putting it down lets you sit in the sunand have the wind blow through your hair. It can make a car a lot of fun to drive, but itdoesn’t aid in performance and it is also not a basic function of a car. So most cars lack aconvertible top, but that doesn’t adversely effect product satisfaction. That’s whatdistinguishes a delightful feature.
  40. 40. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012In approaching a product, we can see how balancing feature attributes and priorities with theKano model can help achieve higher product effectiveness and satisfaction. If we are buildinga car, it has to start with basics like a frame.
  41. 41. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Then it needs other basic attributes: additional body parts and that darn steering wheel.
  42. 42. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012And it most certainly needs wheels -- another basic attribute of a car.
  43. 43. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012A windshield is mostly a basic requirement as well. But it also has performance attributes: ithelps make the car’s shape more streamlined, which aids in energy efficiency.
  44. 44. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012An add-one feature like a light bar on the roof is mostly a desirable attribute. Some peoplemight think it looks cool; it’s not a basic or performance feature.
  45. 45. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012The right balance of basic, performance, and desirable features makes the owner of the carhappy and satisfied. It’s a solution that is biased towards functionality over the extra featuresor ornamentation of superfluous design.
  46. 46. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012On 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 after you have all of theessential basic features delivered. Desirable or performance features cannot make up for amissing basic feature.
  47. 47. http://www.dilbert.com Clients and executives like graphs! The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012A blend of these tools and visualizations are very helpful. And using charts and graphs canbe very helpful and persuasive. As a designer, they may not be your first choice of mediumfor communicating your ideas, but you need to recognize that well-presented data can helpyou meet your product design goals. It’s very important to communicate in ways that clientsand stakeholders understand to gain their support.
  48. 48. Kano Analysis 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 | MobX — 17.Nov.2012Let’s take another look at how Kano analysis can be used to assess product satisfaction. Thisexample begins with the Trabant, an East German car produced until the late 1980s whenEast and West Germany were reunified. As westerners, we would probably assess this productin this way: all 1s on a 5 point scale.
  49. 49. Kano Analysis 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 | MobX — 17.Nov.2012Similarly, we might determine that a Porsche, another German car, would be all 5s. It notonly meets the basic requirements for a car, its performance is high, and it’s beautiful anddelightful to drive.
  50. 50. Kano Analysis 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 | MobX — 17.Nov.2012On the other hand, it’s important to know your customers. What if the customer I’m trying tosatisfy is a parent of three children? Then a Porsche would rate lower on basics— not enoughroom for those kids. Performance-wise, it’s also an inefficient vehicle for family tasks likegetting groceries. It’s still delightful, but not a solid 5 points for this customer.
  51. 51. Kano Analysis 5 4 http://www.veteranautocsodak.hu/kepek/trabant60126.jpg 3 2 1 Minivan Basic Performance Delight Parent of children Kano attributes The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Whereas a minivan, which is decidedly unexciting and common, might rate highly in allcategories for a family with several children. It has a lot of room, is fuel efficient, can haul alot, and has doors you can open remotely. It’s a great mix of basic, performance, and delightfor that customer. So use visualizations like this to help your boss or clients understand yourweb product’s satisfaction.
  52. 52. Kano Model The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012So going back to the other type of Kano graph, focus on delivering all basic features to yourusers first. Then determine how to add performance or delightful features as needed. Notdelivering a basic feature well will result in users thinking your product is inadequate orbroken, no matter how great the performance or delightful features are.
  53. 53. Kano Model The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012But completing all basic requirements, and then adding something that enhancesperformance or delight, should make users satisfied and hopefully very happy with yourproduct.
  54. 54. 5. Developing business proposals The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Another way to communicate with clients and stakeholders is to find other ways to visualizethe environment of your product, and ways to make an impact. Often other types of graphsand business summaries can be helpful.
  55. 55. Percentage of Capella customers with smartphones 100 75 50 79% today 25 81% by Q2 of 2013 2012 92% by 2014+ 2013 0 2014+ Communispace research findings, October 2012 The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012For example, people often ask me how to convince a client or employer to adopt responsiveweb design. My answer is this: don’t spend a ton of time going over how it works technically.Instead, focus on communicating the demand for it. Visualize this and explain howresponsive design can be used to meet customer needs and drive more business success.This is something that people understand much better than just how responsive designworks. Because RWD is just a technique that helps you deliver more meaningful results: sitevisits and completed transactions.
  56. 56. Analysis of advisor call attempts: non-participation at the beginning of a new course • 5,300 phone call attempts per term • 21,000 phone call attempts per year • Average length of a call attempt: 1.5 minutes • 31,800 minutes (or 530 hours) per year • 13.25 weeks (or 3.3 months) per year • Equal to one full time position every four years The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Here’s another example of a slide that isn’t particularly sexy. But showing data like this canreally make you look good. Dig deeply into business processes, and show how a designenhancement can save staff time or make something easier for your clients and customers.These are the things that people want to improve; technology itself is not the end, it’s justthe method to help achieve success.
  57. 57. 6. Sharing roadmaps and release plans The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Finally, organizing your backlog into priorities should also include maintaining roadmaps andrelease schedules for your planned improvements. Because sometimes with clients orstakeholders, you encounter the opposite problem of having to sell good ideas: the problemof them wanting you to get all of your good ideas done right away. But often that’s notpossible due to resource constraints.
  58. 58. Mobile Roadmap + User Story Backlog Rev. November 12, 2012 Kristofer Layon, Mobile product manager Highest Priority Library: hours; ask a librarian; search for books Social: purpose and goals; edit profile Currently in development The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012So use a roadmap to communicate how you intend to improve your web site or app over time.Use this to explain how your planning has been thoughtful, how you’ve determined a varietyof user expectations that you would like to meet. And you are starting with the top prioritiesand working you way to other improvements in the future.
  59. 59. Mobile Roadmap + User Story Backlog Rev. November 12, 2012 Kristofer Layon, Mobile product manager Highest Priority Library: Courses: hours; ask a librarian; read assignment search for books descriptions Social: purpose and goals; edit profile Currently in development Academic plan: register for courses Course discussions: unread indicators, read/unread status Courses: messages (AKA “course email”) Courses: read the syllabus The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012I like to use product roadmaps that show what is being worked on right now in the upper leftcorner, and then add items that I plan to have the designers and developers work on next.
  60. 60. Mobile Roadmap + User Story Backlog Rev. November 12, 2012 Kristofer Layon, Mobile product manager Highest Priority Library: Courses: Notifications: hours; ask a librarian; read assignment assignment grade is search for books descriptions posted Social: Notifications: Notifications: purpose and goals; on/off, classmate replies to edit profile set event preferences discussion post Currently in development Academic plan: Notifications: Notifications: register for courses instructor replies to course grade is posted discussion post Course discussions: Notifications: Notifications: unread indicators, new course message financial aid is read/unread status awarded Courses: Notifications: Notifications: messages advising alert for non- discussion post is due (AKA “course email”) participation Contact: Notifications: Courses: share questions, ideas, advising alert for not read the syllabus problems (Get Satisfctn) being registered The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012After that, I show items that might be coming up later. Subsequent groups of user storiesmight not have as clear of a prioritization within them. Certainly, some improvements mightneed more customer validation, user experience design, or architectural work to determinewhether when they can be designed and built.
  61. 61. Mobile Roadmap + User Story Backlog Rev. November 12, 2012 Kristofer Layon, Mobile product manager Highest Priority Library: Courses: Notifications: Academic plan: Timeline: Courses: hours; ask a librarian; read assignment assignment grade is program map time-based UX for profile pics in search for books descriptions posted prospects & learners discussion posts Social: Notifications: Notifications: Task list: Offline browsing with purpose and goals; on/off, classmate replies to read, edit, and add online sync edit profile set event preferences discussion post tasks Currently in development Academic plan: Notifications: Notifications: Timeline: Notifications: register for courses instructor replies to assignment is due integrate Capella course grade is posted discussion post Facebook, Twitter Course discussions: Notifications: Notifications: Notifications: Timeline: unread indicators, new course message financial aid is advising alert for initial integrate enrollment read/unread status awarded advising appointment counselor events Courses: Notifications: Notifications: Notifications: Course discussions: messages advising alert for non- discussion post is due advising alert for replies to you (AKA “course email”) participation change in acad. plan Contact: Notifications: Notifications: Courses: Course discussions: share questions, ideas, advising alert for not task list alerts read the syllabus collect posts problems (Get Satisfctn) being registered The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012As you move into the future, find a way to visualize how the further you look into the future,the less certain the team should be about the user story backlog. As the environmentchanges, you need to be able to drop some ideas from your backlog. An idea that looks greattoday might seem silly in 6 months to a year. Roadmaps should evolve over time.
  62. 62. Mobile Roadmap + User Story Backlog Rev. November 12, 2012 Kristofer Layon, Mobile product manager Highest Priority Library: Courses: Notifications: Academic plan: Timeline: Courses: hours; ask a librarian; read assignment assignment grade is program map time-based UX for profile pics in search for books descriptions posted prospects & learners discussion posts Social: Notifications: Notifications: Task list: Offline browsing with Units: purpose and goals; on/off, classmate replies to read, edit, and add online sync intro. and objectives edit profile set event preferences discussion post tasks Currently in development Academic plan: Notifications: Notifications: Timeline: Getting started: Notifications: register for courses instructor replies to assignment is due integrate Capella introduction and course grade is posted discussion post Facebook, Twitter expectations Course discussions: Notifications: Notifications: Notifications: Timeline: Units: unread indicators, new course message financial aid is advising alert for initial integrate enrollment e-books read/unread status awarded advising appointment counselor events Courses: Notifications: Notifications: Notifications: Course discussions: messages advising alert for non- discussion post is due advising alert for Career advising replies to you (AKA “course email”) participation change in acad. plan Contact: Notifications: Notifications: Social: Courses: Course discussions: share questions, ideas, advising alert for not task list alerts participate in iGuide read the syllabus collect posts problems (Get Satisfctn) being registered community discussions The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012At the end of the roadmap should be ideas that may be purely speculative; perhaps youhaven’t even validated these at all with actual users. Because sometimes you have innovativeideas that do not come from customers, and those might be the most successful to deliver inthe future. Keep those on the roadmap, and find ways to prototype those ideas and seewhether your users will respond to them favorably.
  63. 63. Mobile Release Plan Rev. November 12, 2012 Kristofer Layon, Mobile product manager Q4  2012  /  Q1  2013 Q2  2013 Q3  2013 Q4  2013 Library Discussions NoAficaAons Write  to  discussions What:  Search  for  books  and   What:  Know  more  informa/on   What:  Opt-­‐in  for  real-­‐/me   What:  The  Bb9  rollout  should   ar/cles;  ask  a  librarian. about  discussions  (quan/ty,   no/fica/ons  re.  grades,   be  completed,  so  I  want  the   Why:  Make  it  more  convenient   unread,  etc.) replies,  fin.  aid. mobile  experience  to  be  as   to  begin  research,  and  easier   Why:  Our  discussion  UX  s/ll   Why:  This  is  the  top-­‐requested   good  as  it  can. to  contact  a  librarian  for   requires  a  lot  of  explora/on.   mobile  capability  of  our   Why:  It  will  be  cri/cal  to  not   assistance. We  can  do  beUer  to  convey   learners  aXer  a  full  discussion   have  unfinished  details  for   ac/vity. experience.   discussions. Social  Profile What:  Edit  /  add  social  profile,   Tablet  UX Course  content Other  priori.es  as  .me   including  purpose  and  goals. What:  Expand  access  to  course   What:  Read  course  syllabus   permits: Why:  Increase  opportunity  for   and  campus  content  and   and  assignment  details. •  Performance learners  to  access  their  social   interac/ons  via  tablets. Why:  Delivering  a  full        enhancements profile,  encouraging  personal   Why:  Our  tablet  use  is   discussion  experience  isn’t   •  Tasks development  and  social   increasing,  so  we  need  to  keep   enough;  we  should  be   •  Course  registraAon engagement. our  eye  on  tablet  UX  and   providing  access  to  more   deliver  more  via  browser  or   course  content.  This  starts   na/ve  apps. with  more  basics. ©  2012  Capella  Educa/on  Company  —  Confiden/al  —  Do  not  distribute The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Another format for roadmapping is to maintain a quarterly release plan. Depending on youraudience or the context of the presentation, it might be more useful to focus in more closelyon the top priorities for the next few quarters. Use a release plan to do this, and list the top 2or 3 priorities per quarter. Again, as you look further ahead, emphasize to your audience thatthis priorities might change as you learn more.
  64. 64. Minimum Viable Design: • 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. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Minimum Viable design starts with human needs and the content or services that peoplereally need. It priorities content in the hierarchy, and only adds as much visual design asnecessary. The results should aim to work on any device. If they work on a small screen, theywill work on a large screen (and can always be progressively enhanced further for desktop).
  65. 65. Product Management: • Get away from your desk – talk to people. • Get market data, then write user stories. • Prioritize, estimate, prototype solutions. • Road map product enhancements. • Be agile: iterate, deliver, evaluate, and repeat. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Web Product management is the set of tools and processes that can be used to develop theright Minimum Viable Web for your customers. They are also used to develop strongrelationships with everyone involved: customers, stakeholders, designers, and developers. It’sproduct management’s job to make everyone understand your web product’s direction.
  66. 66. http://www.wengerna.com/ The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012By using market data to inform usefulness, setting priorities, and learning how to say no tothings that users don’t really need, you can avoid designing a mobile app or website thatends up looking like this: trying to do everything for everyone that, in the process, ends upbeing too cumbersome to make anyone happy.
  67. 67. http://pragmaticmarketing.com/ The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012Most importantly, by focusing on customer expectations and user stories, your designers anddevelopers can avoid falling into the trap of thinking that their insight, creativity, andtechnical expertise are enough to develop successful solutions. Because in the end, youropinions are not as important as your customers’. And getting something done well isn’t thetrue measure of success; it’s whether what you’ve designed and delivered is meeting or evenexceeding expectations.
  68. 68. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012If you are interested in approaching online product design from a Minimum Viable approach,you might want to check out an article that I wrote in July 2012 for A List Apart, “ProductManagement for the Web”.
  69. 69. The Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012I also wrote a book for Peachpit Press last year entitled “Mobilizing Web Sites”. It starts withsuggestions that you can follow to support your content, navigation, readability, encouragingyou to get into mobile design by focusing on your users’ most basic needs first. Writing thisbook is what got me focused on product management and the idea of the minimum viableweb; perhaps it can help you make that transition as well.
  70. 70. Herzlichen Dank! @klayon kris.layon@gmail.com kristoferlayon.comThe Minimum Viable Web | Kristofer Layon | @klayon | MobX — 17.Nov.2012

×