← All work
LionCircuits / Order flow simplified

3 services.
1 effortless order.

I brought board manufacturing, parts and assembly into one guided journey—from design files to a finished build.

UX & UI directionOrdering architecture
Follow the story
LIONCIRCUITS01 / Configure → Inspect
Board preview, specifications and pricing
Visual component placement review
+233%Orders per month
+276%Orders through the platform
+6.8%Average monthly growth
Platform growth / May 2024–Oct 2025Interface shown / 2026 iteration
Context

A circuit board. A lot to bring together.

PCB / YOUR DESIGN, MADE REALInside almost everything electronic

A PCB connects the electronic parts inside a device. To make it work, someone has to make the board, get the parts and put them together.

01 / Make the board

Gerber

The blueprint: board shape, tracks and layers.

02 / Get the parts

BOM

The shopping list: which parts and how many.

03 / Put it together

CPL / XY

The placement map: where each part goes.

Problem

1 build. Why 3 separate purchases?

The friction
Board
order
Parts
order
Assembly
order

The customer connects the dots.

Separate checkouts, payments and records. No shared view of the complete cost.

The shift I designed
Configure→Review→Pay once

The project holds it together.

Files, choices and charges stay connected through 1 guided order.

Informed by customer conversations, support call shadowing and operations reviews.

Structure

A shared project. Only the steps you need.

Complete assemblyBare boardsComponents onlyBring your own parts
1 project Files + choices + costs
01

PCB

Is this the right board?

02

Bill of Materials

What am I buying?

03

Placement

Is everything in place?

04

Summary & Order

Am I ready to pay?

Pay once → Engineering review → Production → Delivery

The complete assembly route is shown. Other services use only the relevant steps.

Structure

One project. A visible next step.

01Start interface

Start

Choose the build, not a department.

02Configure interface

Configure

See the design and set quantities.

03Review interface

Review

Resolve parts and supply.

04Inspect interface

Inspect

Locate each component.

05Pay interface

Pay

Understand the final saving.

06Track interface

Track

See what happens after payment.

One project carriesFilesService choicesCostsProgress
Structure

The architecture behind the experience.

Organise the work around a project. Keep the board, parts, placement and payment connected inside it.

Why this direction

The customer should not need to understand internal departments to complete a build.

  1. Project
  2. Configure & review
  3. Order & track
Original LionCircuits information architecture and ordering flow
Original information architecture · select to enlarge
Structure

Same hierarchy. From sketch to interface.

01 / Low fidelity
☰ LionCircuits / Projects + New project

What are we building next?

Complete build
+ New project
Bare boards
Components
Your materials

Your projects

02 / High fidelity
The finished dashboard preserves the sketch hierarchy of new project choices above existing projects
Choose a new build above.Continue existing work below.

Sketch reconstructed to explain the layout. High fidelity shows the supplied interface.

THE ORDERING EXPERIENCE / 01

Start with the outcome.

A complete build, bare boards, parts, or materials you already have. Choose what you need and begin.

Design choice

New orders and existing projects have distinct places.

LionCircuits / 01
Dashboard with four intent based ordering paths and a list of saved projects
2026 interface
THE ORDERING EXPERIENCE / 02

See the board you are ordering.

The uploaded design becomes a visible board, beside its specifications and live charges.

Design choice

Preview, configure and check the price in the same view.

LionCircuits / 02
PCB preview next to board specifications and charge details
2026 interface
THE ORDERING EXPERIENCE / 03

Make 5. Assemble 3.

A customer may only need part of a batch assembled. The quantities should reflect that.

Design choice

Assembly quantity can be lower than the number of boards made.

5boards made→3assembled

Illustrative quantity example.

LionCircuits / 03
Board and assembly configuration with separate assembly quantity
2026 interface
THE ORDERING EXPERIENCE / 04

Turn a parts list into a plan.

Uploaded data sits beside matched parts, costs and supply choices. Anything unresolved is easy to find.

Design choice

Choose LC supply, your own parts, or a split for each line.

LionCircuits / 04
Parts table showing uploaded data, matches, quantities, prices and supply responsibility
2026 interface
THE ORDERING EXPERIENCE / 05

Go deeper. Keep your place.

Inspect price, stock, lead time and alternatives in a drawer. Close it and return to the same row.

Design choice

Purchasing readiness stays separate from technical approval.

LionCircuits / 05
Component drawer with stock, quantity pricing and alternatives
2026 interface
THE ORDERING EXPERIENCE / 06

Put every part in context.

A selected component is highlighted on the board. Open the placement editor to check its position, rotation and fit.

Design choice

The visual check supports engineering review; it does not replace it.

LionCircuits / 06
Selected component highlighted on the board inside the details drawer
2026 interface
THE ORDERING EXPERIENCE / 07

1 total. Every charge explained.

Review services, delivery, discounts and tax together. Adjust what you need before paying.

Design choice

Keep the breakdown visible. Save to cart when the customer needs more time.

Summary & Order Step 4 of 4

Your complete build

PCB / YOUR DESIGN, MADE REAL

PCB fabrication + assembly + components

Standard shippingBuild time and delivery shown separately

Charge details

Board manufacturing₹800.00
Assembly₹982.50
Components₹16,151.00
Discount−₹100.00
Shipping₹300.00
GST₹3,210.03
Total₹21,343.53
1 payment for the whole project
Layout reconstruction using supplied prototype amounts
THE ORDERING EXPERIENCE / 08

Make the saving unmistakable.

Offers show what is eligible and how much this order will save. The total updates when a coupon is applied.

Design choice

A clear applied state confirms what changed.

LionCircuits / 08
Coupon dialog displaying eligible services, rupee savings and the applied offer
2026 interface
THE ORDERING EXPERIENCE / 09

Paid. Now show what is next.

The customer has finished configuring. Confirmation and production progress now take priority.

Design choice

Keep files, charges and delivery available as supporting, read-only views.

LionCircuits / 09
Confirmed order with engineering review, production, quality checks and shipping stages
2026 interface
Decisions

Small decisions. Real consequences.

− Earlier direction? The question✓ Chosen direction
Matched board + assembly quantities
What if only part of a batch needs assembly?
Separate quantities, within the board total.
Coordinates without a visual anchor
Where is this component on my board?
Highlight the part. Link its placement editor.
Charges hidden in collapsed sections
Why does the order cost this much?
Show service subtotals and their breakdown.
Another “I reviewed everything” checkbox
Has the journey already asked for this review?
Remove the repeated acknowledgement.
A confirmation page that looked editable
Have I paid, or am I still configuring?
Lead with status. Keep details read-only.

Design iterations from product, engineering and prototype reviews.

Decisions

A good flow also has a way back.

!Something failed

Recover at the source.

Keep a file error beside the upload, with a clear way to replace it.

File could not be read → Replace file
?Something needs review

Resolve it in context.

Attention filters take customers straight to the affected part.

Needs attention → Review component
✓Someone needs a pause

Continue, without restarting.

Save the files, choices and cart so the work is there on return.

Save & exit → Resume project
Results

A clearer order. A growing platform.

+233%Orders per month
+276%Orders through the platform
+6.8%Average monthly growth
What carries forward

1 connected experience.
A clear next step.

The 2026 iteration extends the project-first approach through visual review and a status-first finish.

Let us talk

Reported platform growth, approximately May 2024–Oct 2025. Not measured results of the 2026 prototype.

01 / 18Scroll to unfold the story