Improving Zendesk Onboarding & Support
GROWTH AND MONETIZATION · PRODUCT DESIGN · USABILITY TESTING
INTRODUCTION
During summer 2022, I was a product design intern on the Growth and Monetization team at Zendesk (which builds products related to customer support, sales, and other customer communications). I got to lead and support multiple design projects, creating prototypes for launch in Zendesk's initial customer onboarding (ICO) and buy phases.
KEY SKILLS
Cross-functional collaboration, interaction design, contributing to design system, accessibility
THE TEAM
Initial Customer Onboarding (ICO) design team
TIMELINE
June - Aug, 2022
PROJECT SCOPE
Zendesk Support Product
Prior research indicated that users find Zendesk resources too lengthy and overwhelming and therefore users feel lost or turn to third-party resources.
INITIAL CONTEXT
What's the current user experience?
Imagine you manage a customer service team using Zendesk for the first time and want some guidance. When searching up keywords in the 'onboarding' (help) panel within the Admin Center, you are taken directly to a help center article in a new tab from the search results.
The goal of this project was to take the articles and place them into the panel itself for a more seamless reading experience.
My role
THE DESIGN PROBLEM
How might we bring Help Center articles into the onboarding panel to make the process of finding resources less overwhelming?
DISCOVERY
Working with cross-functional partners
During this discovery phase, I set up meetings with different stakeholders to scope down on what I needed to accomplish.
-
With engineering and PMs, I talked through which transferred content from the Help Center were free to adjust to a narrower panel view, and which ones were not up for styling. This became an ongoing process throughout the project as I balanced project requirements, usability, and what eng was able to carry out
-
With the docs team (who owns Zendesk's Help Center), we discussed the structures of these articles and potential sections to keep or change based on the original content. Getting their feedback was essential to keeping my work in line with the content that they own
.jpg)
I realized that there were a lot of panel elements I would have to flesh out in terms of explorations and questions of accessibility.
I used this opportunity to facilitate a feedback/design session with the ICO design team using this miro board for points of discussion and brainstorming.
Iterations, feedback, rinse, repeat
One of the biggest skills I trained in at Zendesk was communicating my ideas, asking for feedback, and knowing how to apply it. I went through many iterations of panel elements; my working style involved having regularly updating the team, bringing in context with pros/cons, utilizing visuals, and presenting demos for engineers, PMs, and other designers.
THE HIGHLIGHTS
Essential design decisions
Some design decisions I wanted to highlight for this project were ones involved in accessibility and working with design systems, which was a goal of mine coming into this role.
DESIGN DECISION 1
Open in new tab footer
The functionality of being able to open the article in a new tab was outlined in the PRD as an initial requirement.
​
Initially, I had placed the button at the top of the article with the thought that this would be the first option that users can be able to access.
​
However, during an early demo of my prototype to PMs, they brought up a concern that the original was "too prominent at the top" and encouraged users to leave the panel.
EARLY EXPLORATION
FINAL HAND-OFF
These articles tend to be long in scroll length, so I began exploring options that could balance access to it while not being too prominent, leading me to the final design.
Throughout this process, I consulted with one of Zendesk's design systems designer on the accessibility of these options.
More subtle
To address the PMs' concerns, this option is more subtle than having it at the very top bc visually, users will see it last so they are less likely to leave the panel.
Sticky footer
HC articles can get very long which justifies making it sticky. On top of length, these articles consist of more complicated visuals like complex tables that get hard too read in the small panel so the likelihood of users wanting this to be an easy accessible option is high.
Real estate
Takes up some pixel area of the article (though I argued that this may not be a huge trade off compared to ease of access). To mitigate this, I minimized the footer height as much as possible.
DESIGN DECISION 2
Enlarging images
Placing images in a small panel creates a problem of readability. To mitigate this, I designed a lightbox overlay to provide an enlarged view. Through the design process, I worked with a system designer on accessibility and establishing a new pattern.
For my design, I included an enlarge button that highlights on hover with an overlay (in order to call attention and provide a way for screen readers to access the function). The entire image is clickable, and the lightbox is also clickable anywhere outside the image.
The close button hadn't been in previous patterns for videos, so it gave me an opportunity to establish a new practice in the organization.
THE HAND-OFF
"Walk me through the prototype"
After weeks of iterating, and receiving the approval of PM, content, docs, and design leadership, the MVP was handed off to the engineering team in a walk-thru meeting. The hand-off process included documenting the essential elements, accessibility details, and component behaviors/interactions. In my last weeks at Zendesk, I assisted the engineers with any unexpected cases or questions that have come up through Jira.
FURTHER RESEARCH
Testing with real users
I paired up with the User Research Intern on my team to create and conduct an unmoderated study, where we tested out specific areas of my prototype with 15 participants/real Zendesk customers.
THE FINDINGS
Actionable feedback
100% of participants managed to enlarge images even without prompting.
Navigating between articles and searching up additional articles was intuitive and easy with an average rating of 4.8 from a scale of 1 (extremely difficult) to 5 (extremely easy).
PLAN AVAILABILITY BANNERS
Plan availability banners are too difficult to read and are largely ignored by users.
Short-term solution: Worked with eng to find a scrollable, readable banner format
Long-term goal: Banners should be converted to a readable, text format - ideally through the docs team
COMPLEX TABLES
Most participants do not prefer the layout of the table because the scrolling interaction is not intuitive or clear.
Short-term solution: Have an instruction well that indicates the table can scroll right and left and/or 'open table in new tab' button
​
Long-term goal: Consider allowing users to extend the help panel
Tammy was the point product designer driving this project from conception to delivery. Ultimately, she put together a great solution that resulted in positive feedback from several of our stakeholders and partners.
Stephanie Quemena, Product Design Manager
Even though it's only been a few months, Tammy's already made a ton of great contributions to the team, and the speed at which she ramped it up was really impressive.
Lucy Liao, Senior Product Designer
REFLECTION
Growing my skills
This internship was incredible both personally and professionally. My goals of working with cross-functional teams, user researchers, building with established design systems, and practicing pitching/presenting exceeded my expectations in my learning outcome.
I feel much more confident in getting a feel of how to communicate with different audiences about design, and how to advocate for accessible decisions.
At the end of my internship, I also got to present some of my work to the whole product design team at Zendesk (see my deck here).