( Independent Practice / 2018 )

ChatBrand

Delivered a complete responsive marketing site for a live chat SaaS product, from proposition through to final UI, as a solo freelance engagement

My role: Freelance UI/UX Designer
Timeline: 2018
Category: SaaS / Live Chat Software / Marketing Website
Status: New design, delivered

Tools Sketch

Generated schematic standing in for imagery of ChatBrand. It depicts nothing. — Generated schematic, not a screenshot of ChatBrand.

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

Delivered a complete responsive marketing site for a live chat SaaS product, from proposition through to final UI, as a solo freelance engagement
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.

Context

The problem

What I did

Outcomes

What I learned

( Tags )