Building Materials Retailer — E-Commerce Site

Eleven screens from product discovery through to checkout.

E-commerce website design for a building materials retailerE-commerce website design for a building materials retailer

A retail e-commerce site for a local construction-material supplier, built around product discovery, customer ratings, promotional banners, account creation and a cart-to-checkout flow. I designed eleven responsive screens across desktop and mobile — home, products, all products, cart, checkout, sign-up, login, about and a mobile menu overlay — with the retail component layer: search box, cart badge and product review patterns. Sole website UI designer; identity and the WooCommerce build were other people's.

Role
Sole website UI designer
Timeframe
Jul 2023 – Jul 2023
Stack
Figma
Evidence
  • Design file

Open the design fileArchived snapshot of the built site

Sole Website UI Designer for JK Construfaz (later rebranded as Casa Construfaz), a local building materials, construction supplies, and hardware retail store ('Produtos de A a Z'). Designed 11 responsive e-commerce screen layouts on the primary Design page spanning product discovery, department categories, search overlay, customer ratings (Avaliações), shopping cart, customer authentication, and checkout (Início, Produtos, Todos os Produtos, Carrinho, Checkout, Criar Conta, Login, Sobre nós, Mobile, MenuOverlay) supported by a 31-node Style Guide in Figma (file key 8rWAKIOTfPylYY6aRi4WaZ).

Agency employment at Sagitta delivering in July 2023. Juan served as the sole website UI designer within the agency team: Kelvin Bezerra created the brand identity and logo, Juan designed the complete retail e-commerce storefront and purchasing funnel in Figma, and an external no-code developer implemented and published the store. The storefront of that era ran on Tray, a hosted e-commerce platform from Brazil, not on WordPress/WooCommerce.

Retail e-commerce UX: construction materials from A to Z

11
commerce screen layouts on the primary Design page
31
e-commerce design tokens and retail components in Style Guide
Tray
e-commerce platform hosting the verified era storefront
100%
purchasing funnel designed (Search → Cart → Checkout)

Retail hardware and building supply stores manage vast, diverse inventories—ranging from bulk construction cement and hydraulic pipes to precision power tools and decorative finishes. Designing an effective e-commerce experience for this sector requires fast product findability: a contractor on a job site needing urgent plumbing fittings has zero patience for buried categories or unreadable search results.

Full purchasing funnel across 11 responsive screens

On the primary Design page (node 1:15), I designed the complete end-to-end commerce experience:

  • Storefront Homepage (Início) — Featured promotional top banner (TopBanner), seasonal department spotlights, brand value propositions (fast regional delivery, installment options), and bestselling items.
  • Product Discovery & Filtering (Produtos & Todos os Produtos) — Departmental category grids with faceted sidebar filters (brand, price, availability) and star ratings (Avaliações).
  • Search & Mobile Navigation (MenuOverlay & Search Box) — Prominent search bar with instant keyword matching and a full-screen mobile drawer menu for handheld browsing.
  • Cart & Checkout Funnel (Carrinho & Checkout) — Clean shopping cart drawer showing order line items, quantity steppers, regional freight calculator, and streamlined single-page checkout.
  • Customer Account Flow (Criar Conta & Login) — Lightweight authentication views for order tracking and repeat purchasing.
Never say this one was built on WordPress. The archived era storefront (2024-07-14) runs on Tray with zero Elementor markers. The 'no-code developer on WordPress' line is accurate for other agency websites in this cohort, but factually wrong for this record. Accurate platform attribution matters.

Style guide tokens for retail e-commerce

The 31-node Style Guide page (node 1:16) standardized retail UI components: promotional banners, cart quantity badges, product review star scales, payment method logos, primary and secondary brand colors, and structured typography hierarchies designed to keep product prices clearly readable across mobile screens.

What this project is and is not

  • Not a WordPress or WooCommerce build. The era storefront was implemented on Tray, an enterprise Brazilian e-commerce platform.
  • Not brand identity or logo design. Kelvin Bezerra created the JK Construfaz logo and visual assets.
  • Not the current live website. The client rebranded to Casa Construfaz and replaced the site with a later third-party rebuild; historical delivery is verified via the 2024-07-14 Wayback snapshot.
  • Not e-commerce inventory management or logistics. I designed the front-end user experience, not ERP inventory sync or warehouse operations.
  • Not supported by revenue metrics. No transaction numbers, GMV, or sales figures exist in the portfolio record.

The impact of structured retail e-commerce

JK Construfaz demonstrates how thoughtful UI architecture translates heavy physical retail into an accessible online storefront. By structuring intuitive product discovery, prominent search, and frictionless checkout, the design provided a clear, effective digital sales channel for a regional building supply store.

Evidence

The e-commerce storefront was implemented and shipped to production. The company subsequently rebranded from JK Construfaz to Casa Construfaz and rebuilt their storefront with a third party. Historical shipping is verified via an era Wayback Machine capture (2024-07-14, 351 KB running on Tray with zero Elementor markers), validating the retail layout. No sales or transaction volume metrics exist. This case study documents retail e-commerce UX, product catalog navigation, and shopping cart flows.