Skip to content
Project

Green On Board

A green business directory, designed in Figma and built by hand in HTML, CSS, JavaScript and PHP.

Projectgreenonboard.com
PlatformDirectory, networking, memberships
ServicesUX and UI, development, AI chat
Built withFigma, HTML, CSS, JavaScript, PHP, WordPress
LaunchedSeptember 2026
The Green On Board homepage, designed and built by Planet Media

How it was built

Figma first, then hand-written code.

WordPress only handles the content that changes.

Every screen started as a design in Figma: the home, the directory, the category and state pages, the business profile, the forms, the account and the plans.

From that design we built every page in HTML and CSS, with no page builder and no ready-made theme, and turned the pages into PHP templates. The platform runs on a WordPress plugin we wrote in PHP only for this project, split into 20 modules, from listings and search to forms, accounts, networking, memberships, payments, email, security and SEO.

On the front end, one JavaScript file with no libraries handles what needs it: the mobile menu, pins, account panels, inline editing, photo uploads and the animations.

UX and UI

Made to be used on any screen.

Visitors search by name, product or place, or browse by category and state. Every profile follows the same order: what the business does, where it is, what it offers and what it is looking for, with the buttons to save it or send a wink right next to that information.

Owners edit their profile in place: every line has a pencil, the field opens right where it is, and photos taken with a phone are made smaller in the browser before they upload. Adding a business takes one short form, and access is a private link sent by email, with no account or password to remember.

We checked the layouts at five screen widths, from a phone to a laptop. The header gives up space step by step so no button falls off the screen, and the icons are a single set drawn thick enough to read at small sizes.

Green On Board on a phone: the home, a business profile and the free listing form A business profile on Green On Board, with its category, location and the buttons to pin it or send a wink

One system, every size. On a phone the profile card comes first, with the website, pin and wink buttons within reach. On larger screens the profile and the account keep a side column next to the content.

Animations

Movement that stays light.

The home illustration is split into layers: the two hearts float and tilt, the heart on the phone beats, and the cards around it drift up and down. In the numbers strip, each figure counts up when it comes into view, while the real number stays in the HTML for search engines and screen readers.

Sections appear as the visitor scrolls, but whatever is already on screen shows at once. The movement runs in CSS on transforms, which the browser animates without redrawing the page, and all of it turns off for visitors who ask their device for less motion.

Tools

What the platform includes.

Search and browseSearch by name, product or place, plus a page for every category and every state.
Business profilesWhat the business does, where it is, what it offers and what it is looking for.
Private accountOpened with a link sent by email. The business edits its listing and plan there, and a person reviews every change before it goes live.
Winks and matchesA wink says a business would like to meet another. When both wink, the platform introduces them by email.
MessagesPro and Unlimited members write to each other through the site, up to five messages a day, without seeing each other's email address.
PinsBusinesses save the profiles they want to come back to.
Opportunities boardWhat a business is looking for or offers, deals for other members, and joint offers with up to three of its matches.
RecommendationsA business recommends another it works with, and the one recommended can hide it from its profile.
InvitationsEvery business has an invite link. When the invited business goes live, both get a month of Boost.
Weekly picksThree businesses that fit, each with the reason, shown in the account.
Plans, Boost and badgeFree, Pro and Unlimited listings, three marketing plans, a Boost that puts a listing first in its tier, and a badge for the business's own website.
Online paymentsA checkout for every plan. The listing changes plan when the payment is confirmed and goes back to Free if the subscription is cancelled.

AI chat assistant

An assistant that knows the directory.

Trained on how Green On Board works.

The chat on every page is an AI assistant trained on a knowledge base we wrote for Green On Board: how listings are checked, what each plan includes, and how winks, matches and Boost work. It answers visitors and businesses at any hour.

It asks for an email only when a business wants help, sends those contacts straight to the team, and never emails the visitor. Conversations are kept in a database table of its own, and a limit per visitor plus a daily cap keep its use under control.

Forms

Every form, checked and saved.

We built the forms into the plugin: adding a business, claiming a listing, asking a question, contacting the team, requesting the private link, editing a profile, joining a membership, posting on the opportunities board, recommending a business, suggesting ideas and subscribing to the newsletter.

Public forms check a security token, a hidden field that catches bots, a human check and a limit per visitor before they accept anything. Forms inside the account only work with a signed business session. Submissions are saved in the database first, and the emails go out from a queue in the background, so nobody waits on a mail server.

Database

A data model made for a directory.

Everything lives in the WordPress database, organized for this platform. Businesses, requests, opportunities and recommendations each have their own content type, and categories and the 50 states are taxonomies, which is how every category and every state gets its own page.

Each business keeps its details, plan, preferences, photos, winks, invitations and payment references in structured fields. Changes an owner proposes are stored apart from the live listing until the team approves them, and private access links are saved as a hash, never as the link itself.

Admin panel

Built for the team that runs it.

The team reviews businesses from one screen. Every field of a listing opens there, a proposed change shows next to the current value, and one click approves it or rejects it with a note that is emailed to the contact. Opportunities and recommendations wait for a person to publish them.

The panel also has a CSV importer to load businesses in bulk, a logos screen, a box on each listing to send the owner a private link or confirm a claim in one click, and a list of every request that came in through the forms. The AI chat has its own settings page.

Onboarding the businesses

2,420 businesses, loaded and reviewed.

The free listing form, where a business adds itself before a person checks its site

To launch with a directory worth searching, we gathered businesses from public sources into a single import: United States only, one row per website, each business matched to a category and a state, and a short, factual line about what it does, written in our own words.

The plugin's importer loaded them in bulk. Logos come from the icon each business already publishes on its own website, generic icons from site builders are skipped, and a logo uploaded by the owner always replaces the one we found.

Then we reviewed the base category by category and removed nearly half of it: businesses certified for their office practices rather than for green work. Since launch, new businesses add themselves with the free form, a person checks each site before the listing goes live, and owners can claim a listing that is already there.

Performance

Built to perform on a phone.

Each page loads only what it needs.

Because the pages are hand-written, there is no page builder code to download. The JavaScript is deferred so it never holds up the page, and the fonts are hosted on the site itself, with the two weights used most loaded first.

Every image is served as WebP. The illustrations come in three sizes, so a phone downloads the smallest one that fits, the main image is requested first, and images further down load only when the visitor reaches them. Business logos are resized for cards and profiles, so a results page never pulls full-size files.

Public pages are cached on the server, and a business that is signed in always gets a fresh page of its own.

Under the hood

Payments, security and search.

Every payment notice is signed, and the platform checks that signature before it changes a plan, so a listing only upgrades when the payment is real. Emails to businesses and to the team go out from the platform's own domain, authenticated with SPF and DKIM.

The site's API is closed to anonymous visitors, business sessions are signed, and the chat and the payment endpoint have their own rate limits.

For search engines and AI tools, the platform generates sitemaps for its pages, listings, categories and states, structured data for every business, and an llms.txt file that describes the directory.

Next case study Education Elevated

Maybe your project is our next one.

Tell us what you are building and we will show you exactly where to start, free and with no obligation.

Questions? Toco answers.