The colours didn’t pass

The brand had only ever been printed. A print agency held the guidelines and on paper they worked. On screen the colours didn’t have enough contrast to read, and the typeface wasn’t built for it either.

Nobody asked me to look at this. I pushed for accessibility to be the standard, then we changed the colours and the type, and wrote guidelines for the web — not just what the brand looked like, but how to use it and keep it readable. After that, work came through me to check.

A heading, an offer line and small print set in the old Lloyds Pharmacy lime green #93C21E, above the same offer line in near-black. Beside them the swatch shows a contrast ratio of 2.11:1 on white, failing the 4.5:1 text, 3:1 large text and 3:1 buttons and icons thresholds. — Lloyds Pharmacy · Colour
The old green on white: 2.11:1, failing every threshold.

The same heading, offer line and small print in the new Lloyds Pharmacy green #29873C, above the offer line in near-black. The swatch shows a contrast ratio of 4.54:1 on white, passing the 4.5:1 text, 3:1 large text and 3:1 buttons and icons thresholds. — Lloyds Pharmacy · Colour
The new green on white: 4.54:1, passing every threshold.

The Lloyds Pharmacy colour palette as a table of swatches with hex and RGB values: Core Green #97BE0D, Dark Green #166729, Medium Green #29873C, Medium Green Tint #AFD991, Charcoal #1A1A1A, Dark Grey #595959, Medium Grey #949494, Light Grey #F6F6F6 and White #FFFFFF. — Lloyds Pharmacy · Palette
The palette that replaced it, with the greys for layered depth.

Style guide entry for the primary button: the original green pill button, a hover state 30% darker, and an active state with a drop shadow. — Lloyds Pharmacy · Buttons
One primary button, with its hover and active states written down.

Style guide entries for Open Sans headings. Heading 1 at 44px, Mobile Heading 1 at 34px and Heading 2 at 36px, each in light weight with 1.25 line height, 0.5px spacing and text colour #29873C, with a live example and the text and background colours allowed. — Lloyds Pharmacy · Type
Open Sans, with size, weight, spacing and permitted colours set out for each style.

The web system on one sheet: a green, an outlined white and a plain white colour circle; Open Sans in regular, semibold and bold with four heading sizes; two rows of line icons; New and 15% badges; filled and outlined green buttons; checkboxes, radios, a text input and a dropdown; the Lloyds Pharmacy Online Doctor header with search, basket and account; content and product cards with star ratings and prices; a mobile navigation drawer; four-step progress indicators; an accordion; and info, warning and error alerts. — Lloyds Pharmacy · Web system
Colour, type and components, built for screens.

Components from the Lloyds Pharmacy system: small and large content cards for Diabetes and Online Doctor with links, horizontal Flu Vaccinations cards with one- and two-line titles, and product cards for Regaine with benefits, price and a green View product button. — Lloyds Pharmacy · Components
Content and product cards, in their sizes and variants.

Two identical Online Doctor service cards side by side, with red guide lines marking the shared left edge, image height, title and the two tick-mark lines of copy. — Lloyds Pharmacy · Card anatomy
The service card on a grid: image, title and benefits all aligned to the same edges.

Two identical Regaine product cards side by side, with red guide lines marking the shared margins and the rows for image, title, rating, size, benefit, price, unit price and the View treatment button. — Lloyds Pharmacy · Card anatomy
The product card on a grid: every row sits in the same place from card to card.

The native app system in four columns. Typography runs from Heading 1 at 34px down to subtext at 12px, with form label, body, button and link styles. Components shows an iOS title bar and an Android one, then form elements: a text field with help text, the same field in error with a red border, a dropdown, a search field, a select in its valid state, and a repeater with an Add item button. A third column repeats them after the walking skeleton, adding multi-select checkboxes and primary and secondary buttons. Navigation shows a bottom tab bar of Home, Appointment and Account in four states, each with a different tab active. — Lloyds Pharmacy · App system
Typography, components and navigation for the apps.

The Lloyds Pharmacy hair loss page built with the design system: promotional cards for Regaine and Alpecin, browse by category, a summary of over-the-counter products and featured hair loss products. — Lloyds Pharmacy · In use
The system applied to the pharmacy site.

The Online Doctor Information About Baldness article built with the same design system: shared header and navigation, a contents list, author byline, and sections on causes and treatments. — Lloyds Pharmacy · In use
And to Online Doctor: same header, type and components, so the two read as one.

→

Back to home