FilatrixColor to material.

A print farm operator choosing filament for a customer’s object faces several connected decisions. A reference image communicates the desired color, but does not identify a material to buy. Spool photographs are difficult to judge for color, and even a promising match still needs a product, a quantity and an order.

I treated color discovery and ordering as one product scope. I organized two starting points: a customer’s reference image, or a material series to explore. Both lead toward specific color variants, with product details, comparison and a shared cart carrying the choice into order review.

A customer might send a photo of a toy and ask a print farm to reproduce its colors. I designed image-based matching around that request: upload the toy reference, isolate the relevant area, then choose an extracted color to see nearby filament candidates. The operator can refine the choice at each step.

Cropping gives users control over which pixels matter. They can focus on the object or a smaller region instead of extracting every background color. The extracted palette stays beside the source image, so choosing a swatch remains connected to the reference.

I used candidate cards to support the final judgment. Each combines an image and material information with a split strip showing the reference and catalog colors side by side. Selecting another extracted color updates the candidates. The operator decides which material deserves a closer look; a ranking does not make that choice for them.

Called “AI 识色” in the product, image-based color matching uses local pixel clustering and CIELAB color distance, rather than generative AI. Candidates support a material decision; physical appearance still depends on the material and printing conditions.

I made color itself the browsing surface. For the original product, we checked each SKU with a color-measurement device and used those values in the honeycomb atlas. This connected the swatches to catalog items, giving operators a direct way to explore color alongside the product it represented.

The key interaction decision was to separate exploration from commitment. Clicking fixes a selection; hovering over another swatch temporarily previews it. Leaving the grid restores the clicked color. A user can look around while keeping a stable choice to return to.

I kept the product name, price, quantity and purchase action together in a persistent dock. The adjacent static object image gives the color context, while the dock ties it to a purchasable item. On mobile, circular swatches and a bottom action area carry the same task into less space.

I used series to group related choices, then made individual color variants identifiable through their product name, code, material and color. The picker and series cards feed a shared comparison and cart; product details provide another route into that cart. This gives a color selection a concrete product identity as it moves toward purchase.

Within a series, two candidates sit side by side with image, material, color and price aligned. Each has its own add-to-cart action, so comparison can lead directly to a purchase choice. The interface limits this to two products from the same series; cross-series comparison is outside that flow.

I kept order contents editable at checkout. Operators can correct quantities or remove an item in the summary while completing customer and shipping details. Desktop puts these areas alongside each other; mobile collapses the summary while keeping the total and submission control at the bottom. The choice remains editable up to confirmation.

A concrete development iteration was mobile comparison. In March 2026, I added a bottom sheet alongside the desktop table, with aligned attributes, a scrollable middle and a purchase action for each product. It gave the smaller screen its own arrangement while preserving the comparison task.

The implementation needed both layouts to use the same selected products and open state. I kept those shared, along with the cart actions, and changed the presentation at the mobile breakpoint.

The empty and single-product states also needed a place in the smaller layout, so the sheet includes a prompt when only one candidate has been selected.

Checking the reconstruction

For this portfolio, the rebuilt flow was checked with demo products: selecting two colors, opening comparison, adding both to the cart and editing quantities in the cart and checkout. Totals updated, and the comparison and cart persisted after navigation and reload.