◈
Quote basket
Buyers add products with quantities and turn the list into a quote request in one go.
Client
Departmentalldepartmentall.com
01 - Live Mockup · Desktop
6 screens. One design language.
Pick a page from the list on the left, then scroll the design yourself on the MacBook screen on the right. You’re in full control.
Scroll to explore
02 - Live Mockup · Mobile
5 screens, in your pocket.
5 mobile screens, designed for 360-428 px viewports. You can scroll inside the centered phone yourself; click the side phones to bring them to the center.
01 · Brief
Catalog and collections in one storefront.
Departmentall supplies logo-printed promotional products and corporate gifts from Kağıthane, Istanbul. Pens, planners, flasks, tech items and branded products are sold in corporate bulk orders.
The need
Corporate buyers want to browse a wide promotional catalog and also look at curated collections separately. Prices and stock had to be current, and asking for a quote should not require an account.
Goal
Show the category catalog and branded collections in separate showcases, refresh price and stock as the page opens, and take quotes without sign-up.
Approach
A Departmentall design layer on top of the shared core of the EDNA B2B infrastructure. The collection showcases and the branding guide were designed separately for this brand.
Solution
A quote basket with quantities, an account-free quote centre, 620 product pages across 6 collection showcases, live price and stock, 13 catalogs and a branding guide covering eight print methods.
Outcome
Live at departmentall.com with 2,431 catalog products and 42 category pages.
0
Catalog products
Across 8 main and 34 sub-categories
0
Collection products
In 6 collection showcases
0
Catalogs
Browsable online, downloadable as PDF
0
Print methods
Explained in the branding guide
02 · What we built
6 building blocks, one site.
A corporate gifts platform that presents promotional products and branded collections with live prices, stock, catalogs and a quote centre that needs no account.
03
03 · Method & stack
Which method, which tools?
Left: how we ran the project. Right: the technologies read from the project’s own dependency list.
- /01Catalog and collection architectureStrategy
- /02Interface and design systemUI
- /03Mobile-first developmentFrontend
- /04Live pricing and quote flowFlow
- /05LaunchLaunch
- /06Next.jsFramework
- /07ReactUI
- /08TypeScriptLanguage
- /09Tailwind CSSStyling
- /10SupabaseData + Auth
DEPARTMENTALL
The next project could be yours
Let’s take our B2B infrastructure to your sector.
Your sector, catalog and customers are different; the method stays the same. Write to us and let’s talk about your project.