Make the problem easy to picture
Being unknown to AI is hard to see. The site needed images and comparisons an owner can grasp at a glance, with no technical background.
BroccolinkAI marketing · Company website
A website written for AI to read too.
The website for Broccolink, a Malaysian AI marketing service. Business owners read the words on the page. AI tools can read the data underneath. The site is built for both.
In short
Broccolink is an AI marketing service run by Be Broccoli Inspiration House Sdn. Bhd. in Malaysia. Potadot designed and built its website as one long page in English and Chinese. The page asks business owners a single question, “Does AI know your story?”, then explains the idea, shows the method and ends on WhatsApp. Under the visible page, structured data describes the company, its service and four common questions in a format machines can read.
The client
A Malaysian company that writes for AI to read.
Broccolink is run by Be Broccoli Inspiration House Sdn. Bhd. (Reg No. 201901033374). Its service is content: material about a brand, written so that AI tools can recognize it, remember it and recommend it.
The site names three platforms for that content: a Brand Biography, a record of Corporate Milestones and a Brand FAQ Center. It closes with a limited offer of 1,000 Pioneer slots.
- 3
- Stages: Recognize, Remember, Recommend
- 3
- Strategic platforms
- 1,000
- Pioneer slots offered
- 2
- Languages: English and Chinese
The job
An unfamiliar idea has to feel obvious in one scroll.
Google is familiar to every owner. What an AI tool says when a customer asks for a recommendation is a newer question. The site has to raise that question and answer it on a single page.
Pass its own test
A company that tells owners to make their brand readable by AI needs a site that is readable by AI. The data behind the page matters as much as the words on it.
Speak to owners in two languages
The page runs in English and Chinese, so each language needed a complete version, from the first question to the last button.
Keep the next step small
A curious owner should not have to fill in a form. One WhatsApp message is enough to start.
The concept
One page, two readers.
Broccolink’s argument is short: AI can only recommend what it has read. A site making that argument has to live by it, so this page speaks to two readers at once. The owner gets a plain story in big type. The machine gets structured data about the company and its service. The handshake near the top, one human hand and one robot hand, says the same thing in a single picture.
The route through the page
-
1
Ask
The first screen asks one question.
-
2
Hush
A robot with a finger to its lips shows what silence looks like.
-
3
Follow
One ribbon carries Recognize, Remember and Recommend.
-
4
Open
Three platforms, one card open at a time.
-
5
Decide
Three notes around a brain, then the offer.
-
6
Reply
The last button opens WhatsApp.
Where the look came from
The name
BROCCO in solid black, LINK in thin coloured strokes. The logo already splits the name in two: heavy letters to read, colour for the link. The whole page follows that split.
The librarian
The site compares AI to a librarian who cannot recommend a brand with no books in the library. That one comparison carries the page, because it turns a technical idea into something any owner can picture.
The handshake
A human hand meets a robot hand over a glow of the brand colours. It stands near the top of the page because that meeting is what the service is about, and it is what the word link means.
The design
Black for reading, colour for linking.
The page is mostly white, with very heavy black headlines. The colour comes from one gradient, blue through magenta to orange, taken from the word LINK in the logo. It shows up on the things that connect: the handshake, the ribbon and the buttons.
Colour
- White
#FFFFFFThe page itself - Near black
#141414Headlines, closed cards, the footer wordmark - Sky blue
#2AACE2Start of the gradient, the quote marks - Magenta
#EA0A8CMiddle of the gradient, the slots badge - Orange
#F47A1FEnd of the gradient
White and its pale tints cover about three quarters of the page, so the gradient stands out every time it arrives.
Type
Does AI know your story?
Poppins · The opening question, extra bold on the live siteAI can only recommend what it has read.
Poppins · Chapter headlines, the same size and weight thereImagine AI as a librarian. If there are no books about your brand in its library, it cannot recommend you to readers.
Poppins · Reading textThe ribbon
Three spirals on one ribbon, with the colour moving from blue to orange as it goes. Recognize, Remember and Recommend read like stages on a road. The lettering looks like Android 7, the site’s second typeface, a squared, machine-like face used for the label above each headline.
Detail
On a computer, one card is open and pale while the other two stay closed and black. Point at a closed card and it opens in turn. Three long explanations become one at a time, and the closed text stays in the page’s code.
Rhythm
- Question
- Handshake
- Why AI
- Ribbon
- Quote
- Method
- Offer
- Logo
The page stays white and lets short bursts break it: the handshake, the ribbon, the black cards and the giant wordmark at the foot. The bar above is this page to scale, with each chapter in its strongest colour.
Walkthrough
The page, in the order an owner reads it.
From the first question to the last button, each highlight marks one part of the argument and the note gives the reason for it.
It starts with a question
A small line says customers are asking AI. Below it, the biggest words on the screen ask “Does AI know your story?” One sentence and one button follow.
Why A question makes an owner check their own position. A statement about AI would be easy to skim past.
Silence, drawn as a robot
Beside the line “AI can only recommend what it has read”, a robot holds a finger to its lips. The text compares AI to a librarian with no books about your brand.
Why The problem here is something missing, which is hard to show. A robot saying shh makes it easy to picture.
Three reasons on three cards
The Shift, The Stakes and The Trust Mechanism each get a plain white card and a short headline, such as “10 Links vs. 1 Answer”.
Why Each headline makes sense alone, so an owner who is only skimming still picks up all three reasons.
One ribbon, three stages
A ribbon crosses the full width of the screen and curls into three spirals, Recognize, Remember and Recommend, with an icon in each.
Why Three words in a list are easy to forget. On one unbroken ribbon they read as a single journey with a clear end.
One card open at a time
The method is three platforms. Point at a card and it widens, turns pale and shows its icon and explanation, while the other two stay closed.
Why Owners see all three names at once and read the detail only for the one they choose.
A brain with three notes
Under the 1,000 Brand Pioneers headline, a faceted brain sits in the middle with three gradient notes around it: Triple Verification, Global Indexing and Permanent Asset.
Why The brain is the second reader, the one the whole page is about. Pinning the notes to it stops them reading like a plain list.
The ending is one button
The offer comes first, then a closing line and a button that opens WhatsApp. Below it, the Broccolink wordmark runs the full width of the screen.
Why By this point an owner has one thing left to do. The very large name is the last thing they see before leaving.
One question, one buttonThe robot and the librarian
Three cardsRecognize, Remember, RecommendPoint to openThree notes, one brainOffer, button, wordmark
On the phone
The same story in a single column.
On a phone there is no mouse to point with, so the page changes how it shows things. The order of the story stays the same.
- The ribbon scales down and stays on one line, so the three stages still read together
- The three method cards stack, each with its icon and full text showing
- The three notes stack in a simple column above the brain
Built in
The reader you cannot see.
The first three cards are written for machines, and a visitor never sees them. On this site they are the point. The other three make sure a person can read the page and reach the company.
Company data
Structured data states the company name, its logo, a short description and that it serves Malaysia.
Service data
A second block names the service as Answer Engine Optimization and ties it to Broccolink.
Answers for machines
Four common questions, such as “What is AEO?”, are written out as FAQ data behind the page.
English and Chinese
Each language has its own address, linked by language tags. Two round buttons stay at the lower left of the screen for switching.
WhatsApp from every button
All three gradient buttons open a chat with the same number, so there is no form to fill in.
Cards without a mouse
Phones cannot hover, so the method cards show everything there. On a computer, the closed cards’ text is still in the page’s code.
How we built it
Same process, every project.
Every Potadot project starts by understanding the client's situation before anything is designed. See all seven steps
- 1
Understand the business
What Broccolink sells, who needs it, and how to explain AI visibility to an owner who has never thought about it.
- 2
Content creation
Short headlines and plain comparisons for each chapter, in English and Chinese.
- 3
Design + build
The gradient, the ribbon and the opening cards first, then every chapter for computer and phone.
- 4
SEO + launch
Titles, language tags and structured data for the company, service and FAQ, then launch.
Questions
About this project.
Have a new service to explain? Tell Ricky about it on WhatsApp at +6011-1142 1029.
What did Potadot do for Broccolink?
We worked out the concept, wrote the content, designed the page and built the site in English and Chinese, with search setup, structured data and WhatsApp links.
Why one long page?
Broccolink’s idea takes a few steps to explain, and each step depends on the one before. One page in a set order keeps them together.
What is structured data, and why does it matter here?
It is information in a page’s code that describes a company and its services in a format machines can read. It matters twice on this site, because being readable by machines is also what Broccolink sells.
Can you build something like this for my business?
Yes. If customers need something new explained before they buy, we start by looking for the plain comparison that does it, as the librarian does here, then shape the page around it. Tell us what you sell and we will show you how we would approach it.
