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.

Google Optimize: How Builds Great Government UX


Published on

Hear how Mediacurrent teams with on a user testing strategy leveraging Drupal 8 and Google Optimize.

Watch how to deliver a constituent experience that is discoverable, accessible, and truly “for the people, by the people.” Follow along with our process. Learn tips to user test your way to better website UX.

You'll learn
- Our approach to testing and gathering user feedback
- The A/B testing variants we used to steer site navigation and layout
- Deep dive into testing with Google Optimize

Watch the recording:

Published in: Government & Nonprofit
  • I’ve personally never heard of companies who can produce a paper for you until word got around among my college groupmates. My professor asked me to write a research paper based on a field I have no idea about. My research skills are also very poor. So, I thought I’d give it a try. I chose a writer who matched my writing style and fulfilled every requirement I proposed. I turned my paper in and I actually got a good grade. I highly recommend ⇒ ⇐
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! I have searched hard to find a reliable and best research paper writing service and finally i got a good option for my needs as ⇒ ⇐
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Google Optimize: How Builds Great Government UX

  1. 1. Google Optimize: How Builds Great Government UX September 18, 2019 @Mediacurrent @MassGovDigital
  2. 2. | 2 Speakers Clair Smith Senior Front End Developer Joe Galluccio Product Manager
  3. 3. | 3 About Mediacurrent
  4. 4. About Mediacurrent Mediacurrent is a full-service digital agency that implements world class open source software development, strategy, and design to achieve defined goals for enterprise organizations seeking a better return on investment. | 4
  5. 5. | 5 Mission Statement Leverage the best technology and information to make people’s digital interactions with government fast, easy, and wicked awesome.
  6. 6. | 6 Agenda I. Where This All Started II. UX philosophy III. User Feedback: What We Learned IV. Why Google Optimize A/B Testing? V. Testing process and Results VI. The Google Optimize Experiment Containers VII. Lessons Learned
  7. 7. | 7 THANKS GA TEAM! | 7
  8. 8. | 8 UX Philosophy: You can’t manage, much less improve, what you can’t measure. Website usage User verbatim feedback Application flow Cross-domain Call center In-person wait time
  9. 9. | 9 USER FEEDBACK
  11. 11. | 11 GOOGLE OPTIMIZE ● Data-informed ● Help developers and content specialists gather user feedback
  12. 12. | 12 A/B Testing Goals ● Test menu variations ● Measure user interaction with a new contextual pages menu and page relationship indicator links
  13. 13. Test Method, Measurement & Success Criteria Build Google Optimize Experiments, with up to 4 variations to test each hypothesis ● Testing will be done with randomly selected visitors being sent to one of the four variants. ● Test pages will be manually selected and edited using the Google Optimize administration and interface panels. ● The percent of visitors that clicked a link in the navigation ● The percent of yes/no votes of each test grouping on at least one of the test pages. ● The number of pages per session / session length for people in each test group. Plan Method Measure | 13
  14. 14. | 14 A/B Testing Experiment 1 STRATEGY ● Contextual links or global navigation? ● Would it be equally effective to hide the global navigation so that users would use the site search function? ● Which is more engaging: Contextual links pointing to pages within the same service, or to pages related to the service? ● Would test variants provide a better overall experience?
  15. 15. | 15 Experiment 1
  16. 16. | 16 Moderated User Testing To determine which of these three types of navigation offers users the most intuitive and efficient navigation experience. ● Global Navigation (current site navigation) ● Contextual Navigation (proposed navigation) ● No navigation (which would instead push users into using in-page links and site search)
  17. 17. | 17 Success Criteria We need to see a benefit to the user based on opinions — did the links prove to be useful? ↓ time on site ↓ number of pages per session ↑ increase in satisfaction. Simple engagement isn’t enough.
  18. 18. | 18 User Interviews Each scenario began with a story of the journey that brought the user to the starting point and an additional task to complete that would require them to move laterally through the site toward an intended goal. For example: ● Starting point: ● Story: You’ve been researching how to file your tax return, and have just finished reading this page. ● Task: Now you want to file your taxes. Each interview included 3 scenarios, consisting of a unique topic and navigation.
  19. 19. | 19 Follow Up Questions ➔ Could you say which scenario was easiest to navigate, and why? ➔ Can you name any significant differences between the three scenarios? ➔ Could you say whether any of the three scenarios was easy or difficult to navigate, and why?
  20. 20. | 20 Success Criteria We considered three factors when determining which of these navigations was the most efficient and intuitive: ● Which took users the shortest amount of time to reach their goal? ○ We tracked the time of each test and produced an average for each ● Did users find one scenario significantly easier to navigate? ○ We recorded user answers and documented trends ● Did the interviewer find an observable difference in the ease with which users navigated the different scenarios? ○ Interviewers recorder observations and documented trends
  21. 21. | 21 Global Nav Vs. Hamburger Menu
  22. 22. | 22 A/B Testing Experiment 2 STRATEGY ● Would moving the Main Navigation off screen have a negative impact? ● Would updating the page relationship indicators help users navigate within the website?
  23. 23. | 23 Default Menu
  24. 24. | 24 Testing Variation
  25. 25. | 25 Global Navigation Change H: Hiding the global navigation on all pages except the home page will have minimal negative impact to the user experience. G: Discover if hiding the navigation in a “hamburger menu” will have a negative impact on user experience. Hypotheses & Goals Relationship Indicator Change H: Making the relationship indicator more visible to users visiting a service family will increase the likelihood that they use it to navigate within the website. G: Discover if moving the relationship indicator helps users navigate within the website when they need to find additional content related to the current page.
  26. 26. | 26 Testing Results 1month A/B tests were conducted over the course of a month. 3.5m Total visitors to test pages. No negative impact on action rates No negative impact on session duration or pages per session. 44%One of the variations saw a big increase in user engagement and clicks No negative impact on overall satisfaction
  27. 27. | 27 ● We proved the changes have no harmful impact on site outcomes. ● Observations from qualitative user testing and research have suggested that these improvements will be helpful to users. The A/B test allowed us to manage the risk of releasing this change to a large audience. ● We are validating this by examining whether these changes have had a measurable impact for specific groups of users or in specific areas of Were We Successful?
  28. 28. | 28 So, how did we get there?
  29. 29. | 29 Getting Started 1. No mobile 2. Browser support for CSS3 selectors required Get Google Chrome & Optimize extension Note:
  30. 30. | 30 The Optimize Editor
  31. 31. | 31 The Optimize Editor
  32. 32. | 32 Updates made in the editor are added after the DOM originally loads. This can cause race conditions with Javascript widgets and remove handlers and event triggers on elements after they are reloaded. THINK AHEAD
  33. 33. | 33 ORDER COUNTS
  34. 34. | 34 Changing the CSS The DOM sections can be styled using either the options modal for each element or by writing CSS into the text window provided.
  35. 35. | 35 Changing the JS Vanilla Javascript can also be written into the editor.
  36. 36. | 36 CONCLUSION
  37. 37. @Mediacurrent Q&A