Coherent - Spark．2022

Simplifying Complex Tools: A Scalable UX for API Platform

Spark, a product by startup Coherent, turns Excel spreadsheets into scalable APIs, empowering teams to automate workflows and build integrations quickly and securely.

As a ux designer, I redesigned its API Key Management experience to improve usability, enhance accessibility, and streamline key workflows.

View Solution

Team

Product Manager
Senior Product Designer
Developers based in India

Deliverable

Usability Testing
User Flows
UI Designs
Accessibility Audits
Presentation

Impact

+16%
Increase in ease-of-use ratings
-21%
Reduction in task completion time
Accessibility guidelines
Adopted across teams
Prototype

Problem Statement

Spark was scaling fast, but its MVP-built admin tools weren’t keeping up, especially the interface for managing API keys.
Together with our PM, we aligned on the product goals. She created the Jira tickets and wrote the user stories, while I clarified the design goals, ensuring the experience addressed both usability and scalability.
How might we create a scalable and efficient API Key Management experience for technical users?

The Experience Before

Screenshot of the "API Keys" management page on Coherent's admin dashboard. It shows three integration key sections—Spark, Marketplace, and Sonic—with detailed tables listing key IDs (partially masked), creators' names, activation and expiration dates, and last used timestamps. Action buttons like “Create API Key,” “New Key Instance,” “Revoke,” and “Extend” are visible, alongside a navigation bar on the left for various admin and developer tools.
Form interface for creating a new API key within the Coherent platform. The form includes fields for key name and description, user group selection, and date pickers for active and expiry times. A sidebar menu shows navigation options like API keys, Master files, and User groups
Form titled "New Key Instance" for creating a Spark Integration Key, including fields for the key name, description ("Used to integrate to backend Spark"), and a date/time selector for the activation and expiration period. Two purple buttons at the bottom allow the user to cancel or confirm the action.
Pop-up confirmation modal asking the user if they want to revoke a masked API key. It warns that the action is irreversible and notes the key was last used on August 6, 2021, at 09:23:42. Two buttons—“Cancel” and “Confirm”—are available at the bottom.
Homepage
New API key group
New API key
Revoke notification

I found it confusing to navigate between active and inactive API keys.
‍
Also, the expand/collapse button is small and not clearly labeled.

Emily Chang
IT Systems Administrator

What Users Told Us

To understand where things broke down, I ran usability tests with five internal users: developers and system admins who worked with the tool every day. We used real-life tasks and visuals to keep sessions grounded and feedback actionable.

Key Tasks:

  • View API Groups and API Keys
  • Create New API Groups and API Keys
  • Deactivate, Extend, and Reactivate API Keys
  • Check Who Deactivated an API Key

Key Metrics:

  • Ease of Use Rating
  • Task Completion Time
Usability testing table showing feedback from five users performing tasks in an API key management interface. The table includes user roles, test dates, and tasks such as viewing API keys, creating new API groups, and adding keys to groups. Each task row includes observed challenges, improvement suggestions, ease-of-use ratings, and completion times. A color-coded table at the bottom highlights average task durations and ratings, with red and green cells indicating hardest and easiest tasks, respectively.
From these sessions, several pain points emerged:
  • Labels like “Instance Key” confused everyone
  • Expand/collapse buttons were small and unclear
  • Navigation felt cluttered and unintuitive

Naming and Structure

To strengthen our design decisions, I reviewed several API key management tools across the industry. This analysis was guided by two key questions:‍
1. What naming conventions would be most intuitive for users?
2. What table structure would best support clarity and scalability?

1. Naming Conventions

Through analyzing other API key management platforms, I identified four common naming conventions:
Collection of API key screens from various platforms, showcasing how other tools display and manage keys. Highlights elements like token generation, naming conventions, credential details, and permission toggles. A note on naming labels is listed at the bottom right.
  • API Key Name + API Key
  • Name + Token
  • Description (Name) + API Key
  • API Credential + API ID

2. Table Structure

I explored different table structures, including a single-header table, nested tables, and a two-layer layout.
Comparison of Coherent’s API key table UI with traditional grid tables from various competitor platforms. Includes annotated screenshots and summary notes about header simplification, time formatting, and pros/cons of nested tables.

Exploring Table Structures

Since changing the table structure affects user flow, I mapped out two user flows and collaborated closely with our senior designer and PM to evaluate both.
Flowchart showing a single-page version of API key management, including steps for creating, editing, revoking, and reactivating API keys. Decision diamonds and modal components indicate logic for handling key states like active, expired, or unused.
User flow diagram illustrating interactions within a two-page API key management system. Covers creating API keys, generating and viewing instance keys, modifying active periods, and managing user groups. Modal types and decision points are labeled in a flowchart style.

Communication Gap

During a review with the CTO and development team, we realized the user flows alone didn’t fully convey the concept.

To bridge that gap, I prepared:
  • Visual mockups to complement user flows and make concepts easier to understand for non-design stakeholders
  • A pros and cons comparison for two structural layouts (two-page vs. one-page nested)
  • Discussion prompts focused on naming conventions, user expectations, and interaction clarity
  • A scalability and feasibility analysis based on user flows and potential engineering impact
Side-by-side comparison of two UI design options for managing API keys: one with two separate pages and one with a single unified header. The left version shows multiple screenshots highlighting clear separation between API groups and keys, while the right version combines them. Pros, cons, and discussion points are listed below each layout.
I led the effort to standardize the terminology, replacing the confusing “Instance Key” with clearer, more intuitive labels: “API Key Group” and “API Key.”
I also advocated for a two-layer structure, prioritizing clarity and scalability over minimizing clicks. This improved navigation flow made it significantly easier for users to manage complex API environments.

UI/UX Improvements

1. Making Navigation Clearer and More Contextual

Before:

UI snippet of the API key management interface, highlighting key elements with numbered tags: toggle between Active and Inactive Keys, a search bar, and buttons for creating API keys or instances. The Spark Integration Key section is expanded.
  • Disjointed grouping separated active and inactive keys
  • Search was limited to individual API keys, not groups
  • Labels like “Create API Key” lacked context

After:

Screenshot of the API key group interface showing search, sort, and a “New API key group” button. A single group labeled “Marketplace Key” is listed with its description, number of keys, last used time, and linked user groups. Numbered circles highlight UI elements.
  • Group views now display total key counts and linked user groups
  • Users can search API key groups directly
  • Labels were renamed for clarity, such as “New API Key Group”
  • Dates are formatted as “Time Ago” for faster scanning

2. Reducing Visual Clutter and Supporting Growth

Before:

Screenshot of an API key management interface showing active keys under Spark, Marketplace, and Sonic integration groups. Buttons like “New Key Instance” and “Revoke” are labeled, with numbered callouts for user interface reference.
  • All API keys were managed on one page, causing clutter and confusion
  • Expand/collapse sections made the interface visually overwhelming

After:

  • Introduced two-layer navigation for better structure
  • Users can now create keys directly within their group view
  • A modal-based flow streamlines key creation without disrupting tasks

3. Additional UX Enhancements

Users often struggled with key management tasks due to poor workflow continuity.
To resolve this, I introduced a modal-based interaction model that allowed users to complete key actions such as creating, editing, deactivating, or reactivating keys directly within the same view.
Modal dialogs related to API key lifecycle actions like creating new keys, editing active dates, deactivating, and reactivating. Each modal shows fields for activation period and confirmation buttons. A message confirms when a key is successfully copied.

Accessibility Audit

While applying components from our design system to the new interface, I noticed that some states and color choices didn’t meet WCAG 2.1 accessibility standards.
I proposed a formal accessibility audit to my design lead, which was approved. After the audit, I translated the findings into structured Jira tickets with clear, actionable requirements.
Kanban-style board divided into Research, Findings, and Execution columns showing various tasks and their statuses. Tasks include 'Contrast ratio', 'Resize text', and 'Image text alternatives', each with corresponding PF ticket numbers and designer assignments.
I presented the findings to the design and development teams, as well as the CTO, which led to the adoption of accessibility best practices.
I then updated and contributed enhancements to our shared design system, improving component accessibility and reusability across multiple teams.
Opening slide of a presentation titled 'Spark Accessibility Research' by Coherent, authored by Sin and dated February 2022. The main slide background is purple with white and bold text.

Cross-Functional Collaboration

Our team used structured sprint summaries to track design specs, development progress, and cross-functional ownership. These summaries included detailed status updates, linked Jira tickets, and annotated thumbnails for key features.
Design sprint summary slide titled showing development and design progress for API key management features. It includes a purple title block with project info a sidebar menu of design and dev sections, and task cards. The bottom section displays design spec thumbnails for API key group features like 'Add new API key group', 'Reminders', and 'Edit key group'.

Selected New Design

Overview of API key groups within the Coherent admin dashboard, listing group names, descriptions, number of keys, last used timestamps, and associated user groups. Examples include "Spark Integration Key," "Payment Gateway Key," and "Notifications Service Key." A search bar and sort dropdown are located at the top, along with a “New API key group” button.
Form interface for creating a new API key group with fields for group name, description, and selecting user groups like "Keycloak Group 1" or "Flow Product team." There are also date and time pickers to set the activation period. "Cancel" and "Confirm" buttons appear at the bottom.
Dashboard view showing a list of eight Spark Integration API keys with masked values, creator emails, status labels (Expired, Deactivated, Active, Upcoming), activation dates, expiration dates, and last used info. Filter and sort options are available at the top, and the "New API key" button is on the top right.
Homepage
New API key group
API keys

The UI looks more polished, and searching for API keys is much easier.

Filtering by status in one view is a major improvement—I no longer have to switch between pages.

Rajesh Kumar
Software Engineer

Usability Improvements

16%

Ease of use rating increase

Previously, users struggled with unclear navigation and fragmented workflows, leading to frustration and an ease-of-use rating of 8.1/10.

The redesign streamlined the experience, eliminating unnecessary steps and boosting ease-of-use to 9.5/10.
Bar chart comparing ease of use ratings between Test 1 and Test 2. Test 2 shows higher user ratings, indicating improved usability over Test 1.
21%

Reducing time to complete the tasks

Before, inefficient workflows slowed users down, with an average task time of 17.1s.

With a more intuitive UI and clearer interactions, task completion time dropped by 21% to 13.6s, allowing IT teams to manage API keys with ease.
Bar chart comparing task completion times in Test 1 and Test 2. Test 2 shows shorter average completion times, indicating improved efficiency.

Business Impact

The improved API Key Management experience helped position Spark’s platform for enterprise growth and API monetization by streamlining workflows and enhancing usability.

These milestones reflect the value of an intuitive, scalable product experience in driving platform adoption and partner engagement.
USD
$75M

Series B funding

Coherent’s press announcement banner with a bold purple header reading “Ignite Business Software Development for All.” The post shares details about securing $75 million in Series B funding and lists lead and participating investors.
20+
Partners

Including Snowflake, AWS and Microsoft

Partner showcase section with logos and descriptions for Microsoft, AWS, and Snowflake. Each card includes tags like “Marketplace & Embedded” and “Global,” with summaries of each company’s offering and a “Learn More” link.
‍Forward-Looking Metrics
To measure long-term impact, I recommended tracking:
  • User retention across API management tasks
  • API usage volume tied to platform revenue
  • Support ticket volume related to key management and navigation

My Growth

This project pushed me out of my comfort zone in several ways and helped me grow both as a designer and a communicator.
For the first time, I presented my design changes directly to the CTO and developers. I was nervous, especially about naming changes and technical terms I found confusing, but the team accepted my proposals after I explained my reasoning.
I also took the lead on our first accessibility audit for the design system. I identified issues, created tickets under an epic, and presented the findings to cross-functional teams. It was encouraging to see everyone open to improving accessibility and aligning with WCAG 2.1 standards.
This experience taught me the value of stepping up, asking questions even when I feel unsure, and how impactful it can be to take initiative on things that matter.
She played a crucial role in developing and improving components of our Design System, significantly contributing to its robustness and relevance. Additionally, Sin was instrumental in our Accessibility initiative. With our SaaS hero product targeting the US market, accessibility was a priority. Sin proactively created and addressed multiple JIRA tickets, ensuring our platform aligned with US accessibility standards.
Maxence Le Corre, Senior Product Designer, Coherent
Copyright ⓒ 2025, Sin Ko.
All Rights Reserved.
MediumLinkedInVimeo
Back to the top arrow