All works

Greencheck

A product that watches a business website and tells the owner when something breaks, with SEO reports anyone can read. I designed it in Figma, desktop and mobile, and coded the front end.

The Greencheck homepage in a browser on a green background, with large tilted status chips for SSL/TLS, Spell Check and Broken Link scattered around its edges, a score ring and an uptime pulse
Timeline
2022
Scope
UI/UX design, front-end development

Free check

Value before sign up.

The homepage asks for one thing: a website address. The free status report shows what Greencheck finds before anyone makes an account, and the twelve monitors are listed just below.

Greencheck homepage: a green hero reading Confidence that your site is secure and trustworthy, a field to get a free status report, and cards for monitors such as search engine ranking, profile accuracy, broken links, SSL, spell check and customer reviews
The homepage, with the free check up front

Sign up

Three plans, six short steps.

Pricing is three cards: one site, several sites, or an agency. Signing up walks through account, company, site and social links, notifications and payment, with progress marked at the top and the chosen plan kept in view.

Pricing page with three plans, Single Site, Multi Site and Agency, and a monthly or annual switch
Sign up wizard on the payment step, with six steps marked across the top, card details on the left and the chosen plan on the right
Pricing, and the payment step of the sign up wizard

Dashboard

Every monitor on one page.

Once a site is added, each monitor gets its own card: uptime with response time, SSL with its expiry date, domain, broken links and spell check. An icon in the corner shows at a glance which ones need attention, and monitors on paid plans show what they would add.

Monitors dashboard for a sample site: a free report banner, then cards for the uptime monitor with response time and an uptime chart, the SSL monitor with checks, a domain monitor on paid plans, an alerts banner, and cards for the link, spell check and backlinks monitors
The monitors dashboard

Reports

Findings in plain words.

The SEO report starts with a score and a count of errors and warnings, then breaks down into site, page, technical, content and off-site audits. Each issue says what it is and why it needs fixing.

Site audit report: a side menu of audits with scores, and a list of checks such as CMS, IP address and server, with an outdated CMS flagged and a note on why it needs to be fixed, plus an uptime monitor panel
Audit summary: counts of no errors, warnings and errors, and a 70 percent score in a ring chart
Off-site SEO report: a profile monitor listing the business on review and directory sites, each with a status, beside a note on why profiles matter
Site audit, audit summary, and the off-site SEO report

Alerts

Red, yellow, green.

Every email leads with its status in colour: red when the site is down, yellow when a certificate is about to expire, green for the monthly summary of every monitor. The details sit below in plain words.

Red uptime alert email saying the website is down, with the event details: URL, status and when it was last checked
Yellow alert email saying the SSL/TLS certificate expires soon, with a short recommendation to fix it
Green monthly website status email listing each monitor, such as SEO, uptime, SSL, domain and links, with a looks good or expires soon label
Site down, SSL expiring soon, and the monthly status

Brand

One green, one set of parts.

The logo works on white, black and green, with a check mark symbol for small spaces. Buttons, links and form fields come in a few sizes and states, ready to use across the site and the app.

Brand assets: the Greencheck logo on white, black and green, and the check mark symbol on the same three backgrounds
Base components: primary, secondary and status buttons in solid and outline styles and three sizes, links, and form fields
Brand assets and base components

Principles

Three rules behind every screen.

  1. 01

    Show value first

    A free check before any account, so people see what they get before they pay.

  2. 02

    Explain, don’t just flag

    Every issue in a report says what it is and why it matters, in plain language.

  3. 03

    Speak up when it counts

    Emails for downtime, SSL and spelling problems, and a monthly report for the rest.

My role

Designed it, then built it.

Design

The brand and base components, the marketing site, sign up, dashboard, reports and emails in Figma, on desktop and mobile.

Front end

I coded the screens myself. Starting from a base set of components kept the site, the app and the reports in one style.

Let’s talk

I’d love to tell you more on a call.

There’s more to this project than fits on one page. If you’re interested, I’m happy to walk you through the decisions, the trade-offs and what I’d do next.