Kinsta needed a custom support platform with direct account integrations to streamline operations. As the sole designer at the start of the project, I prioritised features, established the design framework, and designed key product areas, including support chat, ticketing, and reporting tools.
Context and Background
Kinsta is a rapidly growing web hosting platform. To meet growing demand, Kinsta needed to enhance its solution for customer support with specialized tools and direct account integrations.
Research & Discovery Phase
After receiving the request, the head of design began exploring the support team's workflow and pain points, as well as potential solutions. I joined him in analyzing reports from the current ticketing system to identify key areas for improvement. I conducted interviews and shadowed support team members across various roles to gain a deep understanding of their workflow and challenges.
Identifying the Goal
We identified the primary goal of reducing time to resolving customer issues. This clear, overarching goal served as a north star for decision-making and measuring success.
In the process, we also recognized opportunities outside the immediate project scope that could improve the broader product. I communicated these insights to the product team and suggested potential improvements.
Proof on Concept
The initial proposal was a prototype for an MVP that centered around two key concepts:
An in-conversation integration toolkit tailored to the most common support request types. Having analysed which issues consumed the most agent time and the tools used to resolve them, we identified high-impact, low-effort integrations to streamline workflows.
A troubleshooting checklist for users, specific to the issue type before starting a support conversation. This is just one additional screen before contacting support, but for many users it may just be the help they need to find a solution without needing assistance.
One of the initial wireframes
Building a Design Framework
The first step was to build out the core product areas with minimal functionality, allowing for future feature expansions. Building on and expanding the main product’s design system in order to save resources, I have created the design framework of the product.
Key product areas were:• Customer side chat
• Support-side chat and ticketing features
• Integrated tools for managing customer accounts
• Reporting
• Team schedule planner
Scoping and Prioritization
As the sole designer and product person on this project, to create structure, I compiled a growing feature list and mapped out dependencies.
To see the scope of potential implementation and prioritize that, I gathered ballpark effort estimates from the development team and impact scores from support stakeholders. Using this data, I built a feature priority matrix, enabling informed discussions on what to focus on. While many priorities aligned naturally, some required tough decisions.
During working on the project my focus gradually shifted from the core feature set to expanding features, while ensuring consistency, and maintaining a design system and documentation.
In-conversation Integration Toolkit
At the core of the product is an in-conversation toolkit that integrates all functionalities of Kinsta's web hosting products directly into the support-side conversation. This enables support agents to access all necessary tools and information without the need to log into multiple user accounts via the main product.
I have established a UI framework that defines how UI elements from the main product translate into this toolkit, ensuring that any new features can be easily added.
Side by side a screen of the main product and the corresponding in-conversation integration kit showing how I translated the features from the main product into the integration. Screen shown: User account
Side by side a screen of the main product and the corresponding in-conversation integration kit showing how I translated the features from the main product into the integration. Screen shown: Site info
Side by side a screen of the main product and the corresponding in-conversation integration kit showing how I translated the features from the main product into the integration. Screen shown: Billing details
UI Kit
Kinsta's primary product already used a comprehensive UI kit, maintained by a dedicated design and front-end team. As the support product was intended for internal use, it was not important that is has a unique UI, and building on the existing UI-kit, rather than building one from scratch was a no-brainer.
As with most UI-kits maintained in Figma, this one follows the principles of atomic design, meaning that components are nested within each other. Kinsta's UI kit was sufficient for building the biggest part of the designs, but not all.
Illustrating the way the support product's UI kit was built on top of Kinsta's one
Customer Side Chat
The customer-side chat interface enables users to initiate new conversations within the product, select the relevant website and topic, rate the support received, and access both open and closed tickets.
Anatomy of different UI elements of the user-side chat integration.
Anatomy of UI elements of the conversation list in the user-side chat integration, with links to corresponding design tickets.
Flow and screens for starting a new conversation.
Trouble-shooting Checklist
When users request support, before they are connected to an agent, they are presented with a list of relevant information that may help solve their problem depending on the topic they selected.
Working in a Distributed Product Team
I believe in working closely with developers, as our work is deeply interconnected. When evaluating design options, I rely on their insights into feasibility and cost-effectiveness. I also recognize that design doesn’t end at handoff—unexpected questions often arise during development. I make it a priority to address these quickly, fostering a team culture where developers feel comfortable reaching out because they see me as a resource, not a roadblock.
At Kinsta, working with a large, globally distributed team presented challenges, as most developers were in U.S. time zones while I was in Europe, limiting real-time collaboration. To bridge this gap, we scheduled key meetings during our few overlapping hours and recorded video walkthroughs and Q&A sessions. With multiple tickets in progress at any given time, we ensured that waiting for an answer on one task didn’t leave us idle.
Design Evolution and Dark Mode Exploration
Please note that the user interfaces (UIs) presented in this case study are reconstructions and do not represent the original designs I created for Kinsta. Since the initial development, Kinsta's main web hosting product has undergone a comprehensive redesign. To align with the current aesthetic, I have updated these designs accordingly.
Additionally, I have introduced a dark mode variant, which, while not part of Kinsta's existing UI kit, was feasible to implement due to the tokenized color system in place.
Retro
The project was eventually not developed as a standalone product, but learnings and solutions from the project got built into the existing tooling.
As a product designer, it is a rare opportunity to get to shape and define a complex product like this from the start, so I was absolutely stoked to take ownership of creating a scalable design framework and information architecture from the ground up.