Netflare Slack Integration
Aug 2022 - Oct 2022
Designing a Slack integration to help quickly process and manage tickets on the go.
Company Overview
Netflare is a cloud computing company that offers issue and crisis management products to on-call teams and developers.
Problem
Situation
Netflare wanted to innovate its Ticketing product offering to get more customers. From talking to Netflare’s leads, I noticed that many startups did not want to work with too many programs, but a program that they all used was Slack.
Task
I thought of designing a Slack Integration for Netflare so that customers would be more enticed to use Netflare’s ticketing services, as they already use Slack in their workflow.
Outcome
Action
Worked collaboratively with the engineering team to ideate and push out the designs onto Slack.
Conducted usability testing and iterated on designs.
Created a web page design to help market the new Slack integration.
Result
The Netflare Ticketing App was successfully pushed out onto Slack and this helped attract new customers.
Designs
Ticket Creation Through the Homepage
Users can create a new ticket on the homepage, or by typing /create in any conversation.
Homepage - Viewing Tickets
On the homepage of Netflare’s Slack Integration, users can view all tickets, filter and sort through them, and bring them into Slack.
Usability Testing
To validate the effectiveness of my designs, I conducted a total of 5 usability tests. By the final iteration, 100% of the users were able the successfully complete the tasks and I was able to improve the usability score from 71% to 89%.
The Design Process.
Discover
Insights From Netflare’s Leads
I was assigned to improve Netflare’s ticketing system to attract new potential customers. When I talked to Netflare’s leads, I found that startups were avoiding ticketing systems, because they wanted to run a lean system with minimal products. I discovered that many centered their work around Slack, a team communication platform, and they leveraged it for manually managing their customer issues through dedicated communication channels. I saw an opportunity to bring a lightweight ticketing system directly into Slack to meet the demand of these customers who don’t want to work with too many programs.
Turning Leads Into Customers
From speaking to potential leads, I found that the biggest barrier in adopting Netflare’s ticketing platform is that they did not want to have to manage another piece of software. While these companies all used different software, I noticed that they all used Slack for internal communications. Realizing this, I thought of the idea to create a Netflare integration with Slack.
Define
Gathering Requirements
I worked closely with the Netflare engineering team to figure out the requirements and expectations of the integration and was given the following:
All actions done on Slack are synchronized with Netflare’s platform
All tickets should open in their own Slack channel
All existing tickets should be viewable on Slack
Users should be able to create, edit, delete, and edit tickets
However, with these requirements, I noticed one thing that stood out. If every ticket had its own channel, would that create too many channels and clutter for users?
Triage Channel Idea
Instead of having a channel for every ticket, I wanted to have a triage channel, which means that all tickets populate in one or a couple of specified channels, based on what team the ticket belongs to. This way, there would be less clutter and team members can gain visibility on tickets.
Commenting on Tickets
From my experience with Slack and testing with Slack’s Block Kit Builder, I knew that this was technically feasible, but I needed to figure out a way to view comments and comment on the tickets.
After some brainstorming here were my ideas:
Viewing and commenting on tickets on a modal
Using input commands update the comments
Using threads to view and comment on tickets
Netflare Slack Integration
From my experience with Slack and testing with Slack’s Block Kit Builder, I knew that this was technically feasible, but I needed to figure out a way to view comments and comment on the tickets.
After some brainstorming here were my ideas:
Viewing and commenting on tickets on a modal
Using input commands update the comments
Using threads to view and comment on tickets
Using Threads for Comments
Out of the three ideas, I decided it would be best to utilize threads because it's the most accessible and has the lowest learning curve because it utilizes a native Slack functionality. Users would be able to easily view and manage all comments.
Discussions with Netflare’s team
I presented the concept of a “Triage channel” to Netflare’s team for approval. Although having a triage channel would reduce clutter for users, we realized that the set-up process would be quite lengthy as the admin would have to create new channels for each team and add all the users that belong.
Therefore, we decided that by default, tickets will open in their own slack channels and users will have the option to set up triage channels later. Even with a triage channel setup, users can still choose to bring tickets to their own channel on an ad-hoc basis.
Understanding Slack’s UI limitations
With the requirements finalized, I headed over to Slack’s online block kit builder to understand Slack’s UI limitations and available components because Slack does not allow much room for custom design.
Develop
Ideations and Sketches
I quickly sketched some ideas for how I visualized the integration to work to get a better understanding of what tasks users would want to complete and how my designs can match their needs.
Usability Tests and Iterations
To make sure that I included all the necessary screens for my design, I identified 8 core task flows. I designed each of these flows in low-fidelity wireframes and turned them into a prototype so that I could conduct usability tests and iterate based on my findings.
I conducted 4 rounds of unmoderated, remote usability tests with low-fidelity wireframes where I had users complete the identified 8 core tasks. After each test, I would go back and iterate with the feedback, for a total of 5+ iterations.
Using Maze I was able to collect quantitative feedback from click data and qualitative written feedback. The main pain point identified was that users found it difficult to understand the different channel types and therefore, this revealed that the onboarding process needed improvement.
Onboarding Process Changes
I revamped the onboarding messages over various iterations to simplify the language into shorter messages, include relevant images, and a summary message at the end for the key concepts covered. Previously, there were only 2 lengthy messages with no images.
For users who choose not to go through the full onboarding process, they will still be left with a link to Netflare’s Slack Website page for them to review the integration at their own convenience.
Validating Onboarding Improvements
To see if the onboarding process has improved, I tested my final iteration of the onboarding messages with 3 users who were not familiar with Netflare’s Slack Integration and had them complete a short quiz after to check if they understood the content.
The average score on the quiz was 89%. While this score is not perfect, it is good considering that in real use cases, users can easily go back to the onboarding messages to review what they don’t understand.
Deliver
Slack Website Page
Going beyond the original requirements, I designed a responsive website to promote and explain Netflare’s Slack integration on Netflare’s website. Users can access this link via Netflare’s website, and also are sent this link when they complete the Slack onboarding or when they press that they don’t want to go through the onboarding.
Netflare Platform Update
Finally, to make the integration work seamlessly on both Slack and Netflare, I redesigned Netflare’s web application to include a button to bring tickets into Slack to make the integration work both ways.
Learnings
Working with technical limitations
As Slack has many UI technical limitations, I had to work closely with the developers to understand what could be delivered.
Don't provide too much information
By simplifying and reducing the information provided during onboarding, users were able to better retain the information.
