Skip to content
FAAKHIR.MOTION®
All work

(UI/UX case study · 01)

MuComm

From a 2022 template to a site that answers a B2B buyer's questions in order.
UX auditInformation architectureInteraction designWeb
MuComm redesign: homepage hero at desktop width
(Scroll-through · mucomm.vercel.app)
Client
MuComm
Role
UX audit · Information architecture · UI & interaction design · Front-end build
Year
2026 · about 2 weeks
Type
Self-initiated concept redesign
Tools
Figma, Claude Code, Next.js, Vercel
Links
Old siteNew site

Front-end built with Claude Code under my creative direction: I set the structure, the flow and the visual references, and the AI wrote most of the code.

(Overview)

MuComm's site was a 2022 Bootstrap template: a rotating carousel instead of a headline, services as bare lists, unlabelled client logos and leftover template placeholders. I rebuilt it around the five questions a B2B client asks before getting in touch — who you are, what you do, how you work, who they'll work with, and whether you've done it for people like them.
(The product)
A media-management and strategic-communication agency founded in 2006, with offices in Islamabad, Karachi and Lahore and a sister company in Illinois.
(Who it's for)
Corporates, banks, pharma companies, developers and the social sector, choosing a communications partner.
(The page's job)
Qualified enquiries from organisations — the right people getting in touch about the right kind of work.

The problem

What the audit of the original site found.

  1. 01

    No headline at all

    The page had no H1. The hero was a three-slide carousel, so two-thirds of the message was hidden at any moment — and most people don't wait for slides.

    Original MuComm hero: a rotating carousel slide reading 'Catalyzing goodwill' over a stock image, with no headline
    (Before)

  2. 02

    Labels that don't help

    "Facts" and "Forte" name the type of content, not what the visitor will learn. Services were raw lists with no explanation of what a client actually gets.

    Original 'Forte' section: six icons with short bullet lists of service names
    (Before)

  3. 03

    Leadership as one paragraph

    Agencies are bought on people, but the leadership section was a single block of text, with no photo and no structure.

    Original leadership section: one centred paragraph about the CEO, with no photo
    (Before)

  4. 04

    Client logos nobody could read

    The logos were CSS background images — no names, no sectors, nothing for screen readers or search engines. The section's entire readable text was "CLIENTS SERVED".

    Original 'Clients served' grid of logo images with no names or sectors
    (Before)

  5. 05

    A high-friction form

    Every field was required, including phone, and nothing said what would happen after sending.

    Original contact section: a blue panel with name, email, phone and message fields, all required
    (Before)

  6. 06

    Visibly a template

    "Powered by Epsilon", © 2022, hidden "Project Name" pop-ups with demo images, five typefaces and six images without alt text.

Principles

  1. 01

    One clear promise above the fold

    A single fixed headline replaces three hidden slides.

  2. 02

    Answer questions in the order people ask them

    Who → what → how → who with → for whom → where → how to start. One section per question.

  3. 03

    Build trust deliberately

    Twenty years, named clients, real leaders and real offices all appear before the contact form.

  4. 04

    One primary action, always within reach

    "Let's talk" lives in the nav, the hero, after the client wall and in the footer.

Key decisions

  1. Headline

    (Before)

    No H1; a rotating three-slide carousel

    (After)

    One fixed headline, "Catalyzing goodwill.", plus a positioning line naming who MuComm serves and where

    (Why it's better)

    One clear message beats three hidden ones — and it works for search engines and screen readers too.

    Before: MuComm's carousel hero
    (Before)
    After: the fixed 'Catalyzing goodwill.' headline with live clocks for Islamabad and Romeoville
    (After)

  2. Credibility at a glance

    (Before)

    Founding year buried in a paragraph

    (After)

    "Twenty years, 2006–2026" and live clocks for Islamabad and Romeoville in the hero

    (Why it's better)

    Proves longevity and a real two-country presence without reading a word of body copy.

  3. About

    (Before)

    "Facts": three dense paragraphs

    (After)

    Three cards with benefit headlines: Founded on journalism · From Islamabad to Illinois · Campaigns that move people

    (Why it's better)

    The same facts, now scannable, each with a takeaway.

    Before: the 'Facts' section with three dense text columns
    (Before)
    After: an About section with a large summary and three labelled cards
    (After)

  4. Services

    (Before)

    Six bullet lists

    (After)

    "Six disciplines. One conversation." — each with a value statement, service tags and a photo

    (Why it's better)

    Tells the client what they get, not just the category names.

    Before: services as six short bullet lists
    (Before)
    After: 'Six disciplines. One conversation.' with a value statement and tags for each discipline
    (After)

  5. Process

    (Before)

    None

    (After)

    A five-step approach: Listen → Frame → Create → Amplify → Measure

    (Why it's better)

    B2B buyers fear the unknown. A visible process reduces risk and shows method.

    After: 'How goodwill is built.' — numbered steps Listen, Frame and Create on a blue panel
    (After)

  6. Leadership

    (Before)

    A one-paragraph bio

    (After)

    Portrait, a "Two decades, one conviction" headline, a 1994–2026 timeline and named past organisations

    (Why it's better)

    Agencies are bought on people. A face and a track record build trust.

    Before: a single paragraph about the CEO
    (Before)
    After: the CEO's portrait with role, story and past organisations
    (After)

  7. Client proof

    (Before)

    Logo images with no names or alt text

    (After)

    11 named logos, each labelled by sector, then "Your organisation, next? Let's talk"

    (Why it's better)

    Visitors find someone like them — and the ask arrives when trust is highest.

    Before: an unlabelled grid of client logos
    (Before)
    After: 'In good company.' — a named logo wall ending in a 'Your organisation, next?' card
    (After)

  8. Offices

    (Before)

    One sentence

    (After)

    A section for each city — HQ, representation offices and the US sister company — with photos and local times

    (Why it's better)

    Makes the "Pakistan / USA" claim concrete and credible.

    After: 'Islamabad to Illinois.' — four office cards with city photos
    (After)

  9. Contact form

    (Before)

    All fields required, no context

    (After)

    Interest chips for the six disciplines, organisation added, phone optional, "We'll come back with a point of view"

    (Why it's better)

    Pre-qualifies and routes leads, lowers effort and sets expectations for the reply.

    Before: a contact form where every field is required
    (Before)
    After: 'Let's catalyze goodwill together.' with interest chips and an optional phone field
    (After)

(On a phone)

The same first screen at 390 px wide, before and after.

MuComm's original homepage on a phone
(Before)
MuComm redesign on a phone
(After)

Structure

Each section answers the next question a B2B buyer asks — with the same pattern every time: label, headline, support line, then evidence.

(Old page order)

  1. 01Nav: Facts · Forte · Leadership · Clients · Contact
  2. 023-slide carousel
  3. 03Facts
  4. 04Forte (6 bullet lists)
  5. 05Leadership (one paragraph)
  6. 06Clients (unlabelled logos)
  7. 07Contact form
  8. 08Footer (© 2022, "Powered by Epsilon")

(New page order)

  1. 01Fixed nav + "Let's talk"
  2. 02Hero: one headline, live clocks, two CTAs
  3. 03About: three cards
  4. 04Forte: six disciplines
  5. 05Promise band
  6. 06Approach: Listen → Measure
  7. 07Leadership
  8. 08Clients: named, by sector + CTA
  9. 09Offices: four cities
  10. 10Contact: interest chips
  11. 11Footer: explore, offices, © 2026
The old page in full (archived)The new site, live

Outcome

This is a concept redesign, so there are no live results. Below is what each change is designed to do, and how I'd test whether it works.

(What it's designed to do)

  • Designed to make the agency legible in five seconds: what it does, who for, and where.
  • Designed to lift lead quality: interest chips tell MuComm what an enquiry is about before they reply.
  • Designed to lower form friction: phone is optional and required fields are marked.
  • Accessibility and SEO foundations in place: an H1, a <main> landmark, a skip link, a meta description, a share image and descriptive alt text on every image (6 were missing).

(How I'd measure it)

  • 5-second test on both versions: "What does this company do, and where is it based?"
  • First-click test: "You want to hire them for a CSR campaign. Where do you click?"
  • Live metrics: form submissions, which interest chips get chosen, and clicks on "Let's talk" by position.

(Trade-offs)

  • About 2× longer to scroll (≈6,200 px → ≈13,300 px at 1440 px), though each section is lighter and easier to skim.
  • More imagery means images must be optimised for slower connections — which matters for a Pakistan-based audience.

(Reflection)

Next I'd replace any stock photography with MuComm's real events and publications, and run the first-click test with people who commission communications work. If the interest chips are popular, they could route enquiries straight to the right person.

Have a product website that needs to work harder?

Start a project

(Next project · UI/UX)

LegalConnect

A polished site that spoke to everyone — restructured so each side of the marketplace finds its path.