Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Under the Knife: Plastic Surgery for Classic Software

276 views

Published on

How can you tackle the process of updating a mature interface? In this presentation, I will discuss our team’s approach to quickly transform the look and feel of GoToMeeting, GoToWebinar and GoToTraining for Mac over a period of four months. Learn how we kept our project on track by saying no to all but the most essential improvements, and how we incorporated design feedback without falling prey to out-of-scope requirements. I'll explain my design process and how I supported the team in my role as scrum master. You will see visual design changes that were tried and discarded, and most importantly, what impact the visual changes had on our user community. This talk will cover what can realistically be done in a short period of time to improve your interface without overcommitting, and where to go after the first release.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Under the Knife: Plastic Surgery for Classic Software

  1. 1. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  2. 2. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Jessamyn Miller
  3. 3. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  4. 4. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  5. 5. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  6. 6. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  7. 7. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 GoToMeeting Windows Before After
  8. 8. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  9. 9. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 A real tweet
  10. 10. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 GoToMeeting Mac July 2015
  11. 11. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Windows Mac
  12. 12. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Windows Mac
  13. 13. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Windows Mac
  14. 14. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Windows Mac
  15. 15. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Mac + Windows = baby
  16. 16. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Timeline • July to October 2015 • Engineering ships by Oct. 30 • Customers receive Nov. 15 Ship it!
  17. 17. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Project charter • Mission • Scope • Epic
  18. 18. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Mission For ___the ___ is ___ that unlike ___will ___.
  19. 19. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Mission “For Mac users who feel ignored and/ or are using Windows Refresh the Modern Mac version is an improvement of updated interface that unlike the current Mac experience will help drive sales, increase active use and improve customer satisfaction.”
  20. 20. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Set project scope Everything we want to do What we can handle
  21. 21. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Everything we wanted to do • Auto-layout (faster localization and easier de-coupling) • Communications plan for Mac upgrade to Refresh • Communications plan for Mac 10.7 deprecation • Discontinue support for Mac 10.7 (advocate to upgrade to higher build or offer instant join) • Join flow changes for mac 10.6-7 to host in browser (to allow deprecated users to continue to organize meetings) • SPIKE to investigate if 10.7 users can use the same build • Support Mac 10.11 El Capitan • Control panel changes for G2MWT: • New colors to match rest of look and feel • New images to match rest of look and feel • Add Sightboard support • Add Mac outlook plugin install links (once integration team builds plugin) • support Retina display • Deprecate OS 10.8 • Re-size panels • Dragging out panels • Add drawing tools • Active speaker experience LITE • Dialogs and tips • Recording manager • Pre-session UI • Audience view • Video sharing • Windows reskin for G2WT
  22. 22. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 IN Colors Icons Buttons Tech debt OUT Text changes Layout changes New features
  23. 23. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Make yourself say “This project will be successful when…” “This project will successful without…”
  24. 24. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Our epic in JIRA
  25. 25. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Assets
  26. 26. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 from Mac assets wiki filename old asset old size new asset new size description new asset @2x new size @2x
  27. 27. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 old new new@2x
  28. 28. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Before After
  29. 29. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Before After
  30. 30. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 After Before
  31. 31. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  32. 32. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Text
  33. 33. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 9pt 10pt 11pt 12pt Before
  34. 34. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 12 pt system font 10.9 Mavericks Lucida Grande 10.10 Yosemite Helvetica Neue 10.11 El Capitan SF UI Text
  35. 35. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 12pt 11pt 12pt 12pt After
  36. 36. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Before After
  37. 37. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Before After
  38. 38. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Before After
  39. 39. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Color
  40. 40. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Colors sampled from GoToMeeting Windows desktop
  41. 41. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Restricted palette • Background colors • Neutral colors • Action colors • Normal/hover/press pattern • Borders • Text colors
  42. 42. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  43. 43. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  44. 44. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  45. 45. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  46. 46. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 feather weight
  47. 47. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 dark ’n stormy
  48. 48. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 lady grey
  49. 49. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Orangina
  50. 50. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  51. 51. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  52. 52. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  53. 53. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  54. 54. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 July 24
  55. 55. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 July 28
  56. 56. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 August 20
  57. 57. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 August 25
  58. 58. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 August 28
  59. 59. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 September 14 FINAL
  60. 60. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 yes no Disabled state
  61. 61. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 yes no Background
  62. 62. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 yes no Screensharing icon
  63. 63. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Button size yes no
  64. 64. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 “do no harm”
  65. 65. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Current New
  66. 66. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Current New
  67. 67. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Current New
  68. 68. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Current New
  69. 69. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Current New
  70. 70. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Current New
  71. 71. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Current New
  72. 72. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 style guide
  73. 73. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  74. 74. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  75. 75. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  76. 76. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  77. 77. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  78. 78. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  79. 79. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  80. 80. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Classic Mockup Release
  81. 81. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Grab Tab
  82. 82. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Screensharing
  83. 83. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Attendees
  84. 84. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Audio
  85. 85. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Webcams
  86. 86. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Chat
  87. 87. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Before
  88. 88. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 After
  89. 89. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016
  90. 90. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Jun-16 Jul-16 Aug-16 Sep-16 Oct-16 Nov-16 Dec-16 Jan-17 Feb-17 M ar-17 Apr-17 M ay-17 NPS Customer satisfaction New look and feel
  91. 91. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 Customer comments I liked the new interface looks! I like the new interface (on Mac). Good interface, I have a lot of experience with the platform I like the UI improvements to the meeting control panel on Mac. Very easy to use and interface is clean. Flawless interface Nice improvements since I used it last year
  92. 92. Session Survey: http://www.uxpa2016.org/sessionsurvey?sessionid=230 Conference Survey: http://www.uxpa2016.org/survey www.uxpa2016.org #UXPA2016 You can do this • Define a mission and set a scope • Update images • Update colors • Clean up text

×