Project Overview
The Challenge
Collecting feedback in real-time after a customer engages with live chat is a no-brainer. Not only does it help a support team know if they are meeting customers’ needs, but it also helps a support manager track their agent’s performance and coach them on areas for growth.
Historically in HubSpot, the Feedback widget and Chat widget were separate tools configured and managed within different apps that were not technically flexible enough to work in an integrated experience together.
The goal of this project was to offer a seamless experience for HubSpot customers so that they could easily gather, analyse, share and respond to feedback after any chat engagement.
My Role
Project design lead working with two HubSpot teams based in Dublin and Boston.
Initial concept visualisation, user research (in partnership with our UX researchers), prototyping, concept validation with customers, final concept design, support for the development team and QA.
A UX-led project
Teamwork makes the dream work
__________
I was brand new at HubSpot when I took on this project, which meant that we needed to prioritise building a strong relationship with the team as we worked on conceptualising what the experience would be like for our customers. We also faced the added challenge of being an ocean apart and in the middle of a pandemic.
Guided by my fellow designers' experience in HubSpot, we set a cadence for the project that was relentless and flexible: relentless to build the confidence and trust that we would get there, flexible to adapt to other priorities and circumstances.
Take each other along for the ride
We started our UX partnership by just taking the time to get to know each other and what our working preferences were. We scheduled regular check-ins and spent the first couple of calls walking each other through our parts of the product, personas we were focused on, current customer pain points, and projects currently in flight.
Giving each other this context was helpful to identify areas that needed more clarity, along with starting to create a shared vocabulary for us to use throughout the duration of the project.
Keep communication constant
We created a digital board that was the source for all data, flow diagrams, and wireframes. We also heavily utilised the note functionality to keep track of documentation, outline next steps, and links to sketch files. Both teams had access and could leave comments or add relevant information before starting the high-level designs. This also allowed us to work well asynchronously in 2 different time zones, and it helped ensure that individual contributors could stay informed of technical concerns or important data points to help inform decisions.
We also had a slack channel with both teams where we informed of updates on the progress we made, asked questions, shared research insights, and more. Having transparent communication in a public channel helped make sure that relevant team members could contribute ideas or raise concerns as we worked out flow details.
Talking to our customers to inform our design
As well as sharing and reviewing existing research, we arranged calls with our customers, both at the very start of the project, and later on when we were ready to validate our prototypes.
We learned that users were quite new to gathering feedback, they needed to track and report all feedback received, and sharing and celebrating success was very important to them. Also, managers needed to quickly see the context for the feedback and be able to connect it with the agent.
This information helped us prioritise our goals for the first iteration of this feature, and plan future development. As an example, we decided to start offering only one type of survey (Customer Satisfaction Survey, or CSAT), while investing effort in a seamless set up, detailed reporting, quick access to the chat context and simple integration with slack channels to share positive feedback.
Involve the wider team at strategic moments
Just like we spent the time working on our UX partnership and giving each other the context we needed, we also made sure that both teams had the context they needed to understand the customer’s needs in order to scope the technical work. Our researchers used the Slack channel for threads on research studies and shared insights from participants there as well. We also did a research readout with both teams to share the insights and to have a discussion about what was needed from a customer perspective. Including Engineering in the research process helped ensure that the customer's needs were staying in the foreground.
Throughout our design iteration process, we presented our work to designers in other teams to gather feedback from our UX counterparts. They offered different perspectives which were helpful as we were thinking through the joint configuration experience between the two HubSpot tools (Chat and Feedback).
Once we had a validated direction that we felt confident moving forward with, we took the time to create design documentation that outlined both the configuration and end-user experience. There we outlined the overall flow along with error states, PQL points, permissions, and more for the Engineering team to review, ask questions or clarify anything.
Delivery
The turtle wins the race
__________
Throughout this project, we learned that being flexible and willing to pitch in when needed is really how we kept the momentum going.
There were times when one of us had limited bandwidth and others had to take the lead to help us meet whatever milestone we were working on. When it came time for Engineering, conflicting priorities meant both teams could not work on the project in parallel. Instead, the work was split up and each team picked up their part when they were able to dedicate time to it.
Having our slack channel and design documentation made it easy for the teams to connect with each other or the UX designers when there was a question or concern. The slower pace of this project allowed us UX designers to focus on the details like accessibility, discovery, and delight.
Post-chat feedback was released at the end of 2021. Aligning with HubSpot's goal of emphasising Visitor Experience as a key element of business growth.
The feature has been a success and used not only by our customers but also by HubSpot's internal Sales teams, with massive impact for HubSpot: increased CSAT score and increased Qualified leads.
The teams are currently working on how to advance this feature to continue helping customers.