( By Munawar Khel / Independent Practice / Freelance UI/UX Designer / 2018 / 7 min read )
ChatBrand
Delivered a complete responsive marketing site for a live chat SaaS product, from proposition through to final UI, as a solo freelance engagement
The result and the decision behind it
( What it did )
Delivered a complete responsive marketing site for a live chat SaaS product, from proposition through to final UI, as a solo freelance engagement
( The decision behind it )
Show both halves of the product in one composition
The visitor recognises the widget because they have seen one elsewhere, but the thing being sold is the workspace. Showing only the dashboard loses recognition; showing only the widget makes the product look trivial. Layering both delivers recognition and scope in one glance, which is the single hardest thing to achieve on a page for software that looks like everyone else's.
Generated schematic, not a screenshot. Real imagery to follow.
( The account )
Context
ChatBrand is live chat software that a business embeds on its own website. The product has two faces: a small chat widget the visitor sees in the corner of a page, and a full agent workspace where support staff run many conversations at once, with queues, unread counts, and chat history.
The buyer is a support lead, e-commerce owner, or founder. They are not shopping for a design; they are trying to stop losing customers who leave without asking a question. Live chat is a crowded category with well-funded incumbents, and the entire funnel runs through this one page, since there is no sales team and no demo call. Everything from first impression to trial signup happens on a single scroll.
A note on naming: the page carries "ChatBrand" as its header wordmark, while the footer reads "© 2018 Cugic" and the setup instructions refer to activating the "CUGIC Chat Widget". One section heading is still placeholder text reading "CompanyName", and much of the body copy is lorem. The design was therefore produced as a brandable system rather than a finished piece of copywriting, which is normal for this stage of work.
The problem
The category's core difficulty is that chat software is invisible in a screenshot. A chat window looks like a chat window, and the standard feature list, analytics, video calling, mobile, round-the-clock support, reads identically across every competitor. A visitor scanning the page has no way to tell one product from another, and no reason to believe this one.
Underneath that sit three objections the page has to clear, in roughly this order:
Finally, the page had to hold up while its copy was still placeholder, so structure and visual hierarchy had to carry the argument without finished words.
- What am I actually buying? The buyer recognises the little widget from other websites, but the product being sold is the agent workspace behind it. Show only the widget and the product looks trivial; show only the dashboard and nothing is familiar.
- Is this hard to install? For an embedded widget, implementation fear is a bigger blocker than features. A buyer who suspects a developer project will not start a trial.
- Will it work with my stack? These buyers run stores on Shopify, Magento, WooCommerce-class platforms. If the product does not obviously fit their setup, the trial is pointless.
What I did
The page answers each objection in sequence, and leads with a composition rather than a claim.
What am I buying is answered by a layered product visual: the small customer-facing widget sits in the foreground, overlapping the full agent workspace behind it, and both show the same conversation. One image establishes recognition and scope together. This visual appears twice, once in the hero and again in a teal mid-page section about personalised conversations, so the product is re-anchored after the feature content rather than shown once and abandoned.
Credibility is borrowed early through a strip of recognisable customer logos placed directly beneath the hero, before any capability claim is made, so the features that follow read as claims from a trusted vendor.
Is this hard to install is answered by a dedicated three-step section: set up the chat widget by pasting a script, log in and invite your team, then monitor progress and review history. Framing setup as three concrete steps, one of which is a copy and paste, removes the implementation objection more effectively than any feature could.
Will it work with my stack is answered by an integrations section presenting e-commerce and CMS platforms as logo bubbles arranged organically around a central call to action, so the buyer finds their own platform in the cluster.
Conversion is distributed rather than saved for the end. Sign-up sits in the header, a free-trial call in the hero, a full signup form mid-page with name, email, and phone, a standalone call after the three-step section, and one more at the centre of the integrations cluster. Five commitment points across the scroll, so the visitor can act at whatever moment they become convinced.
Outcomes
- Solved the category's invisible-value problem with a layered composition showing the customer widget and agent workspace as one system, reinforced by restating it mid-page
- Structured the page as an objection-handling sequence covering what the product is, who trusts it, what it does, how hard it is to install, and whether it fits the buyer's stack
- Distributed five conversion points across the scroll so a funnel with no sales team can close at any point of persuasion
- Built the layout to survive late copy, using repeating patterns for features, testimonials, and integrations so text changes would not break the design
What I learned
The most useful section on the page turned out to be the least glamorous one. The three-step setup explainer is plain by design, three cards describing a copy and paste, and it does more conversion work than the feature grid above it, because for an embedded product the real hesitation is implementation rather than capability. Working on this page changed how I sequence a B2B site: I now try to identify the objection that actually stops the purchase and give it a section, rather than assuming more feature detail is the answer.
Repeating a visual is not redundancy when it is the argument. Showing the same layered product composition twice, once in the hero and again mid-page, felt excessive while laying it out. In practice the feature content sits between them, and by the end of it the visitor has drifted from what the product physically is, so restating it re-anchors the page. The lesson was that on a long scroll, the central image earns a second appearance in a way that a headline does not.
Designing against placeholder copy is a constraint worth accepting. Most of the body text was lorem when the layout was built, which forced every section into a repeating pattern that tolerates variable text length instead of a bespoke composition tuned to specific words. That made the page more robust to hand over, and it is a discipline I have kept: if a layout only works with the exact copy in front of you, it will break the moment the client edits it.
The full record / 3 decisions
- My role
- Freelance UI/UX Designer
- Timeline
- 2018
- Platform
- Responsive marketing website
- Category
- SaaS / Live Chat Software / Marketing Website
- Status
- New design, delivered
Tools Sketch
Team Solo, working directly with the client
Decisions
Show both halves of the product in one composition
- What
- Built the hero around a layered visual placing the customer-facing widget in front of the full agent workspace, using the same conversation in both, and repeated that visual mid-page.
- Why
- The visitor recognises the widget because they have seen one elsewhere, but the thing being sold is the workspace. Showing only the dashboard loses recognition; showing only the widget makes the product look trivial. Layering both delivers recognition and scope in one glance, which is the single hardest thing to achieve on a page for software that looks like everyone else's.
Treat installation as an objection worth its own section
- What
- Gave setup a dedicated three-step section, paste a script, invite the team, monitor progress, positioned after the features rather than buried in documentation.
- Why
- For an embedded widget, the blocking fear is not capability but implementation. A buyer who thinks this needs developer time will not start a trial no matter how good the features are. Naming the three steps, one of which is a copy and paste, converts a vague worry into a visible, short task.
Distribute conversion across the page instead of concentrating it
- What
- Placed five commitment points across the scroll: header, hero, mid-page form, post-explainer call, and integrations cluster.
- Why
- With no sales team, the page is the entire funnel, and different buyers convince at different points. Someone sold by the product visual should not have to scroll past four sections to act, and someone who only relaxes after seeing their platform in the integrations list needs a button right there.
( Tags )
- Art Direction
- Responsive
- B2B SaaS
- Marketing Website
- Landing Page
- Conversion Design