Support Ticket Form
Project
Info
Customer support plays a crucial role in ensuring customer satisfaction. For priority users seeking support, it is essential to provide them with a seamless and efficient solution. By designing a system that places a strong emphasis on the option to call or chat with an agent, we can enhance the priority support experience, providing users with real-time assistance and personalized solutions to their problems.
Role
UX Designer
Team
Sophia Curtis
Jason Chipman
Overview
Premium user’s were getting slow responses from support agents.
Customer support plays a crucial role in ensuring customer satisfaction. For priority users seeking support, it is essential to provide them with a seamless and efficient solution. By designing a system that places a strong emphasis on the option to call or chat with an agent, we can enhance the premium support experience, providing users with real-time assistance and personalized solutions to their problems.
DISCOVERY
We know the problem, but let’s dive deeper.
Working backward, since we didn't have a pre-existing design file for our web form, I designed our form within Figma to get a feel for how to design for it.
Brainstorming Solutions
Let's take a step back..
When presenting this first iteration, a concern I brought up to my team was the modal and priority selection placement. I discussed with my team that if a user has filled out the form linearly and selects priority at the end, the modal encouraging them to call or chat instead might lead to user frustration.
Most Time Intensive
Too Far Out
Least Time Intensive
Change the layout of the web form by creating it similar to a walkthrough, step-by-step form.
Add CTA to log in on form, homepage, & customer dashboard that informs them of their support options.
Insert a modal into the webform for priority users to see if they submit a technical support ticket.
Wireframing
Creating a Few Wireframe Ideations
01
Changing the layout of the form
02
Encourage login
03
Add CTA
Ultimately, we went with Idea 3, adding a CTA to the form. Due to time constraints, we wanted to ensure that we could get something scoped into sprint!
Logic Considerations
Identifying potential user frustration
When presenting this first iteration, a concern I brought up to my team was the modal and priority selection placement.
If a user has filled out the form linearly and selects priority at the end, the modal encouraging them to call or chat instead might lead to user frustration.
1. Select Request Type
2. Enter Email Address
3. Optional Priority Selection
4. If Urgent - CTA Appears
Wireframing Options
Sharing early & aligning with development
At this point, we decided to bring in our developers so they could get an idea of where we wanted to go with the design. Since we considered restructuring the placement of a few dropdown fields, we wanted to make sure that was feasible on their end. Luckily, it was!
01
CTA with Orange Fill
02
CTA with White Fill
However..
When considering where the CTA buttons would lead, our devs informed us that our site cannot determine where the user is accessing / submitting a support ticket from. We need to link the call CTA directly to a phone number, which varies across different countries Zoom offers services.
Incorporating Feedback
Iterating on feedback & opportunities
The fix for routing the call to the correct team was adding an additional dropdown for country selection.
We also recognized an opportunity to increase user login. A Login CTA was suggested, so I came up with a few options.
Final Designs + Ship Off To Developers 🚀
Getting ready for takeoff & development
We finalized the Login & Welcome back CTA and CTA Intercept Modal!
01
Future UI Styling + Login CTA
02
Current UI Styling + Logged In CTA
We submitted the current UI styling including colors, buttons, and fonts, along with the future UI styling since the request needed to be scoped into a developer sprint quickly,
Localization
Working with localization
For the future state design, some of the re-brand design is still being worked out. Because of this, the CTA Intercept Modal is updated with the buttons and colors, and font will be updated upon finalization. Zoom support has localization support of 15 languages, so I included some of the languages we support in the future styling mockup.
Reflection 🧠
My takeaways and learnings from working on this project
The project really shaped my experience by giving me the opportunity to impact thousands of users. While designing out these screens, I joined design critiques and received valuable feedback about my work from experienced designers. I was incredibly nervous while presenting my designs, although I got so much out of those experiences. I learned that it design critiques and feedback should be seen as a positive experience, and that while nerves still exist, it's not nearly as intimidating as I initially thought.
From this project alone, I learned a lot about localization, and how to consider other languages while designing. I previously did not have experience in localization, but now I have a great understanding of knowing how to adjust designs and copy based on the different types of global audiences.