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
View AI Ideation

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

TL;DR

Spark’s original admin UI wasn’t keeping up with its growth, especially in API key management where users struggled with overwhelming screens, inconsistent structure, and unclear labels.
I redesigned the experience with clearer naming, two-layer navigation, modal-based flows, and improved accessibility standards.
This led to a 16% increase in ease-of-use and a 21% reduction in task completion time, with accessibility improvements adopted across teams.
Later, I revisited the project using AI tools, which accelerated ideation by 40%, though aligning with the design system and scaling consistently still required human oversight.
To scale AI use in real workflows, future design work should include a clear PRD and integration with component libraries like MCP.

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.

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
  • Had difficulty finding the right key or group quickly.

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. Clarify 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. Break 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. Clarifying Structure to Support Fast Access

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 dense, hard-to-scan layout
  • Expand/collapse sections made it visually overwhelming and slowed users down when searching for a specific key or group

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 an 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.

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

Stepped out of my comfort zone by presenting design changes directly to the CTO and developers. I was nervous about naming changes and technical terms, but explaining my reasoning helped gain alignment.
Led our first accessibility audit for the design system. I identified issues, created an epic with Jira tickets, and presented findings to cross-functional teams.
Encouraged adoption of WCAG 2.1 standards, helping shift team mindset around accessibility and long-term quality.
I learned the value of taking initiative, asking questions even when unsure, and owning work that drives real change.

What if I Redo it Today with AI?

In 2025, I decided to give this case study a second life with a twist. My goal was not to replace my work, but to challenge it:  
  • Curiosity: Could AI make it faster, better, more engaging?
  • Goal: Test its limits and use it in a real design deliverable.
I treated this AI experiment like a design sprint, starting with idea generation, testing multiple tools, and finally integrating the best ones into my process.
A flowchart with three rounded boxes connected by arrows showing an AI tool selection process. The first box says “Ideation with Claude” and notes Claude was used to create new ideas from old case study content. The second box, “AI Tool Exploration,” lists tools tested: V0, Lovable, Bolt, and UX Pilot. The final box, “Final Tool Selection & Integration,” states Claude was chosen for ideation and Bolt for prototyping.

Ideation with Claude

I uploaded my original design to Claude and asked for suggestions, then requested new visuals based on its recommendations.
A dark-themed screen shows a question at the bottom asking for feedback on a UI and flow redesign. Above it are seven screenshots from an API key management interface, displaying steps for deactivating keys, setting active periods, and generating new API keys. The UI features purple buttons, light backgrounds, and clipboard copy confirmations, with data tables shown in multiple views.
As you can see, Claude proposed several changes. The three that stood out most and aligned best with the project’s scope and scalability were:
  • Unified dashboard for keys and groups
  • Usage analytics (daily requests, last used)
  • Health indicators (status, expiry, rate limits)
Dashboard interface for API key management showing stats like total keys (127), active keys (89), and keys expiring soon (8). A highlighted warning alerts users to renew expiring keys. A table lists keys with their names, groups, status (e.g., Active, Expiring Soon, Unused), usage, expiration date, and last used time. Quick actions and recent activity appear on the right, along with a security alert for unusual activity and a tip to enable key rotation.
API key management dashboard displaying grouped statistics for key usage. Summary cards show 15 groups, 12 active groups, and 2.4M combined API requests in 24 hours. A table lists group names, descriptions, key counts, usage, and last used times. Quick actions and group activity updates are on the right, including a performance insight highlighting “Payment Gateway” as top-performing and “Legacy Systems” as low usage.
API keys
API key groups

AI Tools Exploration

I tested four tools: V0, Lovable, Bolt, and UX Pilot. To ensure a fair comparison, I used the same prompt and original design for each tool.
I used two approaches:
  • Text prompt only: "I want to build API key management with API key groups and individual keys."
  • Prompt plus image: "Based on my API key management UI and user flow, can you suggest and create a better UI and UX flow?"
For ideation, I found that text-only prompts gave me more surprising and diverse results. When I included images, most AI tools were able to match the structure or flow, but the visual style and components often didn’t align with my original design.
API Key Management interface displaying three grouped cards labeled Production, Development, and Third Party. Each card shows the number of API keys, a brief description, and creation date. A search bar and group filter are at the top, with buttons for creating a new group or new API key in the top right corner. The layout is minimal and clean with a white background.
A grouped view of the API Key Management screen with summary cards showing total groups (3), total keys (4), and active keys (3). A detailed card under the Production group shows a primary API key with masked value, status (active), created and last used dates, and permission badges (read, write, admin). A green “Add Key” button appears on the right.
A dashboard view from an API key management tool called KeyManager. The sidebar includes navigation for Dashboard, API Keys, Key Groups, Usage Analytics, Settings, and multiple projects. The main panel lists three API keys labeled Production API, Development API, and Testing API, showing their masked key, group, creation date, and status (Active or Revoked). Actions include edit and delete. Below is an API Key Groups section with cards for Production, Development, and Testing.
API Key Management interface with a clean, table-style layout showing two API keys. Each row displays masked key, creator email, status (Active or Deactivated), activation dates, and last used timestamps. Above the table are filters for status, date range, and sorting, plus a purple “New API Key” button.
V0
Lovable
UX Pilot
Bolt
CriteriaV0UX PilotLovableBolt
Free daily credits for iteration✅❌✅✅
UI consistency with original design❌❌❌✅
Scalability of design✅❌✅✅
Creative layout ideas✅✅✅✅
Interactive layer suggestions❌❌✅✅
Usable output for prototyping❌❌✅✅
Note: This evaluation is based on my experience with a specific case study and may vary with different projects or prompts.
I used Claude to ideate the interaction flow for how users add, view, and manage API keys and groups. To work around Claude’s limited conversation length, I broke the flow into smaller parts.
A circular flow diagram showing collaboration between two tools: Claude and Bolt. The top arrow points from Claude to Bolt with the label “1. Generate ideas 2. Refine prompts.” The bottom arrow loops from Bolt back to Claude with the label “Visualize and iterate UI.” This illustrates an iterative workflow for ideation and UI prototyping using Claude for prompt generation and Bolt for visualization.
I used Claude and Bolt in a loop to ideate, refine, and visualize small batches of UI.

New AI Design

1. Dashboard-Level Overview & Combined View with Tabs

Before:

A section of an API key management interface showing 92 total API key groups. A search bar and sort dropdown are at the top, followed by a table with columns: API key group name, description, API key count, last used, and user groups. One entry is visible: “Marketplace Key” with 5 keys, used 5 minutes ago, and linked to 4 user groups. A purple button labeled “+ New API key group” is on the right.
  • Users only saw a plain count of API key groups with no contextual insights
  • API groups and keys lived on separate screens made it harder to see relationships and slowed down management

After:

A dashboard-style API key management screen with summary cards at the top showing: 12 total groups (+2 this month), 48 total API keys (+8 this month), 42 active keys (87.5% active), and 3 expiring soon (next 30 days). Below is a tabbed navigation for API Key Groups and API Keys, along with search and sort controls. A large purple button labeled “+ New API Key Group” appears in the bottom right corner.
  • Dashboard at the top highlights key metrics, gives users immediate insight into system health
  • Tabs were added to unify API key groups and individual keys, making navigation faster without losing context

2. Visual & Context Enhancements in Tables

Before:

A compact API key management screen showing 2 total API keys, with filters for status, active date range, last used period, and sort order. The table includes masked keys, creator email, status (Active or Deactivated), activation and expiration dates, and last used timestamps. A purple “+ New API key” button is in the top-right corner, and filters are clearly labeled above the table.
  • The lack of key names made it hard to identify what each key was for
  • Date and creator info lacked key-level clarity

After:

A tabbed interface for managing API keys showing a searchable, sortable table under the "API Keys" tab. The table includes columns for key name, group name, status (Active, Inactive, Expiring, Revoked), usage percentage with progress bars, expiration date, and last used time. A purple “+ New API Key” button is in the top-right corner. Keys are visually tagged by usage and status to aid quick scanning.
  • Showing the key name with its group makes searching and scanning easier
  • The usage bar especially helpful for power users managing many keys

3. Side Drawer for API Group Details

A detailed view of the "Production APIs" group in an API key management dashboard. The group has 2 keys, was last used 2 hours ago, and is linked to 4 user groups including "Admin." Two API keys are listed: one labeled “Main API Key” showing 75% usage, status Active, expiring on 30 Dec 2024, and last used 2 hours ago. The second key, labeled “test,” has 0% usage, is also Active, expires 5 Aug 2025, and has never been used. A purple “+ Add API Key” button appears at the top of the panel. The sidebar includes navigation to areas like API keys, Usage details, and Insights.

I replaced the full-page transition with a side drawer when viewing API group details. This allows users to stay in flow, compare across groups quickly, and avoids unnecessary page loads.

Key Takeaway

You can explore the live version: https://tinyurl.com/y2bs5jyp
✅ What Worked
  • 40% faster workflow: AI tools helped accelerate research, ideation, and early UI generation.
  • Stronger ideation: Especially effective in generating interaction concepts and layout variations.
⚠️ Limitations
  • Manual refinement needed: AI-generated UI still required design polishing and adjustments.
  • Prompt crafting was a challenge: Especially when switching between AI tools and Figma to conserve tokens.
  • No design system integration: Output didn’t follow our UI components or style guide.
  • Scaling inconsistency: When prompts had too many requirements, Bolt didn’t apply changes consistently.
💡 Opportunities & Solutions
  • Use MCP (Model Customization Platform): — To apply consistent UI components and align with the design system.
  • Write a detailed PRD: Clear, structured requirements improve AI prompt results and reduce back-and-forth.
  • Explore AI’s scalability limits: Still unsure how well AI handles ongoing requirement changes in real-world projects.
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