PRODUCT DESIGN INTERNSHIP FALL’23
Stackup Editor Design at Flux.ai
My Role: Product Designer - Contract Role
Team: Me, 1 Design Lead, 1 Product Manager, 1 Product Expert, 1 Software Engineer, 1 Electronic Engineer
Duration: 10 weeks (Oct 2023 - Dec 2023)
Contribution: Design Research, HiFi Mockups, Design System Component Library, Visual Design
Project Overview
CHAPTER 0: 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.
Removing Ambiguity and Making Design Decisions
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
1. Product Expert
[Acts as a UX Researcher at Flux.ai]
to get insights on enterprise needs.
2. In-house Pro Users
[Users use Flux.ai to build community files]
to get insights on user experience on Flux.ai and competitive platform offerings.
3. Community Users
[Users use Flux.ai for personal and professional application]
to get insights on user experience on Flux.ai and competitive platform offerings.
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 etc.
What is the platform wide UX for error handling?
Eg. signifiers, value reset etc.
Defining Table Interaction
CHAPTER 2: DEFINE
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 on the image to enlarge
Option 1: Can add new layer anywhere in table with hover, select state micro-interaction.
✅ High flexibility.
❌ High engineering cost.
Click on the image to enlarge
Option 2: Can add new layer anywhere in table using context menu.
✅ High flexibility.
❌ High engineering cost.
❌ Too much UI clutter.
Click on the image to enlarge
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
Click on the image to enlarge
Initial Iteration
✅ 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
User Flow for Critical Paths
CHAPTER 4: FINAL SOLUTION
Critical User Path - Adding New Via to ViaSet
Crititcal User Path - Adding New Layer
Via Visual Design
Via Export Files for Engineering HandOff
Component Library for Design System
CHAPTER 5: DESIGN SYSTEM
I published my final component library for Stackup Dialog in the Flux Design System.
What I learned ?
CHAPTER 6: REFLECTION
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.
If I had more time …
PARTING THOUGHTS
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.