# Mills find any shade by its code. Buyers reorder before the colour fades. ARS Colors · online store for colour boxes, India, client work **A design, not live yet** · Before is the live site, after is the design file ARS Colors in India makes colour-reference boxes for carpet, textile and yarn makers. I designed its online store, every page for desktop and phone. The design finds any of 1,400 shades by its code. It turns a faded box into a reminder and a 2-click reorder. It is a design, not live yet. ## The problem 7 colour systems sit on flat pages. A cart table leads to a separate checkout. ## What changed - The whole cost beside the price, and the next system 1 tap away - Any of 1,400 shades found by typing its code - A faded box turned into a reminder and a 2-click reorder ## The result The flow, every page at 2 sizes, and the foundations under them · From the design file ## Tab by tab ### Home Trust first, then 2 clear ways in. - Proof first: 65+ countries, 3 seals. - 1 line says what it is and for whom. - 2 ways in: browse, or build a box. - A fan of shades rises along the fold. - Up top, the box that is due. - The homepage's first fold, whole in a browser window on a laptop and on a phone below it. A top bar greets a returning buyer with the box that is due. Then a dark hero: 65+ countries since 2001, 3 seals, the line The world's only comprehensive colour-reference system, 6,551 shades across wool and viscose for mills, studios and buying houses, 2 buttons, Explore Colour Systems and Customize Your Box, and a fan of shades along its foot. The 5 steps light up in turn, a pin landing on each, and the fan plays on the 4th. ### Shades 1,400 shades, 1 code each. - Overview: all 1,400 shades sit in 1 grid by hue, the whole box at once. - Speed: buyers quote codes, so typing 4H-04 opens that shade. - Trust: tray, row and column fix each code, the same at every mill. - The shade explorer on a phone: a search for a code like 4H-04, and all 1,400 shades in 1 grid by hue. A tapped swatch shows its tray, row and column. Above it, the code: the colour equals tray 4, row H, column 04. ### Product page The whole cost, beside the price. - Certainty: courier free, customs extra, said at the price. - Comparison: another system is 1 tap away, under the price. - Timing: a matching box shows at Add to Cart, as buyers decide. - The live product page, then the new one, whole in 1 browser window with a slider. Before: a big ARS 1400 Wool title, a paragraph, the price and Add To Cart, with the shipping terms in small type under it. After: a photo of the poms, the price with courier and insurance free and customs extra, Switch system, Add to Cart, and a matching viscose box to add. The price box is lifted out over its own place, half as big again. ### Custom box A custom box in 7 short steps. - Effort: 1 question a step, and a bar shows how many are left. - Help: every step links to a person, by call or email. - Honesty: a price range and the minimum order show before sending. - The 7 steps play in 1 phone: material, shade count, pom size, packing, logo, box material, and the review. Every step has a step bar and Call or email us. Logo and box material can be skipped. The review shows an estimated range and a minimum order of 25 boxes before Submit Request. ### Reorder A faded box becomes the next order. - Reason: the page says poms from a 2023 order may have faded. - Timing: a returning buyer is greeted with the box that is due. - Effort: Reorder sits in that bar across the store, 1 tap away. - The product page on a phone: the top bar says the ARS 600R box may be due for a refresh, with Reorder beside it, and under the photo, You ordered this in 2023, so your poms may have faded. Beside it, the home page: light and handling ruin a reference, with a pom on day one and after sunlight. ### Flow 3 ways in, all on 1 map. - Choice: buy a system, build a box, or talk to a person, from home. - Default: guest checkout first, an account only after the order. - Loop: the account leads back to the cart, so a reorder is 1 path. - The user flow from the FigJam, 24 steps, redrawn. From the home page: buy a system and end in an order, build a box and end in a quote request, or talk to a person and end in an enquiry. Checkout is guest by default, or sign in with a code, a password, Google or Apple. After the order a guest is offered an account, and the account leads back to the cart. ### Handover The file's own foundations. - Colours: 8, each with 1 job, so no page invents a 9th. - Titles: PT Serif in 9 sizes, so every heading has its step. - Body: Mukta in 6 sizes, 24 down to 12 for captions. - In use: 2 parts, from these only. - The Figma file's own Foundations, 4 whole pages in a deck, 1 at a time, nothing scrolling inside. Colours: 8 swatches, paper, cream, greige, clay, ink, stone, ochre and moss, each with its hex code and its job, from page background to success ticks. Titles: PT Serif, its alphabet, then every style at its own size, Display 56 down to Title 8 at 12, with its line height. Body: Mukta, its alphabet, then Body 2xl at 24 down to Body xs at 12. In use: the product page's buy column, from its title to Add to Cart, beside the shade code block, tray 4, row H, column 04. Page: https://www.surinder.design/work/ars