A steel manufacturer and a supply depot with different buyers
Madina Steel Industry was founded by Mian Muhammad Saeed, who still runs it as CEO, and has operated from 42 km Ferozepur Road in Kasur since 1980. The plant takes imported steel scrap through standardized billets and re-rolls them into deformed bars in G-40 and G-60 grades across three composite units. That steel goes into commercial buildings, bridges, dams, and public works, so the people the company needs to convince are engineers, procurement officers, and institutional clients who check approvals before they pick up the phone.
The second business, MSI Sales Depot, trades from the Lahore–Kasur Road in Lahore, opposite Bilqees Sarwar Hospital. It stocks Madina Steel bars, Maple and Pioneer cement, and GM plumbing and electrical fittings, and sells to contractors and home builders who want a price today and pickup or delivery the same day. Both businesses needed a web presence, but one shared site would have served neither audience well. Sigi’s web development team took both on as a single engagement with two distinct deliverables.
The problem: credibility for one site, speed to a quote for the other
A steel manufacturer website and a building supplies catalog fail for opposite reasons. The first fails when it cannot prove standing; the second fails when it puts a form between a contractor and a phone number. Four specific gaps shaped the brief:
- No public record of the manufacturer’s ISO 9001:2015 and ISO 14001:2015 certification, Pakistan Engineering Council registration, or the DHA and C&W Department enlistments that institutional buyers ask about first.
- Billet and deformed-bar specifications — sizes, lengths, standards, packing — lived in phone calls and printed sheets rather than on a page a consultant could link to in a tender.
- The depot’s customers already buy by phone and WhatsApp, so a conventional brochure site with a contact form would have added a step instead of removing one.
- The group wanted one visual identity across both properties without making the catalog look like a corporate site, or the corporate site look like a shop.
The stack we built it on
Design started in Figma with a single system — one palette, one type scale, one button style, one header pattern — and then split into two page templates. Sigi’s UI/UX design practice produced the manufacturer’s multi-page layout and the depot’s single-scroll catalog from the same components, so the two sites read as one family without sharing a page structure.
The manufacturer site is a multi-page build in hand-written HTML, CSS, and JavaScript, served through a PHP application on Laravel with clean routes (/about, /products, /achievements, /contact_us) so the client can refresh product specs, approval images, and project logos without touching the templates. The depot site is a single static page: anchor navigation to the catalog, click-to-call tel: links, and wa.me deep links that open WhatsApp with a prefilled quote request. No checkout, no account system, no plugin stack — the depot sells over the phone, and the site is built to hand the visitor to that phone as fast as possible.
Why the depot got one page instead of a CMS-driven catalog
How the platform is built and run
The two sites are marketing websites built from one design system and sized to how each business actually sells:
- One Figma design system — a single palette, type scale, button style and header — split into two page templates, so the manufacturer site and the depot catalog read as one family without sharing a page structure.
- The manufacturer site as a multi-page build in hand-written HTML, CSS and JavaScript served through a PHP application on Laravel, with clean routes (/about, /products, /achievements, /contact_us) so the client can refresh specs, approval images and project logos without touching the templates.
- The depot site as a single static page — anchor navigation, click-to-call tel: links, and wa.me deep links that open WhatsApp with a prefilled quote request — deliberately with no CMS, checkout or account system.
- Figma sign-off before any markup, content such as certificate scans, project logos and specifications collected alongside the build, and both sites checked on mobile and desktop before launch, with particular attention to the WhatsApp and tel: links.
What we implemented: what each website contains
Sigi designed and built both websites end to end. Here is what we implemented on each.
Madina Steel Industry: the steel manufacturer website
- Home — the bilingual tagline (“build structures that stands firm” [sic], alongside its Urdu counterpart), a WhatsApp click-to-chat link in the header, and a client logo strip featuring the University of Punjab, Lahore High Court, CMH Cardiac Lahore, Lahore Medical & Dental College, Rashid Latif Medical College, Divine Gardens DHA, The Educators Campus, and Honda Point Lahore.
- About Us — the founding story from a small mill in 1980, a message from the CEO, the three composite units with their furnaces and mills, and the environmental investments the company wants on record: water treatment plants, a dry scrubber, and tree planting.
- Products — square billets from 75×75 mm to 100×100 mm; deformed bars G40 and G60 from 6 mm to 32 mm in 40 ft to 55 ft lengths, referenced against ASTM, BS, DIN, and AISI standards, with packing options listed per product.
- Achievements — approvals and certifications in one place: ISO 9001:2015, ISO 14001:2015, Pakistan Engineering Council, PSS 1879/2018(R), C&W Department enlisted supplier, DHA enlisted manufacturer, Federation of Pakistan Chambers membership, and LCCI Achievement Awards for 2008, 2009, 2011, and 2012, with a View Certifications link to the scanned documents.
- Contact Us — head office in Lahore Cantt, the plant at 42 km Ferozepur Road, the sales depot address, two phone numbers, an email address, a WhatsApp link, and a Send Message form for written inquiries.
MSI Sales Depot: the building supplies catalog
- Hero — “Trusted Construction Supplies” with Call, WhatsApp, and View Catalog buttons above the fold.
- Catalog grid — nine product cards tagged Steel, Cement, Hardware, Plumbing, or Electrical: Madina Steel G-60 and G-40 bars, Maple and Pioneer cement, steel rings, 20-gauge wire, GM electric fittings, GM sewerage fittings, and GM PPRC pipes.
- Service strip — same-day pickup, bulk orders, and delivery, stated plainly so a contractor knows the terms before calling.
- Contact footer — street address, Monday to Saturday 9:00–18:00 hours, a tel: link, and a wa.me link with the prefilled quote message.
- Mobile-first layout — the page is sized for the phones contractors use on site, with thumb-sized call and WhatsApp buttons.
Delivery: from Figma review to launch
The client reviewed and signed off both layouts in Figma before any markup was written, which kept revisions cheap. The manufacturer site depended on the client supplying certificate scans, project logos, and product specifications, so content collection ran alongside the build rather than after it. Both sites were checked on mobile and desktop before going live, with particular attention to the WhatsApp and tel: links, because a broken deep link on the depot site is a lost sale.
The team and expertise behind the build
Both sites were delivered by one cross-functional Sigi team — UI/UX designers and web engineers working as a single unit rather than handing the build between vendors. Sigi hires only specialists: every designer and engineer is an expert in their own field, and we invest in the team as they deliver, supporting certifications and continuous learning so expert, motivated people stay on every build. It is the model we have run since 2016: deep, cross-industry expertise, here applied from one shared Figma design system to a multi-page manufacturer site on Laravel and PHP and a single-page depot catalog built to hand a contractor straight to a call or WhatsApp chat. Serving two very different buyers from one visual identity is exactly the kind of considered web work our team is built for — the same capability behind our web application development and UI/UX design work.
What shipped: a multi-page manufacturer site and a one-page depot catalog
Two live websites. The manufacturer site covers Home, About Us, Products, Achievements, and Contact Us, plus a certifications download, and puts every approval a tender consultant asks about — both ISO certifications, the Pakistan Engineering Council registration, the PSS standard, the C&W and DHA enlistments, the Chambers membership, and four LCCI awards — on one page with a public URL. The Products page states billet sizes, bar diameters, lengths, standards, and packing for both product families, so a specification no longer has to be read out over the phone. The depot catalog is one page with nine product cards, three routes to an inquiry above the fold (Call, WhatsApp, View Catalog), and a prefilled WhatsApp message, so a contractor reaches a chat in one tap. The questions institutional buyers ask before a first call — who owns the company, what it makes, to which standards, with which approvals, and for whom — now have a public answer.
Both sites are live: the Madina Steel Industry website and the MSI Sales Depot catalog.
Related corporate website work and next steps
If your business needs a credibility-first corporate site, the SHS Estate & Builders website shows the same approach applied to real estate, and the Havoc DFW event website shows a single-page build tuned for one conversion. For a manufacturer or supplier weighing a multi-page site against a lean catalog, contact Sigi Technologies and we will scope which one your buyers actually need.
