Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Designing for 400 million people
Similar to Designing for 400 million people (20)
Recently uploaded
Recently uploaded (20)
Designing for 400 million people
- 1. Designing for 200 450 million people SuperConf 2011, Miami Beach, FL
- 2. @ckj
- 3. DISQUS
- 4. 3 main points of interaction
- 8. lean startup
- 9. lean startup • lean production • continuous deployment • rapid learning
- 10. Where does UX fit in?
- 11. User Experience: “How a person feels when interacting with a system" • Utility • Ease of use • Efficiency
- 12. Where does UX fit in?
- 13. Lean UX
- 14. Lean UX: Guiding Principles
- 15. Lean UX: Guiding Principles • Lean, iterative, fast
- 16. Lean UX: Guiding Principles • Lean, iterative, fast • Product focused
- 17. Lean UX: Guiding Principles • Lean, iterative, fast • Product focused • Engineers + Designers = Product Team
- 18. Lean UX: Guiding Principles • Lean, iterative, fast • Product focused • Engineers + Designers = Product Team • Continuos improvement through design
- 20. Pain and Problems = opportunity.
- 21. Probletunities?
- 23. Design to the rescue
- 24. How are pain points discovered? • Customer interviews • Ad hoc user-testing • Active customer support
- 25. Nothing beats being your own customer.
- 26. Three UX Hacks
- 29. "Really early on I decided to focus only on the product design and would forgo any time spent on things like visual design and, to some extent, branding [...] In hindsight, this turned out to be a good call because it really focused the product design and avoided common distractions." -Rebecca Cox, Quora.com
- 30. Quora 1.0
- 32. Luke W. - Mobile First
- 34. !"#$ %&&'()* +*,*-* .&"/
- 36. !"" #$%&'( Recent Activity
- 38. Constraints • Rapidly add or takeaway with less consequences • Removing common distractions allows us to hustle • Increase the likelihood of completing a project
- 40. Feature Switches
- 41. Problem
- 46. Environment-agnostic design • Inherits font-size, color, family & link colors • Uses alpha-transparent shades of gray to “absorb” background color and add depth • Uses icons and imagery in a way that compliments your webpage
- 47. @font-face
- 50. Feature Switches
- 51. 3. Design for delight.
- 55. thanks ;) Early Quora design notes: http://www.artypapers.com/ap.log/thread.php?346 Mobile first: http://www.artypapers.com/ap.log/thread.php?346 Lean UX: http://luxr.posterous.com/blog Feature switches: http://blog.disqus.com/post/789540337/partial-deployment- Disqus: http://52weeksofux.com/post/531355592/design-for-delight twitter.com/ckj • chrisjennings.com
Editor's Notes
- \n
- • Grew up in Northeast Tennessee\n• First design job was at Agencynet in Fort Lauderdale\n• First startup was Scrapblog in Miami.\n• Now Director of UX at Disqus\n• Small world: Can trace my career back to a single comment on Noah Kagan's blog, okdork.com.\n
- • Distributed comment network that powers conversations on sites like CNN, Techcrunch, Engadget, Adult Swim\n• 400 Million users\n• 16 employees\n• 1 designer\n\n
- \n
- \n
- \n
- \n
- by happenstance\n
- Set of processes that help us:\n--\n--\nAddress and solve problems in less time, with less waste. (time, money)\n
- When I started at disqus\n
- • Can be as simple as sign up form or as far reaching as a business card\n
- \n
- Through a process that the some are calling “lean ux” movement.\nNothing new, just the opportunity for designers to create value in the context of a lean startup\n
- \n
- \n
- \n
- \n
- Main interaction points, sub-interaction points\nAd hoc user experience score\nFiguring out how your customers feel when using your product gives you a roadmap to improve your business.\n\n
- \n
- Not gonna lie - stole this from wednesday’s episode of “the middle”\n
- When looking at problems as opportunities, it becomes clear how to prioritize development.\n• What to improve next is painfully obvious\n\n
- • By addressing these observations with design, we can change our company.\n• Reduce our risks by positioning ourselves to succeed in our market.\n
- • just ask! explain customer development\n• steve krug. \n• giannii, responding on twitter. not only do we not want to lose a customer, but we can aggregate pain and use it to prioritize\n
- \n
- Things that have worked for us... \n
- \n
- \n
- • In her Early Quora Design Notes, Rebecca Cox explains how she purposefully spent little energy on visual design and branding.\n\n• Instead of trying to make Quora visually pleasing, Rebecca focused on usefulness.\n
- Visual design added ONLY to provide utility and to encourage certain primary interactions.\n• not having visual design as a crutch forces you to show value through other means... in this case usefulness\n
- • Branding, visual design compliments the interface after value is realized\n\n\n\n
- • a trick that simply forces you to focus\n
- Feels a bit cluttered compared to the rest of our site\n• felt that there could be a better way to use the space\n
- • Limited real estate forces us to figure out what is or isn’t essential\n• Core functionality: view and search comments, as well as approve, delete or mark spam. \n• We’re less tempted to add unnecessary actions -- there’s just no room for anything excessive.\n\n• End result: Product focused on key goals and tasks\n\n
- • Limited real estate forces us to figure out what is or isn’t essential\n• Core functionality: view and search comments, as well as approve, delete or mark spam. \n• We’re less tempted to add unnecessary actions -- there’s just no room for anything excessive.\n\n• End result: Product focused on key goals and tasks\n\n
- • Fun starts when you realize that you can get away with the same amount of information on let’s say an ipad \n• Main areas easily map, core goals and tasks are still primary focus... detail view, that would have been revealed on a tap, is now shown in a sidebar to the right.\n\n\n\n\n
- Finally, we can imagine how this experience can exist on the disqus website.\nBonus: with the right planning, we can use responsive design techniques to use the same markup for each experience\n\n\n\n
- --\n--\n• Whether that’s: On-time, within a budget, or even at all.\n
- A simple way to turn off and on functionality for a given set of users\n• percentage (new twitter)\n• range • specific user\n• set of partners, etc\n
- Allows us to roll out functionality selectively...\n• Ourselves\n• Early adopters\n• key supporting blogs... techcrunch, avc\n
- One constraint that is unique to Disqus embed is that our default themes are required to be environment agnostic.\n• Out of the box the embed should be usable in any setting.\n• This means we have to be clever in the way we inherit color and render imagery\n
- 90% of the time\n• the final 10% consists of an endless range of possibilities\n
- \n\nHere’s the embed on a Dark background...\n
- ... on a green.\n
- \n
- So we came up with what we’re calling\n--\n--\nHow could our imagery compliment an environment?\n
- in retrospect the answer was pretty obvious.\n
- Meet Disqus-Regular - a web font we created to solve the environment-agnostic design problem.\n\n
- • Scales with your font size\n• Makes it possible for us inherit a page’s font-color\n• and at 4kb it keeps our load time reasonable\n
- So going back to our feature switches, We were able to enable the new design for: first Admins, partners, and finally these edge cases\n• this hack allows us to test user experience incrementally in a real world setting\n
- Whenever you have the opportunity... design for delight. \n\n \n
- Disqus redesign, last summer\n• soft facade\n• wanted to connect.\n• easter eggs\n\n
- • plays off a well known meme\n• all over twitter and reddit\n\n
- Tumblr... seen all over reddit\nability to turn a pissed off customer into an evangelist for your product\n\n• essentially ux, lean ux is marketing... great experiences market themselves\n\n
- \n