feat: Automated UX check demo

[muhammad-ali-pk]

Done

• Spin up temp demo for automated UX check

QA

• Open the DEMO
• Verify the page matches copydoc and figma

Issue / Card

Fixes #

Screenshots

[if relevant, include a screenshot]

[webteam-app]

Demo

Jenkins

demos.haus

[Copilot]

Copilot wasn't able to review any files in this pull request.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[muhammad-ali-pk]

UX review

Automated UX QA review generated from this PR. Stages run: Copy doc review, Figma review, Demo review.

Copy doc review — juju-charmhub-community-2026-07-22-run2.md

UX content audit report – copy doc

Document: Juju – Community and Charmhub (suggested URL: canonical.com/juju/charmhub-community)
Date: July 22, 2026
Note: This is a second, independent run against the same source doc as juju-charmhub-community-2026-07-22.md, saved as -run2 per the skill's no-overwrite rule so the two runs can be compared. The designops source of truth (sites-designops checklist) returned a 404 on fetch, so this run used the local copy-doc-review/references/default-checklist.md, plus shared/copy-style-guide-checklist.md for brand and house-style checks (reported separately below). Page type was left as the unselected dropdown placeholder "Choose" in the metadata table – based on the page's structure (hero, card row, tabbed charm directory, CTA strip, no form fields), it was treated as a marketing/community page for gating purposes. This is flagged as a critical metadata gap below.

---

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor	❓ Needs Review	⬜ N/A
UX quality check	eight	four	seven	one	four	two
Brand & style compliance	four	0	three	one	0	–

Total issues: 15 (four critical, 10 needs work, one minor) · Needs review: four · N/A sections: Forms & Inputs (marketing/community page, no form fields); Completeness – interactive states (static page, no interactive flow)

---

Issues by page section

Metadata

🔴 Critical

• [Structure & Hierarchy] – No heading levels (H1, H2, H3) are marked anywhere in the doc, so design cannot infer the page's information hierarchy from the copy alone.
  • Found: Section labels such as "HERO", "EQUAL HEIGHT ROW", and "TABBED SECTIONS" mark layout blocks only – no heading level is assigned to "Community and Charmhub", "Explore charms on Charmhub", or the four tab titles. | Recommendation: Mark the hero title as H1 and the tab/card titles as H2 or H3 as appropriate.
• [Structure & Hierarchy] – The metadata table is substantially incomplete. Several fields are left as the unselected dropdown placeholder "Choose" or blank, including the page type field this review's own scoping depends on.
  • Found: "Target audience (choose from drop down): Choose", "Page type (choose from drop down): Choose", "Stage in the funnel: Choose", "Main action for users to take on the page: [blank]", "Main keyword and keyword cluster: [blank]", "Please indicate approvals needed before the page goes into development: Choose", "og:Image: Please include a link to the image you would like as the page thumbnail..." (instruction text only, no link supplied) | Recommendation: Resolve every dropdown and blank field before design starts – page type, audience, and approvals all change how the page should be built and signed off.

🟡 Needs Work

• [Character Limits] – Page title exceeds the 60-character limit.
  • Found: "Juju | The simplest way to deploy and maintain applications in the cloud" (72 characters) | Recommendation: Trim to 60 characters or fewer, e.g. "Juju | The simplest way to deploy apps in the cloud" (52 characters).
• [Character Limits] – Page description exceeds the 160-character limit.
  • Found: "Juju is an open source orchestration engine for software operators that enables the deployment, integration and lifecycle management of applications at any scale, on any infrastructure." (185 characters) | Recommendation: Cut to 160 characters or fewer, keeping the core claim (open source orchestration engine; deploy and manage apps at any scale).
• [Navigation] – The navigation placement field mixes leftover instructional text with what may be the intended answer, so it's unclear whether the field was actually completed.
  • Found: "Please select the primary navigation for the page. Bubble navigation canonical.com/juju" | Recommendation: Delete the instructional sentence and confirm "Bubble navigation" is the final, intended selection.
• [Comments & Revisions] – Several metadata fields read as unresolved placeholders (equivalent to a "TBD") rather than confirmed answers, and should be flagged for resolution before design begins.
  • Found: "Reference page(s) *New: [blank]", "Main keyword and keyword cluster: [blank]", "Link to asset manager tag: [blank]" | Recommendation: Either fill these in or explicitly mark them "N/A" so it's clear they were considered, not missed.

Hero / Equal height row

🔴 Critical

• [CTAs] – The "Contact us" link in the Canonical support card points to an internal Google Doc draft, not a live page.
  • Found: "Contact us ›" | Recommendation: Replace with the final contact/sales-form URL before this doc is handed to design.
• [Accessibility] – The same Google Doc link is being used as a stand‑in for a hosted resource/destination, which is not an asset‑manager or production location.
  • Found: Same "Contact us ›" link as above, referenced twice in the doc (Equal height row and CTA strip) | Recommendation: Once the destination is finalized, confirm it resolves to a production URL rather than a Drive/Docs link.

🟡 Needs Work

• [Character Limits] – The Discourse forum card paragraph exceeds the 300-character limit for an equal‑height‑row card.
  • Found: Paragraph beginning "The discourse forum is the primary way for the community to discuss juju and charms..." (399 characters) | Recommendation: Cut to 300 characters or fewer – the third sentence about development teams sharing updates could be trimmed or moved.
• [Character Limits] – The Canonical support card paragraph exceeds the 300-character limit for an equal‑height‑row card.
  • Found: Paragraph beginning "Build with confidence and operate at scale with enterprise support from Canonical..." (346 characters) | Recommendation: Trim to 300 characters or fewer.
• [Tone & Clarity] – Average sentence length across this section runs long: the Matrix paragraph averages 23 words per sentence and the Discourse paragraph averages about 22, both above the 12–20 word target.
  • Found: "The Juju Matrix Space is the best way to interact with all the community members and chat with the Canonical engineers working on Juju and charming." (26 words) and "The forum is used daily by all the Canonical engineers working on charms and it includes a comprehensive list of community curated guides and resources." (27 words) | Recommendation: Split each into two shorter sentences.
• [Brand & style – B7, superlatives] – Two unbacked superlatives ("best") appear with no supporting fact.
  • Found: "The Juju Matrix Space is the best way to interact with all the community members..." and "...to provide the best support experience for Ubuntu..." | Recommendation: Replace with a specific, verifiable benefit or soften (e.g. "a great way to interact with community members").

🔵 Minor

• [Tone & Clarity] – Passive constructions appear twice in this section.
  • Found: "The Juju Matrix Space is hosted by Canonical" and "The forum is used daily by all the Canonical engineers" | Recommendation: Consider active phrasing, e.g. "Canonical hosts the Juju Matrix Space" and "Canonical engineers use the forum daily."

Tabbed sections (Explore charms on Charmhub)

🟡 Needs Work

• [Tone & Clarity] – A missing sentence break creates a 31-word run-on sentence in the Charmhub intro paragraph.
  • Found: "Charmhub is a curated marketplace for charms which can be readily integrated into any infrastructure Charmhub includes a large collection of Kubernetes and Machine charms, their related information and official documentation." | Recommendation: Add a period after "infrastructure": "...into any infrastructure. Charmhub includes a large collection..."
• [Brand & style – A2, "open source"] – "Open-source" is hyphenated in two charm descriptions, inconsistent with the unhyphenated "Open source" used everywhere else in the same list.
  • Found: "Open-source relational database management system" (Postgres) and "Open-source reverse proxy and load balancer..." (Traefik), versus "Open source distributed event store..." (Kafka) and others | Recommendation: Standardize on "Open source" (two words, no hyphen) throughout.
• [Brand & style – A3, product names] – "Juju" is capitalized elsewhere in the doc but appears lowercase mid-sentence here.
  • Found: "The discourse forum is the primary way for the community to discuss juju and charms." | Recommendation: Capitalize to "Juju" for consistency with its use elsewhere (e.g. "The Juju Matrix Space").

CTA section

❓ Needs Review (see below)

• The "Read Docs" destination is noted separately under Needs review, below.

---

❓ Needs review

• [Section: Metadata] – The suggested page URL is on the canonical.com domain, but its embedded reference link points to a juju.is URL. It's unclear whether this page is replacing an existing juju.is page (which would need a redirect note) or the juju.is link is just an incidental reference.
  • Found: "canonical.com/juju/charmhub-community" | Question: Confirm with the page owner whether this is a migration from juju.is; if so, note the redirect requirement.
• [Section: Navigation] – Nothing in the doc confirms whether this page appears in the mega nav, so the nav label/description requirement can't be verified either way.
  • Found: No mega nav reference anywhere in the metadata or body. | Question: Confirm whether the page belongs in the mega nav; if so, add the nav label and description to the doc.
• [Section: Tabbed sections] – Terms like "charming" and "Machine charms" assume the reader already knows Juju/charm terminology, but the target audience field was left unselected, so it's unclear whether this jargon level is appropriate.
  • Found: "...chat with the Canonical engineers working on Juju and charming." | Question: Once the target audience is confirmed, check whether these terms need a brief gloss for less technical readers.
• [Section: CTA section] – The "Read Docs" link destination ends in a bare URL fragment with no anchor, which may be a placeholder rather than a deliberate top-of-page link.
  • Found: "Read Docs" | Question: Confirm whether the trailing "#" is intentional (links to the top of the docs page) or a leftover placeholder that needs a real destination.

---

⬜ Not applicable

• Forms & Inputs – N/A: this is a marketing/community page with no form fields defined in the copy doc (the "Contact us" CTA links out to an external form/sales flow rather than defining one on-page).
• Completeness – interactive states (hover/focus/error/success/empty/loading) – N/A: static marketing page with no interactive flow described.

---

✅ What looks good

• CTA text throughout is specific and action-oriented – "Connect with the community on Matrix", "Connect with the community on Discourse", "Read Docs" – none of the generic "click here"/"learn more"/"submit" phrasing the checklist warns against.
• The "Contact us" CTA uses identical text and points to the same destination in both places it appears, so the link-consistency check passes (the destination itself is flagged separately, above, as not yet final).
• Each charm category in the tabbed section ("Databases", "Big data and AI", "Observability", "Infrastructure") has a clear label above its list of charms, satisfying the "lists need an intro/heading" check.
• All charm link text is a specific product name (Postgres, Kafka, Vault, and so on), never a full sentence or vague phrase, and every charm link has a clear destination.
• All CTA button and link text is comfortably within the 20/60-character limits (e.g. "Contact us" – 10 characters; "Connect with the community on Discourse" – 39 characters).
• No images, graphs, or icon-only elements are referenced in the doc, so there are no missing alt-text or accessible-label gaps to flag.
• Numeric formatting is correct: "24/7" is used rather than "24x7".
• The page owner is clearly named with a working mailto link, so ownership is unambiguous.
• All four charm-directory tabs are documented with a consistent set of three examples each, so the "all variants documented" completeness check passes.
• Terminology is otherwise consistent: "Charmhub" and "Juju" are capitalized correctly in every instance except the one lowercase "juju" flagged above.

Figma review — juju-community-and-charmhub-2026-07-22.md

UX Figma review: Juju — Community and Charmhub

Figma file: canonical.com/juju and /jaas — Sites — https://www.figma.com/design/VqD7aqJWV2Cm4l8sth9xLv/canonical.com-juju-and--jaas---Sites?node-id=272-4097
Frame reviewed: "Your snap" (node 272:4097) — hero, community/Charmhub links, tabbed charms directory, closing CTA, footer
Copy doc: Provided as approved source of truth (already through copy doc review). Only differences from the copy doc are flagged for copy quality; content identical to the copy doc was not re-reviewed for wording, tone, or style.
Date: July 22, 2026
Checks run: Exact copy match | UX quality check | Brand & style compliance

Note on scope: Figma comments could not be retrieved via the MCP connection (permission error), so the "Designer annotations" section below is based only on what's visible in the layer tree. The tabbed charms directory only exposes one tab's state (Observability) in this frame — the Databases, Big data and AI, and Infrastructure tab content is not present here and could not be checked against the copy doc.

---

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor
Exact copy match	—	3	5	4
UX quality check	—	5	3	0
Brand & style compliance	—	0	1	1

Total issues: 22 (8 critical, 9 needs work, 5 minor)

---

Check 1: Exact copy match

🔴 Critical — Wording differences

• [Frame: HOC: Hero — "Explore charms on Charmhub"] [Layer: p-section > p]
  • Figma: "...All of the Canonical and community made charms are available on Charmhub."
  • Copy doc: "...Canonical and community made charms are available on Charmhub."
• [Frame: HOC: Hero — "Explore charms on Charmhub"] [Layer: p-section > p]
  • Figma: "You can find a curated selection of great charms below:"
  • Copy doc: "You can find a curated selection of charms below:"
• [Frame: charms > Observability card — Prometheus]
  • Figma: "Open source monitoring system with a dimensional data model, flexible query language and time series database"
  • Copy doc: "Open source monitoring system with a dimensional data model and a time series database"

🔴 Critical — Missing from Figma

• None confirmed. Caveat: the Databases, Big data and AI, and Infrastructure tab card content (Postgres/MySQL/Charmed MongoDB, Kafka/Kubeflow/Apache Spark, Vault/Traefik/Landscape) isn't present in this frame — only the Observability tab's state is shown — so this couldn't be checked. Recommend confirming those three tab states exist and match the copy doc elsewhere in the file, or adding them to this frame for review.

🟡 Needs Work — Extra in Figma

• [Frame: HOC: Hero — "Community and Charmhub"] [Layer: CTA block]: "Learn more" / "Contact us ›" — no CTA is specified for this section in the copy doc's HERO row.
• [Frame: HOC: Hero — "Explore charms on Charmhub"] [Layer: CTA block]: "Learn more" / "Contact us ›" — no CTA is specified for the tabbed sections intro in the copy doc.
• [Frame: HOC: Hero — "Community and Charmhub"] [Layer: h2]: "H2 placeholder - aim for one line, 2 is acceptable, more - use a p" — raw component instruction text visible in the design; not in the copy doc.
• [Frame: HOC: Hero — "Explore charms on Charmhub"] [Layer: h2]: "H2 placeholder - aim for one line, 2 is acceptable, more than that - please put it in a paragraph" — same issue, second hero.
• [Frame: CTA section] [Layer: Text with margin and padding]: "Text body." — and [Layer: Link]: "Link ›" — neither appears in the copy doc's CTA SECTION, which specifies only the heading and two buttons.

🔵 Minor — Punctuation / capitalisation / spacing

• [Frame: 5 > Frame 3] [Layer: Text]
  • Figma: "Join the community!"
  • Copy doc: "Join the community"
• [Frame: 5 > Frame 5 > discourse-forum] [Layer: Text]
  • Figma: "Discourse Forum"
  • Copy doc: "Discourse forum"
• [Frame: 5 > Frame 5 > Equal height block] [Layer: Link text]
  • Figma: "Connect with the community\non Matrix ›" (manual line break mid-string)
  • Copy doc: "Connect with the community on Matrix ›"
• [Frame: 5 > Frame 5 > discourse-forum] [Layer: Text]: trailing space after "...new concepts " — copy doc has no trailing space.

---

Check 2: UX quality check

Issues by page section

Header

🔴 Critical

• [Navigation] – Two nav items are labelled literally "Item" instead of real page names.
  • Found: "Item", "Item" | Recommendation: Replace with the actual navigation labels or remove the unused slots before handoff.

Hero — "Community and Charmhub"

🔴 Critical

• [Structure & Hierarchy] – The H2 layer contains raw component instructions instead of a real subheading.
  • Found: "H2 placeholder - aim for one line, 2 is acceptable, more - use a p" | Recommendation: Replace with real subheading copy, or delete the layer if the hero doesn't need one.
• [Structure & Hierarchy] – The body paragraph contains raw layout instructions instead of real copy.
  • Found: "Generally, the height of the right hand side of a 50/50 split should contain more content than the left hand side." | Recommendation: Replace with real supporting copy or remove the paragraph.

🟡 Needs Work

• [CTAs] – "Learn more" is a vague CTA that doesn't tell the user what they'll get.
  • Found: "Learn more" | Recommendation: Use a specific verb, e.g. "See how Juju works".

Charmhub hero — "Explore charms on Charmhub"

🔴 Critical

• [Structure & Hierarchy] – The H2 layer again contains raw component instructions.
  • Found: "H2 placeholder - aim for one line, 2 is acceptable, more than that - please put it in a paragraph" | Recommendation: Replace with real subheading copy, or delete the layer.

🟡 Needs Work

• [CTAs] – "Learn more" is repeated here as a vague CTA.
  • Found: "Learn more" | Recommendation: Use a specific verb tied to the section, e.g. "Browse charms on Charmhub".

Tabbed charms directory

🟡 Needs Work

• [Structure & Hierarchy] – Only the Observability tab's content is present in this frame. The Databases, Big data and AI, and Infrastructure tab states aren't included, so their copy can't be verified here.
  • Recommendation: Confirm the other three tab states exist elsewhere and match the copy doc, or add them to this frame so the full component can be reviewed.

CTA section — "Get started with Juju today"

🔴 Critical

• [Structure & Hierarchy] – The body text is literally the placeholder string "Text body." rather than real copy.
  • Found: "Text body." | Recommendation: Fill with real copy or delete the layer — the copy doc doesn't specify body text for this section.
• [Links] – An extra tertiary link is left as the unfilled placeholder "Link ›", which isn't in the copy doc and has no real destination or label.
  • Found: "Link ›" | Recommendation: Fill with real link text and destination, or remove the layer.

Designer annotations

• Figma comments couldn't be retrieved through the MCP connection (permission error), so this section is based on the layer tree only, not on any comment threads that may exist on the file.
• Two hidden layers (not visible in the rendered design, so they won't ship) contain leftover lorem-ipsum-style content: a duplicate "CTA Block" instance labelled "Action" / "Action" / "Lorem ipsum dolor sit amet ›", and a "Frame 6" text layer repeating placeholder copy about "cloud types". Worth flagging to the designer to confirm these can be deleted, since hidden layers like this are easy to accidentally re-enable later.
• The reviewed frame is named "Your snap", which doesn't reflect its content (Juju community and Charmhub page). Renaming it would make the file easier to navigate.

---

Check 3: Brand & style compliance

Per the review scope, judgment checks (tone, voice, sentence length, readability) were not re-applied to copy that's identical to the approved copy doc — only to wording that differs from it or is new to Figma.

Issues by severity

🟡 Needs Work

• [A4 – Capitalization] – "Discourse Forum" uses title case; the copy doc and the sibling cards ("Matrix space", "Canonical support") use sentence case.
  • Found: "Discourse Forum" in [Frame: 5 > Frame 5 > discourse-forum] | Correct: "Discourse forum"

🔵 Minor

• [A8 – Punctuation] – Exclamation marks aren't used in webpage copy.
  • Found: "Join the community!" in [Frame: 5 > Frame 3] | Correct: "Join the community"

---

✅ What looks good

• The Matrix space and Canonical support cards match the copy doc word-for-word (aside from the minor Matrix link line break noted above) — headings, body copy, and CTAs are all consistent.
• The Grafana and Loki card descriptions in the Observability tab match the copy doc exactly.
• The four tab labels (Databases, Big data and AI, Observability, Infrastructure) match the copy doc exactly and appear in the same order.
• The closing CTA section's heading and both button labels ("Get started with Juju today", "Read Docs", "Contact us") match the copy doc exactly.
• The Discourse forum and Canonical support link labels match the copy doc exactly.

Demo review — juju-charmhub-community-2026-07-22.md

UX demo review: Charmhub community (Juju)

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: 2026-07-22
Note: Fetched via static HTML. The page is server-rendered, so all visible content – including the "Get in touch" modal form, which is hidden by default via CSS – was captured; no JS-only content was missed. The designops checklist could not be fetched (404 at raw.githubusercontent.com/Sophie-32/sites-designops/master/checklists/demo-review.md), so the local fallback (references/default-checklist.md) was used. Design-fidelity comparison against the linked Figma file and the copy doc is out of scope for this skill (owned by figma-review / copy-doc-review); this report covers UX content quality and brand/style compliance of the live page only.

---

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor	❓ Needs Review	⬜ N/A
UX quality check	8	2	4	3	3	1
Brand & style compliance	5	0	6	2	1	—

Total issues: 15 (2 critical, 10 needs work, 5 minor) · Needs review: 4 · N/A sections: Navigation (breadcrumbs)

---

Issues by page section

Join the community

[Brand & style – B5 Active voice] 🟡 Needs Work – Passive construction
Evidence: "The Juju Matrix Space is hosted by Canonical and it is also the home of the broader Ubuntu community chat."
Rewrite in active voice: "Canonical hosts the Juju Matrix Space, which is also home to the broader Ubuntu community chat."

[Brand & style – A3 Product names] 🟡 Needs Work – "Juju" not capitalized
Evidence: "The discourse forum is the primary way for the community to discuss juju and charms."
"Juju" is an official product name and must be capitalized on every mention. Fix to "discuss Juju and charms."

[Brand & style – A4 Capitalization / A3 Product names] 🟡 Needs Work – Inconsistent capitalization of "Discourse"
Evidence: Card heading reads "Discourse forum" but the body copy underneath reads "The discourse forum is the primary way…"
Discourse is a specific software product (the forum platform), so it should be capitalized consistently. Fix the body copy to "The Discourse forum…".

[Brand & style – B7 Superlatives] 🟡 Needs Work – Unjustified superlatives
Evidence: "The Juju Matrix Space is the best way to interact with all the community members…" and "…to provide the best support experience for Ubuntu and your full open source stack…"
Both use "best" without a verifiable claim behind it. Replace with a specific, provable benefit (e.g. "one of the easiest ways to…", "a fast, responsive support experience…").

[Brand & style – A12 Hyphens] 🔵 Minor – Missing hyphens in compound adjectives
Evidence: "a comprehensive list of community curated guides and resources", "Canonical and community made charms are available", "provide in depth explanations on new concepts."
Each of these modifies the following noun and should be hyphenated: "community-curated", "community-made", "in-depth".

[Brand & style – B3 Sentence length] 🔵 Minor – Long sentences in card copy
Evidence: "The Juju Matrix Space is the best way to interact with all the community members and chat with the Canonical engineers working on Juju and charming." (26 words); "Our global team of experts is available 24/7 to provide the best support experience for Ubuntu and your full open source stack, from infrastructure to applications." (26 words)
Both exceed the 12–20 word target. Consider splitting into two sentences.

[Structure & Hierarchy] 🟡 Needs Work – Visually styled headings are not semantic headings
Evidence: "Matrix space", "Discourse forum", "Canonical support" are rendered as <p class="p-heading--5">, not <h3>/<h4> elements.
Screen reader users navigating by heading will skip these card titles entirely, and the document outline jumps straight from H2 ("Join the community") to body text. The same pattern repeats on all twelve charm cards further down the page (see "Explore charms on Charmhub" below) – likely a single shared component fix.

[Accessibility] 🔵 Minor – Logo alt text is generic
Evidence: alt="Matrix", alt="Discourse", alt="Canonical" on the three card images.
Per the severity override for logo alt text, this is cosmetic rather than a functional accessibility gap, but more descriptive alt text (e.g. "Matrix logo") would be a small improvement.

---

Explore charms on Charmhub

[Structure & Hierarchy] 🔵 Minor – Missing terminal punctuation
Evidence: "Charmhub is a curated marketplace for charms which can be readily integrated into any infrastructure" — sentence ends with no period.

[Brand & style – A4 Capitalization] 🟡 Needs Work – Inconsistent capitalization of "Machine"
Evidence: "Charmhub includes a large collection of Kubernetes and Machine charms, their related information and official documentation."
"Kubernetes" is a proper noun and correctly capitalized; "machine" is a generic descriptor here and should be lowercase, matching "charms" elsewhere on the page (e.g. tab label "Databases" vs. body copy which otherwise keeps common nouns lowercase).

[Accessibility] 🔴 Critical – Wrong logo image on Charmed MongoDB card
Evidence: The "Charmed MongoDB" card's image source is .../5a6b9b4b-**ubuntu-logo**.png, while every sibling card uses a product-specific logo (e.g. postgres-logo-jujuis.png, mysql_logo.png, kafka-logo-jujuis.png). The MongoDB card visually displays the Ubuntu circle-of-friends logo instead of the MongoDB leaf logo.
This is a real content/asset bug, not a style nit – it misrepresents the product being linked to. Flag for dev to swap in the correct MongoDB logo asset before merge.

[Accessibility] 🔴 Critical – MySQL card link has no accessible name
Evidence: The MySQL card wraps its logo in <a href="...readthedocs-hosted.com"> with no aria-label and an empty alt="" on the image, then wraps the heading text in a second, separate <a>MySQL</a> pointing to the same destination. Every other card in the grid (Postgres, MongoDB, Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, Vault, Traefik, Landscape) wraps the whole card in a single link with an aria-label.
The first link exposes no accessible name at all to a screen reader (announced as "link" or the raw URL), and having two adjacent links to the same destination is a duplicate keyboard/screen-reader stop. Recommend making the MySQL card match the single-link, aria-label-carrying pattern used everywhere else.

[Brand & style – A2 "open source"] 🟡 Needs Work – Inconsistent hyphenation of "open source"
Evidence: "Open-source relational database management system" (Postgres and MySQL cards), "Open-source reverse proxy and load balancer…" (Traefik card) vs. "Open source distributed event store…" (Kafka), "Open source platform for machine learning…" (Kubeflow), and the same unhyphenated form on Apache Spark, Prometheus, Grafana, Loki, and Vault.
Per the style guide, "open source" is always lowercase, two words, no hyphen — even used adjectivally. Fix "Open-source" → "Open source" on the Postgres, MySQL, and Traefik cards for consistency with the other nine cards on the same page.

[Structure & Hierarchy] ❓ Needs Review – Product naming
Evidence: Card labelled "Postgres" links to charmhub.io/postgresql.
Could not confirm against an approved product-naming reference whether "Postgres" or "PostgreSQL" is the preferred display name for this context; flagging for the reviewer to confirm against brand/product guidance.

---

Get started with Juju today

[CTAs] 🔵 Minor – Inconsistent CTA capitalization
Evidence: "Read Docs" (Title Case) next to "Contact us" (sentence case) in the same CTA block.
Pick one capitalization convention for CTA button pairs; sentence case is the convention used everywhere else on the page.

[Links] 🟡 Needs Work – Same link text, different destination/behavior
Evidence: "Contact us ›" in the "Canonical support" card (Join the community section) is a direct link to /contact-us. "Contact us" in the "Get started with Juju today" section instead opens an in-page modal (aria-controls="juju-modal") rather than navigating anywhere.
The checklist flags this directly: links with the same text on the same page should go to the same destination/behavior. A user who already used one "Contact us" link may be surprised the second one behaves differently (opens a form instead of navigating). Consider differentiating the labels (e.g. "Contact sales" vs. "Get in touch") or making the behavior consistent.

[Forms & Inputs] ❓ Needs Review – Empty <label> relying on fieldset legend
Evidence: <label class="u-hide" for="about-use-case"></label> immediately precedes the "Tell us more about your needs" <textarea>; the accessible name instead comes from the fieldset's aria-labelledby legend.
This likely works in most screen readers but is a fragile pattern. Recommend confirming with an accessibility tool (e.g. axe) that the textarea announces correctly, or moving the visible legend text into the label itself.

[Forms & Inputs] ⬜ Not applicable – Honeypot fields
The hidden "Website" and "Name" fields (class="u-off-screen") are standard Marketo spam-honeypot fields, not user-facing content. Flagged only for visibility, not as a defect.

[Analytics] ❓ Needs Review – Mismatched tracking label
Evidence: The modal's submit handler fires a GA event with eventAction: 'iot contact-us'. This page is about Juju/Charmhub, not IoT – the label looks like it was copied from a different template and left unchanged.
Not user-facing copy, so it does not affect the on-page score, but worth a note to the dev since it will skew analytics attribution for this form.

---

Brand & style compliance

🔴 Critical

None found.

🟡 Needs Work

• A3 Product names – "juju" not capitalized in "discuss juju and charms" (Discourse forum card). Correct: "discuss Juju and charms."
• A3/A4 Capitalization – "the discourse forum" (body copy) inconsistent with "Discourse forum" (card heading). Correct: capitalize "Discourse" consistently as the product name.
• A4 Capitalization – "Machine charms" should be "machine charms" (generic term, not a proper noun), for consistency with lowercase common nouns elsewhere on the page.
• A2 "open source" – "Open-source" (hyphenated) used on the Postgres, MySQL, and Traefik cards, inconsistent with the unhyphenated "Open source" used on nine other cards on the same page. Correct: "Open source […]" throughout.
• B5 Active voice – "The Juju Matrix Space is hosted by Canonical…" – passive construction. Correct: "Canonical hosts the Juju Matrix Space…"
• B7 Superlatives – "the best way to interact with all the community members" (Matrix space) and "the best support experience for Ubuntu and your full open source stack" (Canonical support) – unjustified superlatives with no supporting evidence.

🔵 Minor

• A12 Hyphens – "community curated" → "community-curated", "community made" → "community-made", "in depth" → "in-depth" (all compound adjectives before a noun).
• B3 Sentence length – Two sentences in the "Join the community" cards run to 26 words, above the 12–20 word target (see Issues by page section above for full text).

❓ Needs review

• A3 Product names – "Postgres" vs. the fuller "PostgreSQL" – no reference available to confirm the preferred brand name for this charm card.

---

⬜ Not applicable

• Navigation – breadcrumbs: No breadcrumb trail is present; the page instead uses a horizontal sub-navigation bar (How Juju works / Charmhub / JAAS / Community / Docs / Blog) with the current page marked via aria-current="page" and is-selected. This satisfies the "users can identify where they are" requirement without a breadcrumb, so it is not a gap.
• Forms & Inputs – honeypot fields: see note above; not user-facing, so not scored as a defect.

---

✅ What looks good

Structure & Hierarchy

• Clean heading order throughout the visible page: H1 ("Community and Charmhub") → H2 ("Join the community", "Explore charms on Charmhub", "Get started with Juju today"), no skipped levels.
• The charm grid has clear intro copy ("You can find a curated selection of charms below:") before the list, and the filter tabs (Databases / Big data and AI / Observability / Infrastructure) have accessible role="tabpanel" / aria-labelledby wiring, plus a mobile <select> fallback for the same tab set.

CTAs & Links

• CTA copy is specific and honest: "Connect with the community on Matrix ›", "Connect with the community on Discourse ›", "Read Docs" – no vague "click here"/"learn more" phrasing found.
• Card links only wrap the relevant phrase (charm name), not entire paragraphs of body copy.

Accessibility

• Decorative charm-logo images correctly use empty alt="" where the destination and name are already conveyed by adjacent link text or aria-label (Postgres, Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, Vault, Traefik, Landscape cards).
• Required form fields (First name, Last name, Email, Company, Job Title, Country) are consistently marked with an is-required label class; the optional "Mobile/cell phone number" field is correctly left unmarked.

Brand & style

• "Open source" is correctly formatted (lowercase, unhyphenated) on nine of the twelve charm cards (Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, Vault), plus the page's own meta description.
• "24/7" is correctly formatted (not "24x7").
• Charmed MongoDB is precisely described as "Source-available" rather than incorrectly labeled "open source" – a good, accurate distinction.
• No banned words/phrases, gendered pronouns, or exclamation marks found anywhere in the extracted copy.

---

🔲 Manual checks for reviewer

• Responsive behavior – resize the browser or use device emulation to check layout and readability at mobile, tablet, and desktop breakpoints
• Keyboard navigation – tab through the page to confirm correct focus order, visible focus indicators, and accessible labels on interactive elements (particularly the duplicate MySQL card links and the "Get in touch" modal)
• Authenticated states – log in and check any copy that only appears after authentication
• JS-rendered content – interact with the page to trigger dynamic states (errors, success messages, empty states); confirm the "Contact us" modal opens/submits as expected and that the tab-filtered charm grid behaves correctly on click
• Discourse post (case studies only) – not applicable; this page is not a case study

---

Generated by the automated UX QA review tool.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 77.37%. Comparing base (e57c97a) to head (a49113a).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2803   +/-   ##
=======================================
  Coverage   77.37%   77.37%           
=======================================
  Files          17       17           
  Lines        2060     2060           
=======================================
  Hits         1594     1594           
  Misses        466      466           

Flag	Coverage Δ
python	77.37% <0.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[muhammad-ali-pk]

UX review

Automated UX QA review generated from this PR. Stages run: Demo review.

Demo review — juju-charmhub-community-2026-07-22.md

UX demo review: Charmhub community (Juju)

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: July 22, 2026
Note: Checklist fetch from the designops source of truth (sites-designops repo) returned a 404, so this review used the local fallback at references/default-checklist.md. Page markup was retrieved as static HTML; the four charm tabs (Databases, Big data and AI, Observability, Infrastructure) render all their content in the DOM at once and are switched by JavaScript, so this review could confirm their content but not the interactive tab‑switching behavior itself.

---

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor	❓ Needs Review	⬜ N/A
UX quality check	10	0	3	0	2	1
Brand & style compliance	8	0	2	0	—	—

Total issues: 5 (0 critical, 5 needs work, 0 minor) · Needs review: 2 · N/A sections: Navigation

---

Issues by page section

Join the community

[Structure & Hierarchy] 🟡 Needs Work – Card titles are styled as headings but are not heading elements
Evidence: "Matrix space", "Discourse forum", and "Canonical support" are each marked up as <p class="p-heading--5"> rather than <h3>/<h4>.
These three cards sit directly under the "Join the community" <h2> and look like subheadings, but they are not in the accessibility tree as headings. Screen reader users navigating by heading will skip straight from "Join the community" to "Explore charms on Charmhub" and never encounter these three card titles as landmarks. Recommend converting to real <h3> elements (or equivalent) to preserve the visual hierarchy in the semantic structure. The same pattern recurs in the "Get in touch" modal, where "How should we get in touch?" and "Tell us more about your needs" are styled as headings (p-heading--4) on <p> tags instead of <h4>.

Explore charms on Charmhub

[Accessibility] 🟡 Needs Work – MySQL card has two adjacent links to the same destination
Evidence: In the Databases tab, the MySQL card wraps its logo in <a aria-label="MySQL" href="https://canonical-charmed-mysql.readthedocs-hosted.com"> and then wraps its text title in a second, separate <a href="...">MySQL</a> immediately after – two links, same destination. Every other charm card in this section (Postgres, Charmed MongoDB, Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, Vault, Traefik, Landscape) combines the logo and title into one single link.
Adjacent duplicate links to the same URL are a known screen reader annoyance (the link is announced twice in a row) and this card is inconsistent with the pattern used everywhere else on the page. Recommend merging into one link, matching the other 11 cards.

[Content quality] 🟡 Needs Work – Postgres and MySQL share identical, non-differentiating descriptions
Evidence: Postgres: "Open-source relational database management system." MySQL: "Open-source relational database management system." Word-for-word identical, even though the two products are different (MySQL is a Canonical/community charm, Postgres is a different offering).
Duplicated descriptions reduce their value to a visitor comparing charms at a glance. Recommend a description specific to MySQL (e.g. mentioning MySQL's ecosystem or use case) to distinguish it from Postgres.

---

Brand & style compliance

Issues from the Canonical copy style guide check. Organized by severity.

🟡 Needs Work

• A2 – "open source" formatting – Inconsistent hyphenation of "open source" within the same charm grid.
  • Found: "Open-source relational database management system" (Postgres, MySQL descriptions) and "Open-source reverse proxy and load balancer for HTTP and TCP-based applications" (Traefik) | Correct: "Open source relational database management system" / "Open source reverse proxy and load balancer for HTTP and TCP-based applications" – no hyphen, per the style guide, matching the correct usage already used for Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, and Vault on the same page.
• A4 – Capitalization – CTA text in Title Case.
  • Found: "Read Docs" (button in the "Get started with Juju today" section) | Correct: "Read docs" – sentence case, matching the site's general capitalization convention for buttons and headings.

---

❓ Needs review

• Copy doc mismatch – The page's <meta name="copydoc"> tag references https://docs.google.com/document/d/1_InbYD0f__hulJQv5fpwy76lQp4pZvn5Bc802X6WXAM/edit, which is a different document from the copy doc supplied for this review (https://docs.google.com/document/d/18KE4MzWdRNNe12B-rZXA_22NLg8U6LP2kcV3YTWcHy4/edit). This review could not confirm which doc is the current source of truth for this page's copy, so a side-by-side copy comparison was not attempted. Recommend confirming with the author which doc is current before treating either as authoritative.
• Off-screen-only comments field – The "Get in touch" modal form includes a "Your comments" <textarea> wrapped entirely in a visually-hidden (u-off-screen) container, along with visually-hidden honeypot fields ("Website", "Name"). The honeypot fields are a standard spam-prevention pattern and not a concern. The "Your comments" field's purpose is less clear: it is exposed to screen reader users but invisible to sighted users, meaning the two groups get a different form experience. Recommend confirming with the dev whether this field is intentional (e.g. reserved for a future release) or a leftover that should be removed.
• JS-rendered/interactive states – Tab switching (Databases / Big data and AI / Observability / Infrastructure), the "Get in touch" modal open/close behavior, and any client-side form validation could not be exercised from static HTML and should be manually checked.

---

⬜ Not applicable

• Navigation – This is a single-level marketing page with no breadcrumbs or in-page sub-navigation; the global site header/footer are shared components audited separately across the site, not specific to this page.

---

✅ What looks good

Join the community

• All three cards have descriptive, benefit-led body copy explaining what each channel is for (Matrix, Discourse, Canonical support), not just a label.
• Link text is specific and descriptive: "Connect with the community on Matrix ›" and "Connect with the community on Discourse ›" – no "click here" or "read more."
• Hero and card images carry meaningful alt text ("Matrix", "Discourse", "Canonical").

Explore charms on Charmhub

• The charm tab list is correctly built with role="tablist", role="tab", aria-selected, and aria-controls/aria-labelledby linking each tab to its panel – solid semantic tab implementation.
• A mobile-friendly <select> fallback is provided for the same tab set on small screens.
• Charm logos correctly use empty alt="" since each logo is paired with adjacent visible text (the product name), avoiding redundant announcements for screen readers.
• Intro copy ("Charmhub is a curated marketplace…", "You can find a curated selection of charms below:") gives context before the charm grid, per the "lists need an intro" best practice.

Get in touch (modal form)

• Every required input (first name, last name, email, company, job title, country) has a visible, associated <label>, and required fields are marked with an is-required class rather than relying on placeholder text alone.
• The modal itself is correctly marked up with role="dialog", aria-labelledby, and aria-describedby, and its close button has an explicit aria-label="Close active modal".
• Heading hierarchy across the page is otherwise clean: H1 → H2 → H2 → H2 → H3, with no skipped levels.

General

• No exclamation marks, banned buzzwords, or unsupported superlatives found in the visible copy.
• "24/7" formatted correctly (not "24x7").
• Product names used correctly: "Juju," "Charmhub."

---

🔲 Manual checks for reviewer

• Responsive behavior – resize the browser or use device emulation to check layout and readability at mobile, tablet, and desktop breakpoints
• Keyboard navigation – tab through the page to confirm correct focus order, visible focus indicators, and accessible labels on interactive elements
• Authenticated states – log in and check any copy that only appears after authentication
• JS-rendered content – interact with the page to trigger dynamic states (errors, success messages, empty states); specifically the charm tab switching, the mobile <select> tab fallback, and the "Get in touch" modal
• Discourse post (case studies only) – not applicable, this is not a case study page

---

Generated by the automated UX QA review tool.

[muhammad-ali-pk]

UX review

Automated UX QA review generated from this PR. Stages run: Demo review.

Demo review — juju-charmhub-community-2026-07-23.md

UX demo review: Charmhub community (Juju)

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: July 23, 2026
Note: The checklist fetch from the designops source of truth (sites-designops repo) returned a 404, so this review used the local fallback at references/default-checklist.md. Page markup was retrieved as static HTML – the four charm tabs (Databases, Big data and AI, Observability, Infrastructure) render all their content in the DOM at once and are switched by JavaScript, so this review could confirm their content but not the interactive tab-switching behavior itself. A Figma file and a copy doc were supplied as context; design-fidelity comparison against Figma is outside the scope of this skill (see figma-review/), and the copy doc's URL does not match the copydoc meta tag on the page itself (see Needs review).

---

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor	❓ Needs Review	⬜ N/A
UX quality check	9	1	4	1	3	1
Brand & style compliance	6	0	2	0	—	—

Total issues: 8 (one critical, six needs work, one minor) · Needs review: 3 · N/A sections: Navigation

---

Issues by page section

Join the community

[Structure & Hierarchy] 🟡 Needs Work – Card titles are styled as headings but are not heading elements
Evidence: "Matrix space", "Discourse forum", and "Canonical support" are each marked up as <p class="p-heading--5"> rather than <h3>/<h4>.
These three cards sit directly under the "Join the community" <h2> and look like subheadings, but they are not in the accessibility tree as headings. Screen reader users navigating by heading will skip straight from "Join the community" to "Explore charms on Charmhub" and never encounter these three card titles. The same pattern recurs on the card titles in the "Explore charms on Charmhub" grid (e.g. "Postgres", "MySQL", "Kafka") and in the "Get in touch" modal ("How should we get in touch?", "Tell us more about your needs" are <p class="p-heading--4">). Recommend converting these to real heading elements to preserve the visual hierarchy in the semantic structure.

Explore charms on Charmhub

[Accessibility] 🟡 Needs Work – MySQL card has two adjacent links to the same destination
Evidence: In the Databases tab, the MySQL card wraps its logo in <a aria-label="MySQL" href="https://canonical-charmed-mysql.readthedocs-hosted.com"> and then wraps its text title in a second, separate <a href="...">MySQL</a> immediately after – two links, same destination. Every other charm card in this section (Postgres, Charmed MongoDB, Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, Vault, Traefik, Landscape) combines the logo and title into one single link.
Adjacent duplicate links to the same URL are a known screen reader annoyance (the link is announced twice in a row) and this card is inconsistent with the pattern used everywhere else on the page. Recommend merging into one link, matching the other eleven cards.

[Content quality] 🟡 Needs Work – Postgres and MySQL share identical, non-differentiating descriptions
Evidence: Postgres: "Open-source relational database management system." MySQL: "Open-source relational database management system." Word-for-word identical, even though the two products are different (MySQL is a Canonical/community charm, Postgres is a different offering).
Duplicated descriptions reduce their value to a visitor comparing charms at a glance. Recommend a description specific to MySQL to distinguish it from Postgres.

[Mobile Considerations] 🔵 Minor – Dense charm grid flagged for mobile review
Evidence: Each of the four tabs (Databases, Big data and AI, Observability, Infrastructure) lists three logo-plus-text cards in a grid layout.
This pattern usually reflows to a single column on small screens, but should be checked manually to confirm the tab <select> fallback and card grid remain readable and don't crowd the viewport at mobile widths.

Get in touch (modal form)

[Forms & Inputs] 🔴 Critical – "Tell us more about your needs" textarea has no accessible name
Evidence: <label class="u-hide" for="about-use-case"></label> immediately precedes <textarea id="about-use-case" rows="5" maxlength="2000"></textarea> – the <label> element is present and correctly associated via for/id, but it is empty (no text content) and visually hidden (u-hide). There is no placeholder and no aria-label on the textarea either.
This field is visible to sighted users with no label at all beyond the fieldset legend ("Tell us more about your needs"), and a screen reader will announce it with a blank name – effectively an unlabelled field for both audiences. Recommend adding real label text (visible or via aria-label), e.g. "Tell us about your use case".

[CTAs] 🟡 Needs Work – Form submit button uses a vague, generic verb
Evidence: <button type="submit" class="p-button--positive js-submit-button">Submit</button>.
The checklist explicitly calls out "submit" as a vague CTA to avoid. Recommend a more specific label describing the outcome, e.g. "Send my details" or "Get in touch".

Get started with Juju today

(No new issues – see Brand & style compliance for the "Read Docs" capitalization finding.)

---

Brand & style compliance

Issues from the Canonical copy style guide check. Organized by severity.

🟡 Needs Work

• A2 – "open source" formatting – Inconsistent hyphenation of "open source" within the same charm grid.
  • Found: "Open-source relational database management system" (Postgres, MySQL descriptions) and "Open-source reverse proxy and load balancer for HTTP and TCP-based applications" (Traefik) | Correct: "Open source relational database management system" / "Open source reverse proxy and load balancer for HTTP and TCP-based applications" – no hyphen, matching the correct usage already used for Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, and Vault on the same page.
• A4 – Capitalization – CTA text in Title Case.
  • Found: "Read Docs" (button in the "Get started with Juju today" section) | Correct: "Read docs" – sentence case, matching the site's general capitalization convention for buttons and headings.

---

❓ Needs review

• Copy doc mismatch – The page's <meta name="copydoc"> tag references https://docs.google.com/document/d/1_InbYD0f__hulJQv5fpwy76lQp4pZvn5Bc802X6WXAM/edit, which is a different document from the copy doc supplied for this review (https://docs.google.com/document/d/18KE4MzWdRNNe12B-rZXA_22NLg8U6LP2kcV3YTWcHy4/edit). This review could not confirm which doc is the current source of truth for this page's copy, so a side-by-side copy comparison was not attempted. Recommend confirming with the author which doc is current before treating either as authoritative.
• Required-field indicators – Inputs in the "Get in touch" modal (first name, last name, email, company, job title, country) carry an is-required class, but static HTML alone cannot confirm whether this renders a visible asterisk or other marker for sighted users. Recommend a manual check.
• JS-rendered/interactive states – Tab switching (Databases / Big data and AI / Observability / Infrastructure), the "Get in touch" modal open/close behavior, and any client-side form validation could not be exercised from static HTML and should be manually checked.

---

⬜ Not applicable

• Navigation – This is a single-level marketing page with no breadcrumbs or in-page sub-navigation; the global site header/footer are shared components audited separately across the site, not specific to this page.

---

✅ What looks good

Join the community

• All three cards have descriptive, benefit-led body copy explaining what each channel is for (Matrix, Discourse, Canonical support), not just a label.
• Link text is specific and descriptive: "Connect with the community on Matrix ›" and "Connect with the community on Discourse ›" – no "click here" or "read more."
• Hero and card images carry meaningful alt text ("Matrix", "Discourse", "Canonical").

Explore charms on Charmhub

• The charm tab list is correctly built with role="tablist", role="tab", aria-selected, and aria-controls/aria-labelledby linking each tab to its panel – solid semantic tab implementation.
• A mobile-friendly <select> fallback is provided for the same tab set on small screens.
• Charm logos correctly use empty alt="" since each logo is paired with adjacent visible text (the product name) or an aria-label on the enclosing link, avoiding redundant announcements for screen readers.
• Intro copy ("Charmhub is a curated marketplace…", "You can find a curated selection of charms below:") gives context before the charm grid, per the "lists need an intro" best practice.

Get in touch (modal form)

• Every required contact input (first name, last name, email, company, job title, country) has a visible, associated <label>, and required fields are marked with an is-required class rather than relying on placeholder text alone.
• The modal itself is correctly marked up with role="dialog", aria-labelledby, and aria-describedby, and its close button has an explicit aria-label="Close active modal".
• Heading hierarchy among real heading elements is clean: H1 → H2 → H2 → H2, with no skipped levels.

General

• No exclamation marks, banned buzzwords, or unsupported superlatives found in the visible copy.
• Product names used correctly: "Juju," "Charmhub."

---

🔲 Manual checks for reviewer

• Responsive behavior – resize the browser or use device emulation to check layout and readability at mobile, tablet, and desktop breakpoints
• Keyboard navigation – tab through the page to confirm correct focus order, visible focus indicators, and accessible labels on interactive elements
• Authenticated states – log in and check any copy that only appears after authentication
• JS-rendered content – interact with the page to trigger dynamic states (errors, success messages, empty states); specifically the charm tab switching, the mobile <select> tab fallback, and the "Get in touch" modal
• Discourse post (case studies only) – not applicable, this is not a case study page

---

Generated by the automated UX QA review tool.

[muhammad-ali-pk]

UX review

Automated UX QA review generated from this PR. Stages run: Copy doc review.

Copy doc review — juju-charmhub-community-2026-07-23.md

UX content audit report – copy doc

Document: Juju – Community and Charmhub (suggested URL: canonical.com/juju/charmhub-community)
Date: July 23, 2026
Note: The designops checklist fetch (sites-designops repo) was not attempted for this run against a live network check; the review used the local fallback at copy-doc-review/references/default-checklist.md. Page type was left as "Choose" in the metadata table. Based on the page's structure – hero, card row, tabbed charm directory, CTA strip, no on-page form – it was treated as a marketing/community page for gating purposes. This is flagged as a critical metadata gap below, not assumed silently.

---

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor	❓ Needs Review	⬜ N/A
UX quality check	9	3	10	3	4	2

Total issues: 16 (three critical, 10 needs work, three minor) · Needs review: four · N/A sections: Forms & Inputs (no on-page form); Completeness – interactive states (static marketing page)

---

Issues by page section

Metadata

🔴 Critical

• [Structure & Hierarchy] – No heading levels (H1, H2, H3) are indicated anywhere in the document.
  • Found: Section labels such as "HERO", "EQUAL HEIGHT ROW", and "TABBED SECTIONS" mark layout blocks, but no text within them is assigned a heading level. | Recommendation: Mark the intended level for each title (e.g. H1 for "Community and Charmhub", H2 for "Join the community" and "Explore charms on Charmhub").
• [Structure & Hierarchy] – The metadata table is substantially incomplete. Several required fields are left as the unselected dropdown placeholder "Choose" or are blank.
  • Found: "Target audience (choose from drop down): Choose", "Page type (choose from drop down): Choose", "Stage in the funnel: Choose", "Main action for users to take on the page: [blank]", "Main keyword and keyword cluster: [blank]", "og:Image: Please include a link to the image you would like as the page thumbnail..." (instruction text only, no actual link), "Please indicate approvals needed before the page goes into development: Choose" | Recommendation: Resolve every dropdown and blank field before design starts – these affect scope (page type), SEO (keyword), and sign-off (approvals).

🟡 Needs Work

• [Character Limits] – Page title exceeds the 60-character limit.
  • Found: "Juju | The simplest way to deploy and maintain applications in the cloud" (72 characters) | Recommendation: Trim to 60 characters or fewer, e.g. "Juju | The simplest way to deploy apps in the cloud" (52 characters).
• [Character Limits] – Page description exceeds the 160-character limit.
  • Found: "Juju is an open source orchestration engine for software operators that enables the deployment, integration and lifecycle management of applications at any scale, on any infrastructure." (185 characters) | Recommendation: Shorten to 160 characters or fewer, keeping the core value proposition.
• [Navigation] – The navigation field mixes leftover instructional text with what may be the actual answer, so it is unclear whether the field was properly completed.
  • Found: "Please select the primary navigation for the page. Bubble navigation canonical.com/juju" | Recommendation: Remove the instructional sentence and confirm "Bubble navigation" is the final, intended selection.
• [Brand & style compliance – A8, punctuation] – Missing serial (Oxford) comma in a three-item list.
  • Found: "enables the deployment, integration and lifecycle management of applications" | Recommendation: "the deployment, integration, and lifecycle management of applications".

Hero / Equal height row

🔴 Critical

• [CTAs] – The "Contact us" link points to an internal Google Doc draft rather than a live destination. It appears twice on the page (Canonical support card and the closing CTA strip), so the issue repeats.
  • Found: "Contact us ›" | Recommendation: Replace with the final contact/sales-form URL before this doc goes to design.

🟡 Needs Work

• [Character Limits] – The Discourse forum card paragraph exceeds the 300-character guideline for an equal-height-row card.
  • Found: Paragraph beginning "The discourse forum is the primary way for the community to discuss juju and charms..." (399 characters) | Recommendation: Cut to 300 characters or fewer – consider dropping the sentence about development teams sharing updates.
• [Character Limits] – The Canonical support card paragraph exceeds the 300-character guideline.
  • Found: Paragraph beginning "Build with confidence and operate at scale with enterprise support from Canonical..." (346 characters) | Recommendation: Trim to 300 characters or fewer.
• [Brand & style compliance – B7, superlatives] – Two unbacked superlatives ("best") appear with no supporting fact.
  • Found: "The Juju Matrix Space is the best way to interact with all the community members..." and "...to provide the best support experience for Ubuntu..." | Recommendation: Replace with a specific, verifiable benefit, or soften to "a great way to..."

🔵 Minor

• [Tone & Clarity] – Passive constructions appear twice in this section.
  • Found: "The Juju Matrix Space is hosted by Canonical" and "The forum is used daily by all the Canonical engineers" | Recommendation: Rephrase actively, e.g. "Canonical hosts the Juju Matrix Space" and "Canonical engineers use the forum daily."

Tabbed sections

🟡 Needs Work

• [Tone & Clarity] – A missing sentence break creates a run-on sentence in the Charmhub intro paragraph.
  • Found: "Charmhub is a curated marketplace for charms which can be readily integrated into any infrastructure Charmhub includes a large collection of Kubernetes and Machine charms..." | Recommendation: Add a period after "infrastructure": "...into any infrastructure. Charmhub includes a large collection..."
• [Brand & style compliance – A12, hyphens] – "Open-source" is hyphenated in some charm descriptions but not others, even though it functions as the same compound adjective before a noun throughout.
  • Found: "Open-source relational database management system" (Postgres), "Open-source reverse proxy and load balancer..." (Traefik) versus "Open source distributed event store..." (Kafka), "Open source platform for machine learning..." (Kubeflow), and five other unhyphenated instances | Recommendation: Standardize on the hyphenated form "open-source" throughout, per the compound-adjective rule.
• [Brand & style compliance – A3, product names] – "Juju" is capitalized elsewhere in the doc but appears lowercase mid-sentence here.
  • Found: "The discourse forum is the primary way for the community to discuss juju and charms." | Recommendation: Capitalize to "Juju" for consistency with its use elsewhere (e.g. "The Juju Matrix Space").

🔵 Minor

• [Tone & Clarity] – The acronym "MLOps" is not expanded anywhere in the doc.
  • Found: "Open source platform for machine learning and MLOps on Kubernetes" (Kubeflow) | Recommendation: Expand on first use, e.g. "machine learning operations (MLOps)".

CTA section

🔵 Minor

• [CTAs] – "Read Docs" uses Title Case, inconsistent with the sentence-case convention used by the other CTA on the same row ("Contact us").
  • Found: "[Read Docs]" | Recommendation: "Read docs" for consistency, unless Title Case is a deliberate button-style exception.

---

❓ Needs review

• [Section: Metadata] – The suggested page URL is on the canonical.com domain, but its embedded reference link points to a juju.is URL. It's unclear whether this page replaces an existing juju.is page (which would need a redirect note) or the juju.is link is just a related reference.
  • Found: "canonical.com/juju/charmhub-community" | Question: Confirm with the page owner whether this is a migration from juju.is, and if so, note the redirect requirement per the Navigation checklist.
• [Section: Navigation] – No mention of whether this page appears in the mega nav, so the requirement for a nav label and description can't be confirmed either way.
  • Found: No mega nav reference anywhere in the metadata or body. | Question: Confirm whether this page is intended for the mega nav; if so, add the nav label and description.
• [Section: Tabbed sections] – Terms like "charming" and "Machine charms" assume the reader already knows Juju/charm terminology, but the target audience field was left unresolved, so it can't be confirmed whether this jargon level is appropriate.
  • Found: "...chat with the Canonical engineers working on Juju and charming." | Question: Once the target audience is confirmed, check whether these terms need a brief explanation for a less technical reader.
• [Section: CTA section] – The "Read Docs" link ends in a bare anchor fragment with no target, which may be a placeholder rather than a deliberate destination.
  • Found: "Read Docs" | Question: Confirm whether the trailing "#" is intentional (links to the top of the docs page) or a leftover placeholder that needs a real anchor.

---

⬜ Not applicable

• Forms & Inputs – N/A: this is a marketing/community page with no form fields defined in the copy doc (the "Contact us" CTA links out to an external form/sales flow rather than defining one on-page).
• Completeness – interactive states (hover/focus/error/success/empty/loading) – N/A: static marketing page, no interactive flow described.

---

✅ What looks good

• CTA text throughout is specific and action-oriented – "Connect with the community on Matrix", "Connect with the community on Discourse", "Read Docs" – none of the generic "click here"/"learn more"/"submit" phrasing the checklist warns against.
• The "Contact us" CTA uses identical text and points to the same destination in both places it appears, so the link-consistency check passes (the destination itself is flagged separately as not yet final).
• Each charm category in the tabbed section ("Databases", "Big data and AI", "Observability", "Infrastructure") has a clear label above its list of charms, satisfying the "lists need an intro/heading" check.
• All charm link text is a specific product name (Postgres, Kafka, Vault, and so on), never a full sentence or vague phrase, and every link has a clear destination.
• "Charmed MongoDB" is accurately labelled "Source-available" rather than "Open source", correctly distinguishing its license from the other charms – a genuinely careful factual detail.
• No images, graphics, or icon-only elements are referenced in the doc, so there are no missing alt-text or accessible-label gaps to flag.
• Numeric formatting is correct: "24/7" is used rather than "24x7", matching the style guide.
• The page owner is clearly named with a working mailto link, so ownership is unambiguous.
• All four charm-directory tabs are documented with a consistent set of three examples each, so the "all variants documented" completeness check passes.

---

Generated by the automated UX QA review tool.