Redesigning the iDesign.Market website

What the old site hid

The old site buried iDesign.Market’s connected workflow for quotes, orders, site updates and payments. I redesigned twelve pages, keeping the brand, customers and published pricing.

One job: book demos

For this self-initiated redesign, I wanted the owner of a 20-person firm to understand iDesign.Market on a phone and book a demo.

The audit

I reviewed five key pages on desktop and mobile, checking their copy, first impressions and trust signals.

First impression

Before

Before

• The headline, “Run Your Entire Project Workflow from One Powerful Platform”, could describe any project tool. Procore, Powerplay and Studio Designer make the same claim in different words.
• “AI-powered operating system” is the first thing you read, but nothing on the page says what the AI does. An AI claim with nothing behind it makes a firm owner trust the page less.
• The idea that sets iDesign apart, BOQ → Material Indent → Purchase Orders → Update Delivery → Inventory → Vendor Payments, appears only once, as a line of text inside the second feature block.

Language

Across the five pages I reviewed, “streamline” appears 21 times, “seamless” or “seamlessly” 16 times and “effortless” 7 times. The features page alone uses “seamless” 11 times in 832 words.

Trust

This was the most serious finding. A B2B buyer is deciding whether to trust a vendor, and these mistakes make that harder.

Before

A firm owner who spots one of these has a reason to doubt the rest of the page.

The sub-pages

Before

Before

• All five industry pages share the same subhead, word for word: “Our platform offers a range of powerful tools that will help streamline your operations, increase efficiency, and drive profitability.” Only the verb in the headline changes: Empowering, Transforming or Revolutionizing.
• The architects page lists its tools under the heading “An Array of Essential Tools Interior Firms Prefer”.
• Every industry page shows the same three testimonials, including the two quotes credited to different people elsewhere on the site.
• The About page’s stock hero, with a US flag and another company’s branding, sits on the site of a company serving India, the UAE, Australia and New Zealand.
• The contact page lists two office addresses and one general email, but no phone number, and the form has no way to say what you need help with.
• The footer’s “T&C” link goes to /cookie-policy, which holds the Terms & Conditions. There is no separate cookie policy; cookies are covered only in section 5 of the privacy policy.
• The privacy policy’s “Terms of Use” link points to /terms-and-conditions, which loads a blank page.
• The privacy policy is set in fully justified text with no table of contents across ten sections, and its header drops the main navigation.

What was already working

iDesign.Market publishes its pricing, which most competitors don’t. It has recognisable customers (Ambience, NextOffice, ANJ, Gallant, AKDesigno) and real quotes from them, five clearly defined industries and a working mobile app. I kept all of them and made them easier to find.

The firm owner

I designed for firm owners and principals, typically leading teams of 5–100, while accounting for the people who use the product day to day.

Design principles that came out of this

1. Say it plainly. One idea per section and one headline per idea.
2. Show the product. Every product claim sits next to a screen that shows it working.
3. Show their world. Photos of finished spaces and real sites instead of office stock and abstract gradients.
4. Use their words. BOQ, indent, GRN, DPR and running bill are the documents they already work with.
5. One next step. Booking a demo is the main action on every page.

Competitors

I compared the homepages of competitors named in iDesign’s FAQ, plus Powerplay, an Indian player.

The homepages lead with broad promises. I wanted to show the connections that matter to iDesign’s customers: client approval, a purchase order, a site report and the matching payment.

The direction: show one project moving through the system.

iDesign also had three advantages the old site wasn’t using. It publishes its pricing in rupees, it uses the industry’s own document names, and it serves firms that both design and build, which none of the global players focus on.

Familiar B2B conventions

Owners often see the site on a phone, between site visits. So I used the layouts of established B2B software sites, which they already know how to read.

For this audience, a premium feel comes from aligned type, consistent spacing and real numbers. Every page uses one connected record for each project, realistic project data (the same marble floor, PO-0381 and 24.3% margin wherever the product appears) and the industry’s own vocabulary.

In the industry’s words

The positioning line, the message hierarchy and the rewritten headlines.

Positioning

For interior and construction firms that design and build, iDesign.Market is the one system for quotations, purchasing, site progress and payments, so the owner always knows where every project and every rupee stands.

Message hierarchy

Tone of voice

• Be specific. “Every purchase tied to the budget” instead of “maximise profitability”.
• Use the trade’s words. BOQ, indent, GRN, daily progress report, running bill. If a site supervisor wouldn’t say it, it isn’t on the site.
• Talk about outcomes. Time saved, margin protected, fewer calls and fewer surprises.
• Keep it short. Short sentences in the active voice, one idea each.
• A banned list. Seamless, streamline, effortless, elevate, empower, revolutionise, game-changing (unless a customer says it), and any AI claim the product can’t demonstrate on the page.

Before and after

I also dropped “AI-powered” from the lead. If iDesign wants to talk about AI, it should be one concrete feature, shown working, on the product pages.

Ordered by the buyer’s questions

I reordered the homepage around the questions a firm owner asks before booking a demo.

I removed two sections. The “Join us on mobile” block merged into the mobile-app section. The repeated FAQ, which appeared on every page with the same four questions, became one rewritten FAQ with six different answers.

Site map

The other pages work the same way: each has one job, and each ends with the same action.

The header is the same on every page: Product (an overview plus the four product areas), Solutions (the five industries), Pricing, Customers and Company, with “Book a demo” always visible.

A plain visual system

One type family, blue for actions, and real photography.

Typography

I use one family, Figtree, from 400 to 700. It stays readable at small sizes and on low-cost Android phones, which much of this audience uses, and sets compactly at headline sizes. With a single family, the photography and product screens carry the personality. Headlines are bold with tight tracking (−0.03em); body copy is 17–20px with a 1.6 line height for comfortable reading on mobile.

Colour

I kept iDesign’s blue, refined slightly for contrast (6.9:1 against white). Changing a brand colour on a marketing redesign creates friction with the product, the app icon and sales material, for no gain to the buyer. What I changed is how it’s used: blue now means “action” and nothing else. Navy carries depth for the customer-story band and footer. A warm neutral sits behind interior photography. A cool neutral sits behind product screens so the UI reads as software. Status colours (green, amber) appear only inside the product, the way they do in the app.

Photography

These firms do good-looking work, so the site shows it: finished spaces and people at work, such as a completed reception, materials in hand, engineers on site, a tower under construction and a fitted store, all in natural light. No posed handshakes or laptops on white desks. In this prototype I used licence-free Unsplash photos as stand-ins. At launch they should be replaced with photos of iDesign customers’ real projects.

Product screens

The old site showed the product as small cards floating over stock photos. I show it large and readable, with realistic project data: a fit-out timeline, a PO table with delivery status, a client approval. The screens animate to show cause and effect: bars fill, an approval resolves. Before launch they should be checked against the live product so nothing is promised that the app doesn’t do.

Shape, icons and grid

• Grid: 1240px container, 12 columns, 24px gutters; sections have 80–136px vertical padding.
• Corners: 8px on buttons and inputs, 12–20px on cards, 28px on large photographs.
• Icons: one line-icon set (Lucide), one stroke weight, always inside a soft blue tile so they read as a system.
• Depth: two shadow levels, resting and lifted, with the second used for hover.

The homepage, top to bottom

What each homepage section does, and why.

Navigation

Hero

Before

After

Customer logos

The problem

Platform tabs

How it works

Customer story

Industries

Mobile app

Testimonials and press

Pricing

FAQ and demo

On mobile

Before

After

On phones, buttons go full width, the timeline becomes a vertical list, tabs and pricing bands reflow, industry cards swipe, and the hero cards resize so the photo stays visible. No content is hidden on small screens.

Eleven more pages

Every page shares the same header, footer, type, colour, components and product screens, so a visitor doesn’t have to relearn the site.

Shared building blocks

• Page hero: breadcrumb, eyebrow, one headline, one sentence and two actions. Split with a photo on the industry and About pages; centred on Product, Pricing and Contact, where the product or the form is the visual.
• Product screens: eight HTML screens (timeline, cost, client approval, all projects, drawing register, multi-site dashboard, portfolio budget and store rollout), all using the same sample project data so the story stays consistent from page to page.
• Proof: the customer logo row, three attributed quotes and press logos, reused on each page.
• Closing call to action: the same blue band on every page, leading to the demo form.

Product

Before

After

Pricing

Before

After

Industry pages

Before

After

About

Before

After

Contact

Before

After

Legal pages

Before

After

Motion

What moves on the site, and why. The product screens move to show cause and effect.

Principles

• Cause and effect. A bar fills because progress happened, and an approval resolves because the client acted. Anything that doesn’t explain something stays still.
• One easing curve. cubic-bezier(.16, 1, .3, 1) across the site, 200–500ms for interface and up to 1.2s for large reveals.
• Reading first. Nothing blocks reading, takes over the scroll or loops where it would distract.
• Reduced motion. With “reduce motion” switched on, everything appears in its final state.

Demo requests

If the site launches, the plan is to compare demo requests against a two-week baseline at 30, 60 and 90 days after launch.

The first test I’d run: the new headline against a margin-led alternative (“Know your margin before the project ends.”) to see which promise this audience responds to.

What comes next

With the core pages in place, the next steps I’d recommend are a library of customer stories built around real project photography, a deeper page for each product area, a cookie policy once counsel has written one, and moving the content into a CMS so the marketing team can publish without a developer.