PRODUCT DESIGN INTERNSHIP FALL’23
Stackup Editor Design at Flux.ai
My Role: Product Design Intern
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: Competitive Audit, 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 so anyone, from makers to businesses, can easily turn ideas into products. It’s basically Figma for electronic engineers.
The Problem:
User: I can’t create custom shareable stackup layers for my PCB design. There is no way to add microvias, an industry standard technique to provide laser drilled electrical paths across PCB layers.
Flux.ai: Customizable stackup and microvias support acts as a major blocking feature to create advanced PCB boards. Implementing theses feature will help increase our enterprise and pro-user adoption rate.
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.
V0 version of ‘Stackup Dialog’ feature in production as of Dec 2023.
Why Stackup Editor?
CHAPTER 1: BACKGROUND
Flux.ai’s goal was to increase its enterprise and pro-user adoption rate and paid sign-ups. On collaborating with our Product Expert (Kerry), we found that providing users with customizable stackups and supporting microvias can greatly empower users to design more complex circuits, catering to the specific professional needs.
Meet my team 👋
MatthiasProduct Manager
Product Expert
Kerry
ChrisSoftware Developer
Electronic Engineer
Mark
Product Design Lead
Product Designer
MeBrooksDefining the Product Specs
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 2 approaches to design Stackup Editor,
Option A: Providing users with a very intelligent Stackup Editor that
Can add new layer anywhere in table.
✅ High flexibility.
❌ High engineering cost.
Provides default values for new layer relative to its position in the table.
✅ Reduces user errors.
❌ Complex logic.
Provides errors and warnings alerts.
✅ Reduces user errors.
❌ Glitches in real-time user experience.
Option B: Providing users with a dumb Stackup Editor that
Can add new layer only at bottom of table.
✅ Easy to implement.
❌ Less flexibility.
Provides a fixed default value for new layer.
✅ Easy to implement. No edge cases.
❌ Users need to do extra work to set correct values.
Provides errors alert only for system crash.
✅ Users can create free-will designs.
❌ Won’t alert the user about the manufacturing error.
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 a Option B: dumb Stackup table for glitch-free user experience, fast shipping and complete user freedom.
Collaborating to Resolve Critical Design Issues
CHAPTER 3: KEY CHALLENGES
Table Interaction Design
Content Design
Error Handling Design & Via Visual Design
Engineering Tradeoffs
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.
‘+ Layer’ button placement.
What should be default values for new layer?
Eg. default field values.
Table rounded corners.
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.
What information should a via visual convey?
Eg. drill process, fill etc.
Hover state implementation.
Which design export files will be needed to render customized via illustration as per the user inputs?
Eg. svg, vector structure etc.
User Interface
CHAPTER 4: 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 get user feedback on Stackup Dialog through Flux’s active slack channels and bug report forum. I would understand the user problems tweak the v1 milestone for better user experience and added functionality.