Back to Portfolio
Case Study | CLIENT: Flux.ai

End-to-end Product Feature Design of Stackup Editor

Increased Flux.ai’s enterprise adoption by designing critical feature - Stackup Editor

Design ResearchEnd-to-end DesignDesign System
RoleProduct Designer
Duration4 Months (Sep 2023 - Dec 2023)
ToolsFigma, Github
TeamMe (Product Designer), 1 Design Lead, 1 Product Manager, 1 Product Expert, 1 Software Engineer, 1 Electronic Engineer

Overview

Flux.ai is a PCB (printed-circuit board) design software company with the mission to take the ‘hard’ out of hardware PCB building. It’s basically Figma for electronic engineers.

Flux Background
Flux Background
Basic PCB Stackup Explanation
Basic PCB Stackup Explanation

Why design the Stackup Editor?

Why Stackup Editor
Why Stackup Editor

My Contribution

Design Research, 0-to-1 Product Feature Implementation, Design System Component Library, Visual Design, Usability Testing

Stackup Editor Demo

The Outcome

  • Enabled users to implement more complex circuit design with higher component density, leading to higher enterprise adoption.
    • Why Stackup Editor
    Why Stackup Editor
  • Reduced time to create custom layers and connections in PCB with intuitive visual stackup editor design.
    • Why Stackup Editor
    Why Stackup Editor
  • As of mid-Jan 2024, the feature is live and is expected to increase monthly active users and paid signups by the end of Q1 2024. Unfortunately the detail metrics are under NDA. Feel free to get in touch with me at zealsheth13@gmail.com to know more.
Stackup Editor Demo

Design Process

I conducted design research to gain clarity on the content design, table interaction design and error handling for Stackup Editor.

My Research Touchpoints

  • Product Expert: acts as a UX Researcher at Flux.ai to get insights on enterprise needs.
  • In-house Pro Users: company users using Flux.ai to for stress test, initial dogfooding and build community files to get insights on user experience on Flux.ai and competitive platform offerings.
  • Community Users: users using Flux.ai for personal and professional application to get insights on user experience on Flux.ai and competitive platform offerings.

Below are the design iterations I explored to solve the problem.

Stackup Table Iteration 1
Stackup Table Iteration 1

Option 1: Hover Microinteraction to Edit Stackup

  • PROs: ✅ High flexibility.
  • CONs: ❌ High engineering cost.
Stackup Table Iteration 2
Stackup Table Iteration 2

Option 2: Context Menu to Edit Stackup

  • PROs: ✅ High flexibility.
  • CONs: ❌ High engineering cost.
    ❌ Too much UI clutter.
Stackup Table Iteration 3
Stackup Table Iteration 3

Option 3: Button Interaction to Edit Stackup

  • PROs: ✅ Easy to implement.
    ✅ Accessible Design.
    ✅ Less Clutter.
  • CONs: ❌ Less flexibility.

After weighing pros/cons and knowing that this feature is going to be used by pro-user mostly, we assumed users know what they are doing, we decided to go ahead with design Option 3 for glitch-free user experience, fast shipping and complete user freedom.

Final Solution

Final Solution
Final Solution
Via Visual Design
Via Visual Design
Via Exports
Via Exports
Critical User Flow to Add New Via

Design System

I published my custom component library for Stackup Dialog in the Flux.ai's Design System.

Stackup Dialog Component Library

Impact & Learnings

The detail success metrics are under NDA. Feel free to get in touch with me at zealsheth13@gmail.com to know more.

  • Enabled users to implement more complex circuit design with higher component density, leading to higher enterprise adoption.
  • Reduced time to create custom layers and connections in PCB with intuitive visual stackup editor design.
  • As of mid-Jan 2024, the feature is live and is expected to increase monthly active users and paid signups by the end of Q1 2024.

My Learnings: Iterating designs based on design-product-engg. tradeoffs, advanced figma skills, contributing to design system, team collaboration, critical feedback and problem solving.

Finally, if I had more time, I would tweak the future product roadmap based on user feedback on current designs. For eg. providing ways to save and share stackup templates and leverage copilot AI to automatically generate use-case based custom stackup layers.