Increasing Flux.ai’s enterprise adoption by designing critical feature - Stackup Editor
My Role: Product Designer, Flux.ai
Team: Me, 1 Design Lead, 1 Product Manager, 1 Product Expert, 1 Software Engineer, 1 Electronic Engineer
Timeline: Sep 2023 - Jan 2024
Contribution: Design Research, 0-to-1 Product Feature Implementation, Design System Component Library, Visual Design, Usability Testing
CHAPTER 0: OVERVIEW
Project 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.
(Click to enlarge image)
Why Stackup Editor? But before that What is a Stackup Editor? PCB? Via?
Why did I design new product feature - Stackup Editor Dialog?
The Solution:
I designed Stackup Editor Dialog for Flux.ai’s platform to customize stackup layers and define connecting vias.
The Impact:
Users can customize the PCB stackup layers using Stackup Dialog to create advanced PCB design. For eg. a mix of Flex-Rigid boards with the most cost-effective and efficient use of real-estate on the circuit board.
Before: Rigid PCB board (img source)
After: Rigid-Flex PCB board (img source)
Users can implement complex microvias on the PCB board with ease with the help of visual via table in the Stackup Dialog on the Flux.ai’s design platform.
PCB cross-section (img source)
Vias in Stackup table
As of Dec 2023, the first milestone of Stackup Dialog containing the Stackup Tab is shipped. By mid-Jan all the tabs are expected to be shipped in production. With this feature addition, Flux.ai expects increase in 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 🔗 to know more.
CHAPTER 1: DESIGN RESEARCH
Research Goal: I conducted research to gain clarity on the content design, table interaction design and error handling for Stackup Editor.
Research Touchpoints
2. In-house Pro Users
[Users using Flux.ai to build community files]
to get insights on user experience on Flux.ai and competitive platform offerings.
1. Product Expert
[Acts as a UX Researcher at Flux.ai]
to get insights on enterprise needs.
3. Community Users
[Users using Flux.ai for personal and professional application]
to get insights on user experience on Flux.ai and competitive platform offerings.
Removing Ambiguity and Making Design Decisions.
Jobs-to-be-done
Create a custom stackup table.
Define thickness and material of the layers.
Define the interconnection between them.
Find manufacturing companies that can fabricate such boards create compatible file.
Current user journey painpoints
Users need to modularize designs to export files. Import these files to other softwares like KiCad where they can distribute the circuit into user-defined custom stackup layers.T he process is long and reduntant.
Flux can make complexity PCBs. Microvias cannot defined.
Defining Key Features for Stackup
Providing users interface t o define custom stackup layers and their connection with important attributes.
Handle manufacturing errors.
Way to save the custom stackups for re-use across different applications.
Based on the insights gathered, I further collaborated with product manager, lead designer & lead engineer to finalize critical design elements as stated below,
Table Interaction Design
Content Design
Error Handling Design
Which actions we need to support for each layer row?
Eg. add, delete, rearrange etc.
Do we support keyboard navigation?
Eg. using arrow keys.
What would hover and select state look like?
Eg. creating new components.
What information will user need about the each PCB layer?
Eg. weight, thickness etc.
What should be default values for new layer?
Eg. default field values.
What info. will user need about the vias implemented on PCB?
Eg. priority, connecting layers etc.
How do we deal with input errors?
Eg. signifiers, value reset etc.
What kind of errors should users be alerted?
Eg. system crash, manufacturing
What is the platform wide UX for error handling?
Eg. signifiers, value reset etc.
CHAPTER 2: DEFINE
Defining Table Interaction
As ‘Stackup Editor’ was a blocking and high priority product feature, the target was to ship it by quarter end. There were multiple approaches to design Stackup Editor,
(Click to enlarge image)
Option 1: Can add new layer anywhere in table with hover, select state micro-interaction.
✅ High flexibility.
❌ High engineering cost.
(Click to enlarge image)
Option 2: Can add new layer anywhere in table using context menu.
✅ High flexibility.
❌ High engineering cost.
❌ Too much UI clutter.
(Click to enlarge image)
Option 3: Can add new layer only at bottom of table using a button.
✅ Easy to implement.
❌ 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.
Design Iterations
CHAPTER 3: ITERATIONS
Initial Iteration (Click to enlarge image)
✅ What Works:
Draggable icon cue to rearrange layers.
Copper layer highlight color to draw attention.
Table cell UI.
❌ Risks:
Table dialog size is too big to appear as modal.
Users might entirely miss out on the Via Section.
Final Iteration (Click to enlarge image)
CHAPTER 4: FINAL SOLUTION
Critical User Flow - Adding New Via to ViaSet
Crititcal User Flow - Adding New Layer
To know more about product success metrics connect with me zealsheth13@gmail.com
Via Visual Design
Via Export Files for Engineering HandOff
CHAPTER 5: DESIGN SYSTEM
Component Library for Design System
I published my final component library for Stackup Dialog in the Flux Design System.
CHAPTER 6: REFLECTION
What I learned ?
1. Iterating the design based on user needs, product goals and engineering tradeoffs.
2. Mastering advanced figma skills to create complex responsive and dynamic designs.
3. Publishing component library to Flux Design System with minute details like naming conventions, atoms, molecules, components, ordering etc.
4. Collaborating across the team to resolve critical issues and deliver designs.
PARTING THOUGHTS
If I had more time …
Hi! Thank you for scrolling till here🙏.
Finally, if I had more time, I would collect user feedback through usability studies on Stackup Dialog, Flux’s active slack channels and bug report forum to tweak the future product roadmap. I would design for v1 milestone by providing ways to save and share stackup templates and leverage copilot AI to expedite the process of creating stackup layers.