Junior Form Function and Class 2017: Design for Change

This is an outline of my talk. You can access relevant links and references that I mention in my slides.

Download a PDF of the talk (91mb). (EDIT: Link works now! I’ll compress this later!)

  1. Hello.
  2. Design for Change.
  3. Follow my talk online (great, you’re already here!)
  4. I’m Camille Zapata. I’m a (digital) Product Designer. I design. I code.
  5. I work at Huge, Singapore.
  6. Today’s message: Designing for the future means we need to change old habits.
  7. Start of my story: The design brief. [Image source.]
  8. “That doesn’t look like a website.” [Image source.]
  9. What is the problem? [Image source.]
  10. What does a website look like? [Image source.]
  11. 1865 New York Times.
  12. (Same as above).
  13. Other newspapers from the 1800’s. [Image source 1. Image source 2.]
  14. 1992, by Mark Potts, using Hypercard software. Source: A Vision for the Future of Newspapers 20 Years Ago
  15. NYT 2001 via the Wayback Machine.
  16. NYT 2008 via the Wayback Machine.
  17. NYT today.
  18. Relatively unchanged.
  19. Plotter from 1982. Source: Pauli Olavi Ojala, Sketch is not a UX design tool.
  20. Adobe Illustrator from 2000. [Image source.]
  21. (Same as above).
  22. Illustrator STILL looks the same. Now with a dark theme. [Image source.]
  23. [Image source 1. Image source 2. Image source 3.]
  24. Willy Fleckhaus’ 12 column grid, 1959, a grid adapted for large format pages. Source: A Guide to Grids for Media and Bloggers.
  25. NYT’s web grid. Source: Grid Essay.
  26. “We tend to use new media first to replicate the products produced by old media.” — Robert Kaiser. Source: A Vision for the Future of Newspapers 20 Years Ago
  27. [Image source.]
  28. Mental Models
  29. What we know, or think we know.
  30. Video: Mental models of a ‘browser’, 2000, Interview by Google.
  31. Technology. Newspapers were limited to certain column widths because the metal blocks for individual letters in the machines would fly out all over the place if they were too long. [Source: Quora.]
  32. IE6 crippled web development in early 2000’s. [Image source.]
  33. Mobile average speed in SG vs VN. Source: wearesocial’s Digital in 2017: Global Overview
  34. Business. Source: History of Graphic Design: Broadsheet.
  35. Science and Environment. [Image source.]
  36. F-Pattern and Z-Pattern. Source: 3 Design Layouts. [Image source.]
  37. Jakob Nielsen’s Law of the Internet User Experience: “Users spend most of their time on websites other than yours. Thus a big part of customers’ mental models of your site will be influenced by information gleaned from other sites.” Source: End of Web Design.
  38. 87% time spent in apps compared to browsers. Source: iab. Digital Usage Trends: Mid Year 2016. (Note: Flurry did their own research in 2015 and from their data, this number is at 90%. I decided to choose the most recent data I found for the talk.)
  39. A big chunk of your customers’ time is spent on apps. Their mental model of your site is now being shaped by their experiences in apps.
  40. Snapchat Map. Source: Snapchat Map.
  41. iOS 10 Map. Source: Snapchat Map.
  42. Forbes’ beta mobile site.
  43. Sites -> Apps -> ???
  44. People spend their time in experiences other than yours. Their mental models of your company will be influenced by other experiences.
  45. Amazon Echo, Google Home, Apple HomePod. [Image source 1. Image source 2. Image source 3.]
  46. Outdated mental models influence what we design, and how we design it.
  47. Mental models based on: (1) How we think technology works. (2) How we think businesses work. (3) The science & environment that we think we know.
  48. People update their mental models.
  49. Technology in a UI level.
  50. Technology in new media formats.
  51. Technology through new channels and platforms. Example: News told by Philip DeFranco.
  52. AI / Algorithms influence our mental models and change our behaviors too.
  53. Major outside force + Timeless human need = Transformation
  54. We need to change.
  55. Summary. Change: (1) The way we work. (2) The way we think. (3) The tools we use.
  56. Change: The way we think.
  57. “The overall experience of a person’s interaction with a company, its services, and its products.” — Donald Norman, pioneer of UX thinking.
  58. “Think younger.” — Tony Fadell, founder of Nest Thermostat.
  59. Watch the full video.
  60. Problem mindset.
  61. Example: Cartier on WeChat. Sources: Cartier talks about cracking China with WeChat and Digital Luxury – How Cartier is leveraging China’s millennials with WeChat.
  62. Summary. Adjust our thinking: (1) Design as the overall experience. (2) Think younger. (3) Problem Mindset.
  63. Change: the way we work.
  64. Build for: (1) Content. (2) Context. (3) Systems.
  65. Content.
  66. Context. Content is only useful when presented in the right context.
  67. Example: Forbes on mobile.
  68. Systems. Coherent and absolute integration of experiences across different channels. [Image source. Also a good read.]
  69. Example: The reminder you just told Alexa would maybe appear on your Evernote in that shared notebook that’s shared on a friend’s device. [Icon credits: Madebyoliver and Freepik.]
  70. Tools we use. [Image source. Also a good read, referenced in previous slides.]
  71. Tools is solutioning.
  72. Tools that design for: (1) How it looks like. (2) How it works. (3) How it performs.
  73. How we do things change, but people’s needs stay the same.
  74. We need to change old habits.