Project

General

Profile

Feature #3660

ZenDesk Placement

Added by Matt Gold over 4 years ago. Updated over 4 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
Layout
Target version:
Start date:
2014-11-14
Due date:
% Done:

0%

Estimated time:

Description

Let's use this ticket to talk about where we should provide access to ZenDesk email so that people can contact the community team. Assigning to Samantha for now, but Chris and Boone, please pipe in.

Help-Mockup.jpg (16.7 KB) Help-Mockup.jpg Samantha Raddatz, 2015-01-29 05:30 PM
ZenDesk Contact Widget.png (22.5 KB) ZenDesk Contact Widget.png Samantha Raddatz, 2015-01-29 05:30 PM
zendesk.gif (654 KB) zendesk.gif Raymond Hoh, 2015-02-10 11:53 AM
Help_pop up 1.jpg (357 KB) Help_pop up 1.jpg Samantha Raddatz, 2015-02-17 11:41 AM
Help_pop up 2.jpg (324 KB) Help_pop up 2.jpg Samantha Raddatz, 2015-02-17 11:41 AM
Screen Shot 2015-02-25 at 12.12.12 PM.png (45.3 KB) Screen Shot 2015-02-25 at 12.12.12 PM.png Matt Gold, 2015-02-25 12:15 PM

History

#1 Updated by Matt Gold over 4 years ago

I've now purchased a ZenDesk description, so we are ready to go as soon as we'd like. As a first step, I will set up email integration such that email sent to is forward to ZenDesk.

#2 Updated by Boone Gorges over 4 years ago

  • Category name set to Layout
  • Target version set to 1.8

I'm putting this into the 1.8 milestone for triaging purposes, but we can launch this sooner if we have details about how we'd like it implemented.

#3 Updated by Samantha Raddatz over 4 years ago

Location
The goal of this widget it to have it appear on every page within the Commons, both within the "front-end" areas and Wordpress dashboard, and to have it be persistent without being annoying. Since we already have the 'Follow Site' and 'Followed Sites' buttons sticking to the bottom right of the window I would suggest that the help widget live in the top right of the page, within the tool-bar, to the immediate left of the profile/notifications (see 'Help Mockup' attached).

Content
ZenDesk has an option to host a Knowledge Base with them of all our most asked questions. Assuming we do not want to move all of our existing help articles into there, I propose that clicking on the help button will reveal a widget (or pop-up, not sure what to call it) with two options:
  1. Visit Our Help Page
  2. Send Us a Message

Visit Our Help Page would lead to http://help.commons.gc.cuny.edu/.

Send Us a Message would reveal an in-widget contact form. See 'ZenDesk Contact Widget' attached for an example of this, which I found on their support site.
After a message is sent, the user should receive a confirmation message and some kind of idea of how quickly they can expect a response.

I can create more mock-ups for all these pieces and consider the language a bit more prior to coding, but wanted to get this out there for feedback.

A Note
All this being said, I do think that narrowing down our help documentation, and considering moving it into something like the Knowledge Base, should be a consideration for the redesign.

#4 Updated by Matt Gold over 4 years ago

Thanks, Samantha. A few thoughts:

  • I really like the placement of Help in the top nav bar, especially as your recent UX testing showed that people use that navigation often. I like it better than the follow sites space, in fact
  • I like the option of visiting the help page or send us a message
  • I'm not a fan of "knowledge bases" which seem very much like Microsoft horrible help systems to me, but perhaps I have an outdated idea of what a Knowledge Base is. In any case, I feel strongly that the Help system should be on the Commons rather than on a third-party site
  • I do agree, however, that we need to streamline our help options. Maybe a target for usability testing?
  • Your mockups look good to me. Are we able to customize the form at all? Can we change "Leave us a message" to "Contact our support team"? Can we add a Commons logo?

Thanks for your work on this.

#5 Updated by Samantha Raddatz over 4 years ago

  • Assignee changed from Samantha Raddatz to Raymond Hoh

I'm not a fan of "knowledge bases" which seem very much like Microsoft horrible help systems to me, but perhaps I have an outdated idea of what a Knowledge Base is. In any case, I feel strongly that the Help system should be on the Commons rather than on a third-party site

Totally understood. The advantage of the Knowledge Base that ZenDesk provides is that you can search it within their widget, but we can accomplish something similar in other ways within the Commons.

I do agree, however, that we need to streamline our help options. Maybe a target for usability testing?

There was some Help feedback from the previous testing along the lines of 'I can't find the help section when I need it' or 'I can't find the information I need in the help section'. I don't think we would find out much more from testing specific to the help section as it is now, but instead should reorganize it and then test it. To start reorganizing it would be nice to know what questions come up the most often and what pages of the current help section are most visited.

Your mockups look good to me. Are we able to customize the form at all? Can we change "Leave us a message" to "Contact our support team"? Can we add a Commons logo?

I'm not sure how customizable the ZenDesk form is, so I'm passing this ticket over to Ray for input on that. It may be something we have to recreate ourselves. Ray, the info I've found on the widget code can be found here.

#6 Updated by Raymond Hoh over 4 years ago

Can someone pass me a login for ZenDesk so I can see what can be done?

#7 Updated by Matt Gold over 4 years ago

Thanks, Ray -- just sent info. Site is https://cunycommons.zendesk.com

#8 Updated by Raymond Hoh over 4 years ago

Just looked into this and ZenDesk does have an API for their Web Widget.

Based on Samantha's spec, I've put together a preliminary version on cdev for testing.

Some notes:
  • The overlay is custom and we can modify the content and look inside the overlay.
  • We cannot change any strings in the ZenDesk Web Widget.
  • After opening the ZenDesk Web Widget and closing it, ZenDesk's Help button is still displayed in the bottom-right corner. There doesn't seem to be an API function to determine when the ZenDesk Web Widget is closed, so I cannot hide their button immediately.

#9 Updated by Samantha Raddatz over 4 years ago

Thanks for putting this together on cdev, Ray!

It would be great if all of the events in this task took place in the same pop-up rather than jumping around.

With that in mind, and considering that the green ZenDesk help button wont hide immediately, is it worth creating our own form that forwards to our ZenDesk inbox rather than using their widget API? I think the style of their pop-up is great, but it's a little jarring and confusing to jump from pop-up to pop-up.

Let me know if mock-ups of each step of the user flow would be helpful before creating our own version of this.

#10 Updated by Raymond Hoh over 4 years ago

Yeah, it's unfortunate about ZenDesk's widget API.

We might want to try out a ZenDesk WordPress plugin instead:
https://wordpress.org/plugins/zendesk/

I'll check it out and see if it's suitable for our needs and report back.

#11 Updated by Matt Gold over 4 years ago

Thanks, Ray, and thanks, Sam.

#12 Updated by Raymond Hoh over 4 years ago

So the ZenDesk plugin let me know that ZenDesk offers another API called the Feedback Tab. It's deprecated in favor of the new Web Widget API, but the Feedback Tab gives us more customization.

I've attached a GIF of the Feedback Tab in action on cdev. As you can see, the title of the Feedback Form can be customizable and we can add in custom CSS such as the logo.

Let me know what you think.

#13 Updated by Matt Gold over 4 years ago

Looks sweet to me. two issues:

1. Placement of the Help tab when the user is logged in;

2. whether the deprecated status presents a problem

#14 Updated by Raymond Hoh over 4 years ago

1. What's wrong with the Help tab when a user is logged in? Do we need more spacing between the Help tab and notification bubble?

2. I don't think the deprecated status presents a problem:
https://support.zendesk.com/hc/en-us/articles/203661516-Setting-up-your-Feedback-Tab-channel

We are still able to use it.

#15 Updated by Matt Gold over 4 years ago

Raymond Hoh wrote:

1. What's wrong with the Help tab when a user is logged in? Do we need more spacing between the Help tab and notification bubble?

It's just that our nav bar typically shows the user avatar/nav menu in that spot for logged-in users (or a login widget for non-logged-in users), and I don't see that on your prototype.

Glad to hear that the deprecation doesn't present a problem!

#16 Updated by Raymond Hoh over 4 years ago

It's just that our nav bar typically shows the user avatar/nav menu in that spot for logged-in users (or a login widget for non-logged-in users), and I don't see that on your prototype.

The GIF cut off the right-hand side and also only shows what happens when a non-logged-in user is viewing the site.

Go to cdev to test out both non-logged-in and logged-in states :)

#17 Updated by Matt Gold over 4 years ago

Aha! Sorry about this. This is great -- just needs some styling.

#18 Updated by Samantha Raddatz over 4 years ago

Love it!

I'm thinking the full-overlay might be a bit inhibiting if someone is trying to write a detailed message about their problem (which might be happening on the screen behind the pop-up). Would it be very difficult to make the pop-up work more similarly to how the original ZenDesk one did? We can make it work either way, but that would be ideal. See mock-ups attached.

Similarly, it would probably be helpful if the Help page opened in another tab/window, so that their current page isn't lost while they go looking for the answer.

#19 Updated by Matt Gold over 4 years ago

These mockups look great, Sam -- thanks very much!

#20 Updated by Raymond Hoh over 4 years ago

Thanks for the mockups, Samantha. They look really good!

Just taking a first glance at the Zenbox modal and it appears your changes are possible. Will experiment a bit more and report back.

#21 Updated by Raymond Hoh over 4 years ago

cdev is updated to match Samantha's mockups.

Click on the "Help" icon in the WP admin bar to test. I still have to tweak the CSS to match various responsive screen sizes, but I think we're close on this one.

#22 Updated by Samantha Raddatz over 4 years ago

Awesome, thank you, Ray! Definitely very, very close.

The only thing I notice is that it should also appear on any subdomains, like http://help.commons.gc.cuny.edu/, that way people will know it's always there when they need it, and they can still message if they aren't able to find the answer in the help section.

#23 Updated by Raymond Hoh over 4 years ago

It should appear on subdomains.

Here's a test:
http://testscribd.cdev.gc.cuny.edu/

I'll have to tweak the CSS so the font size is consistent across different sites.

#24 Updated by Matt Gold over 4 years ago

Thanks, Ray and Samantha -- looks great. One small change -- the CAC logo looks cut off at the bottom. A screenshot of what I'm seeing is attached.

#25 Updated by Raymond Hoh over 4 years ago

  • Status changed from Assigned to Resolved

I've added the "Help" menu item in commit fa0b478.

I've included all requested changes and have also made responsive adjustments. The ZenDesk feedback modal does not show up if the width of the screen size is less than 643px. Instead, it fallsback to the Commons email link.

Changes are live on cdev for testing as well.

Also available in: Atom PDF