Tender concept · Capability demonstration
Our design concept for a tender for a trilingual public website for a community healthy-ageing programme. The tender asked for 13 design deliverables with WCAG 2.2 Level AA as the target. We drew all 13 — most at a higher fidelity than asked — on one design system.
Illustrative mockup
Illustrative mockup1 · The brief
The people a programme like this serves often read slowly, tap carefully and browse on a small phone, in Cantonese. Many prefer to call. Carers arrive in a hurry, looking for one answer.
So large text, big targets, plain language and a phone number in reach are the design itself — on every page, in three languages.
What the tender asked for
The checklist below is the tender’s own list, with the fidelity and priority it set. The sections that follow show each one, in the order a visitor meets them. Every board is an illustrative mockup, not approved content.
| # | Requirement | Asked for | Priority | Status |
|---|---|---|---|---|
| 1 | Sitemap / information architecture | Diagram | 做 · Required | Concept drawn |
| 2 | Homepage — desktop | High-fidelity | 一定做 · Must have | Concept drawn |
| 3 | Homepage — mobile | High-fidelity | 一定做 · Must have | Concept drawn |
| 4 | Desktop navigation | High-fidelity / component | 做 · Required | Concept drawn |
| 5 | Mobile navigation | High-fidelity / component | 做 · Required | Concept drawn |
| 6 | Standard content page | Wireframe | 建議 · Recommended | Concept drawn |
| 7 | News / article detail | Wireframe | 建議 · Recommended | Concept drawn |
| 8 | Event / resource listing | Wireframe | 建議 · Recommended | Concept drawn |
| 9 | Resource detail | Wireframe | 可選 · Optional | Concept drawn |
| 10 | Contact | 不需要完整設計 · Full design not required | 不急 · Not urgent | Concept drawn |
| 11 | Search results | 不需要完整設計 · Full design not required | 不急 · Not urgent | Concept drawn |
| 12 | 404 | 不需要完整設計 · Full design not required | 不急 · Not urgent | Concept drawn |
| 13 | UI / accessibility components | High-fidelity sample | 做 · Required | Concept drawn |
| — | Accessibility: WCAG 2.2 Level AA | Request | — | Design target — not audited |
2 · Information architecture
Before any page was drawn, the information architecture fixed where everything lives and how people reach it: the sitemap, the content model, the URL and language pattern, the navigation, and the journeys it was checked against.
Four sections, never more than two levels deep, mirrored in 繁 / 简 / EN. Every page is at most two clicks from Home. Thirteen content types feed the thirteen templates, and three journeys are checked against the tree.
Boards: 01 Information architecture, parts 1 and 2 — shown in full below
Illustrative mockup
Illustrative mockup
Illustrative mockup
Illustrative mockup
Illustrative mockup
Illustrative mockupSeven header controls, each with one job: logo, help line, language, main menu, dark mode, search and one call to action.
Boards: 02 Navigation structure (mega menu) and Component · Header desktop
Illustrative mockupA labelled 選單 button opens an accordion menu with large rows, the language switch and the hotline at the bottom.
Boards: Mobile menu open (from 選單) and Component · Header mobile
Illustrative mockup3 · The pages — homepage
The two deliverables the tender marked “must have”, both at high fidelity.
One clear message, two actions, a slideshow that only moves when asked, and the cookie choice up front.
Boards: T01 Homepage desktop 1440 (EN), plus its continuation
Illustrative mockupThe same page at 390px in Traditional Chinese — call, dark mode, search and menu always in reach.
Boards: T01 Homepage mobile 390 (繁), plus its continuation
Illustrative mockup3 · The pages — templates
The brief asked for wireframes here. We drew the wireframes, then designed each template at high fidelity, desktop and mobile.
Asked as a wireframe — we drew the wireframe and the high-fidelity page.
Boards: 03 Wireframes and T03 Standard content page, desktop + mobile
Illustrative mockup
Illustrative mockup
Illustrative mockupLarge reading text, text-size controls and a photo gallery with lightbox.
Boards: 03 Wireframes and T05 Article detail + lightbox, desktop + mobile
Illustrative mockup
Illustrative mockupBig date blocks and plain filters. Every event says how to join by phone or in person — no sign-up form. The activities, venues and dates shown are invented examples.
Boards: 03 Wireframes, T06 Event listing and T08 Resource listing, each desktop + mobile
Illustrative mockup
Illustrative mockup
Illustrative mockup
Illustrative mockupOptional in the brief, drawn in full: large-print download, print and share. The article, its date and its reviewer line are placeholders.
Boards: T09 Resource detail, desktop + mobile
Illustrative mockup
Illustrative mockup3 · The pages — help pages
Contact, search and error pages are where people who are stuck end up — so they got the same care.
Hotline first, then e-mail, address, map, a short enquiry form and FAQs.
Boards: T11 Contact, desktop + mobile
Illustrative mockup
Illustrative mockupResults grouped by type, with a helpful empty state.
Boards: T12 Search results, desktop + mobile
Illustrative mockup
Illustrative mockupSays it is not the reader’s fault, offers search, four big links and the hotline.
Boards: T13 Error 404 / 500, desktop + mobile
Illustrative mockup
Illustrative mockup3 · The pages — components
The building blocks behind all of the pages above.
Twenty-nine components, each drawn in every state: default, hover, focus and disabled.
Boards: 06 Style guide 01 Foundations and Style guide 02 Components & states, plus their continuations
Illustrative mockup
Illustrative mockup4 · The system · Design System v1.0
Every page above is built from one set of rules, so a new page looks right the first time and a build team would start from the same files the design was made from.
5 · Accessibility · target WCAG 2.2 Level AA
No formal WCAG certification is needed at tender stage. What the tender needs is how the design will meet the standard — below, requirement by requirement. These are design intentions, not test results: conformance is tested on the built website, with an accessibility conformance report before UAT.
| Requirement | How the design meets it |
|---|---|
| WCAG 2.2 AA design target | Every template is drawn against Level AA, including the six criteria new in 2.2: focus not obscured, dragging alternatives, target size, consistent help, redundant entry, and accessible authentication (no CAPTCHA or puzzles). |
| Accessible colours and contrast | Palette text pairs checked at 4.5:1 or better on the design files (body text 12.2:1). A high-contrast mode. Links are underlined, so colour is never the only signal. |
| Senior-friendly typography | Body text 20px on desktop and 18px on mobile, nothing below 16px. A text-size control, plain language, and Noto Sans / Serif HK and SC for Chinese. |
| Keyboard-accessible navigation | A skip link, a keyboard path through every menu, and a visible 3px dark-green focus ring with a white gap. The menu works with JavaScript off. |
| Mobile responsiveness | Every template drawn at desktop 1440 and mobile 390, on a 12 / 8 / 4-column grid (1440 / 834 / 390). Touch targets 48px, never under 44px. |
| Accessible interactive components | 29 components, each drawn in default, hover, focus and disabled states. Carousels start paused, icon-only controls have screen-reader names, and language is marked on every Chinese and English phrase. |
| Final accessibility testing | Not part of this concept. If awarded, the built website is tested and an accessibility conformance report is provided before UAT. |
Out of scope, on purpose
To avoid scope creep, these are left out by design.
None for the public. Only staff sign in, to the CMS.
Event pages show how to join — call, visit or ask.
Nothing is collected on this site.
Help comes from the hotline, the form and FAQs.
No “Listen to this page” or other machine-generated speech. Visitors can still use the screen reader or read-aloud built into their own device.
The “Age Well Together · 樂齡同行” name and mark are placeholders, not an approved brand.
The site informs and presents.
Work with us
We design and build accessible, multilingual public websites — from the sitemap to the CMS. Ask us to walk you through the full concept.
