feat: Automated UX check demo by muhammad-ali-pk · Pull Request #2803 · canonical/canonical.com

muhammad-ali-pk · 2026-07-22T05:41:19Z

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 · 2026-07-22T05:41:24Z

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 · 2026-07-22T06:19:04Z

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 · 2026-07-22T08:01:55Z

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 · 2026-07-22T13:09:44Z

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 · 2026-07-23T07:00:06Z

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 · 2026-07-23T07:05:00Z

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.

Sophie-32 · 2026-09-08T14:22:18Z

UX review

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

Demo review — juju-charmhub-community-2026-09-08.md

UX demo review: Charmhub community | Juju | Canonical

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: September 8, 2026
Note: Fetched via static HTML (curl). The page appears mostly server-rendered, so content capture should be reliable. The "Country" dropdown list was truncated during extraction for length only – it does not affect findings. The Figma file provided for design-fidelity context could not be checked: the Figma MCP server returned a "Token expired" (403) error, so no design-fidelity comparison was performed in this review. The linked copy doc (Google Doc) was not opened for a line-by-line diff – this review compares the live page against the UX checklist and copy style guide only.

Summary

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

Total issues: 6 (1 critical, 4 needs work, 1 minor) · Needs review: 2 · N/A sections: Navigation (global nav unchanged from site standard, not page-specific)

Issues by page section

"Tell us more about your needs" (contact modal form)

[Forms & Inputs / Accessibility] 🔴 Critical – Textarea has no accessible name
Evidence: <label class="u-hide" for="about-use-case"></label><textarea id="about-use-case" ...></textarea> – the <label> element exists but contains no text, and the textarea has no aria-label or placeholder.
A screen reader will announce this field as "edit text" with no description. There is a visible heading above it ("Tell us more about your needs") that sighted users can infer from, but the field itself has no programmatic name. Add visible or aria-label text to the empty <label>, e.g. aria-label="Tell us more about your needs".

Contact modal – "About your needs" fieldset

[Forms & Inputs] ❓ Needs Review – Required fields marked by CSS class only
Evidence: <label class="is-required" for="firstName">First name:</label> – required fields use an is-required class but the underlying HTML doesn't confirm a visible asterisk or text cue (e.g. "(required)") is rendered for sighted users.
Couldn't confirm from static HTML whether is-required renders a visible marker (asterisk, etc.). Recommend a manual check in-browser to confirm required fields are visually distinguishable, not just programmatically required.

"Join the community"

[Brand & style: B7 Superlatives] 🟡 Needs Work – Unjustified superlative "best way"
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."
"Best" is an unjustified superlative per the style guide unless backed by a verifiable fact. Recommend a specific claim instead, e.g. "one of the easiest ways" or naming the specific benefit.

"Canonical support"

[Brand & style: B7 Superlatives] 🟡 Needs Work – Unjustified superlative "best support experience"
Evidence: "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."
Flag "best" as an unjustified superlative. Consider stating the specific benefit (e.g. response time, expertise) instead.

"Explore charms on Charmhub" – curated charm list

[Brand & style: A2 "open source"] 🟡 Needs Work – Inconsistent hyphenation of "open source"
Evidence: Postgres and MySQL descriptions read "Open-source relational database management system" (hyphenated), while every other charm description in the same list (Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, Vault, Traefik) reads "Open source ..." (no hyphen).
Per the style guide, "open source" is two words with no hyphen when used generically. Fix Postgres and MySQL to match the rest of the list: "Open source relational database management system".

[CTAs / Brand & style: A4 Capitalization] 🔵 Minor – Title-case button label
Evidence: "Read Docs" button in the "Get started with Juju today" section.
UI text should follow sentence case per the style guide (capitalize only the first word). Change to "Read docs".

"Explore charms on Charmhub" – intro copy

[Brand & style: A8 Punctuation] ❓ Needs Review – Missing sentence-ending punctuation
Evidence: "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..."
This reads as two sentences run together with no full stop between them in the extracted text. This may be an artifact of HTML extraction (e.g. a line break rendered without a period in source) rather than a genuine copy error – recommend the reviewer confirm against the live rendered page.

Brand & style compliance

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

🔴 Critical

None found.

🟡 Needs Work

A2 "open source" – Inconsistent hyphenation between Postgres/MySQL ("Open-source") and other charm descriptions ("Open source") in the same list.
- Found: "Open-source relational database management system" (Postgres, MySQL) | Correct: "Open source relational database management system"
B7 Superlatives – Unjustified "best way" claim.
- Found: "The Juju Matrix Space is the best way to interact with all the community members..." | Correct: State a specific, verifiable benefit instead of "best".
B7 Superlatives – Unjustified "best support experience" claim.
- Found: "...to provide the best support experience for Ubuntu and your full open source stack..." | Correct: State a specific, verifiable benefit instead of "best".

🔵 Minor

A4 Capitalization – Title-case button label.
- Found: "Read Docs" | Correct: "Read docs"

❓ Needs review

A8 Punctuation – Possible missing full stop between two sentences in the Charmhub intro copy (may be an extraction artifact – confirm against live page).

⬜ Not applicable

Navigation – The header/footer navigation is the shared site-wide component, not page-specific content, so it's excluded from this page-level review.

✅ What looks good

Structure & Hierarchy

Heading hierarchy flows logically: H1 "Community and Charmhub" → H2s for each major section ("Join the community", "Explore charms on Charmhub", "Get started with Juju today") → H3s for sub-groups ("Get in touch", "Your comments"). No skipped levels.
Section headings are specific and descriptive, not generic placeholders.

CTAs & Links

CTA and link text throughout is specific and honest: "Connect with the community on Matrix", "Connect with the community on Discourse", "Contact us", "Read Docs" – no vague "click here" or "learn more" text found.
Each charm card link has a specific aria-label matching the charm name (e.g. aria-label="Postgres"), so link purpose is clear even out of context.
Links with the same visible text ("Contact us") consistently point to the same destination (/contact-us, with progressive-enhancement modal trigger on one instance).

Forms & Inputs

Most form fields (first name, last name, email, company, job title, country, phone) have properly associated, visible <label> elements – not placeholder-only.
Required fields are marked with an is-required class, distinguishing them from optional fields like the phone number.

Accessibility

Decorative images (charm logos) use empty alt="" correctly since they're already identified by adjacent link text/aria-labels.
Named logos (Matrix, Discourse, Canonical) carry non-empty, descriptive alt text.
The modal close button has a clear aria-label="Close active modal".

Brand & style

Consistent US spelling throughout (no UK variants found).
Product names used correctly: "Juju", "Charmhub", "MicroCloud" naming conventions elsewhere in nav are correctly capitalized; "Ubuntu Pro" used correctly (no legacy "Ubuntu Advantage" references).
"24/7" formatted correctly (not "24x7").
No exclamation marks, no banned words/phrases (e.g. "leverage", "utilize", "in order to") found in the extracted copy.
Active voice used throughout the visible body 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, especially the charm card grid and long country dropdown.
Keyboard navigation – tab through the page, especially the "Contact us" modal, to confirm correct focus order, focus trapping inside the modal, and a visible focus indicator on the close button.
Authenticated states – not applicable; page has no login-gated content.
JS-rendered content – interact with the modal to confirm form validation and success/error states (e.g. the "Your submission was sent successfully!" notification seen in the page's static markup) trigger correctly.
Design fidelity vs Figma – the Figma MCP token expired during this review; a designer should manually confirm the live page matches the Figma file at node 272-4097 (reconnect the Figma MCP server or refresh the token, then re-run this check).
Discourse post (case studies only) – not applicable; this is not a case study page.

Generated by the automated UX QA review tool.

Sophie-32 · 2026-09-11T07:32:28Z

UX review

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

Demo review — charmhub-community-2026-09-11.md

UX demo review: Charmhub community

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: September 11, 2026
Note: Content was fetched via static HTML retrieval. The page did not appear to be JS-heavy – tab panels for "Explore charms on Charmhub" render all four tabs' content in the HTML (toggled by JS), so all copy was captured. Design fidelity checks against Figma could not be completed – the Figma MCP token had expired (403: token expired) at review time. The linked copy doc (Google Doc) could not be opened directly, so copy comparison against it was not performed; findings below are based on the live page only.

Summary

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

Total issues: 6 (0 critical, 3 needs work, 3 minor) · Needs review: 1 · N/A sections: Navigation (global, not page-specific)

Issues by page section

Join the community

[Accessibility] 🔵 Minor – Hero-style images have vague alt text
Evidence: alt="Matrix", alt="Discourse", alt="Canonical" on the three feature images in this section.
The alt text names the image subject but doesn't describe its purpose in context. Consider something more descriptive, e.g. alt="Matrix chat interface", though this is a low-priority polish item.

[Brand & style] 🟡 Needs Work – Inconsistent capitalization of "Discourse"
Evidence: Heading reads "Discourse forum" (capitalized, correct – Discourse is a product name), but the body copy says "The discourse forum is the primary way for the community to discuss juju and charms" (lowercase).
Capitalize "Discourse" consistently as a proper product name throughout the body copy.

[Brand & style] 🟡 Needs Work – Lowercase "juju" mid-sentence
Evidence: "...the primary way for the community to discuss juju and charms."
Per the style guide, official product names should be capitalized on every use (Juju is listed as a proper name). Should read "...discuss Juju and charms."

Explore charms on Charmhub

[Accessibility] 🔵 Minor – Charm logo images missing alt text
Evidence: All charm logo <img> tags in the Databases/Big data and AI/Observability/Infrastructure tabs use alt="" (or no alt attribute at all, e.g. the Postgres logo). Each card link does carry an aria-label with the charm name, so the accessible name is present at the link level – but per this skill's severity override, logo alt text is treated as minor/cosmetic regardless.
Recommend adding descriptive alt text to the logos themselves for consistency (e.g. alt="Prometheus logo"), though not a blocker.

[Brand & style] 🟡 Needs Work – "Open-source" hyphenated where it shouldn't be
Evidence: Postgres and MySQL cards both read "Open-source relational database management system"; the Traefik card reads "Open-source reverse proxy and load balancer for HTTP and TCP-based applications." Every other charm description on the same page correctly uses "Open source" (two words, no hyphen) – e.g. Prometheus: "Open source monitoring system...", Kafka: "Open source distributed event store...".
Per the style guide, "open source" takes no hyphen except in official proper names. Remove the hyphen from these three instances for consistency with the rest of the page.

Get started with Juju today

(No issues found in this section – see "What looks good" below.)

Get in touch (modal form)

(No issues found – see "What looks good" below.)

Brand & style compliance

🟡 Needs Work

A2 (open source formatting) – "Open-source" incorrectly hyphenated in the Postgres, MySQL, and Traefik charm descriptions.
- Found: "Open-source relational database management system" | Correct: "Open source relational database management system"
- Found: "Open-source reverse proxy and load balancer for HTTP and TCP-based applications" | Correct: "Open source reverse proxy and load balancer for HTTP and TCP-based applications"
A3/A4 (product name capitalization) – "juju" and "discourse" used lowercase mid-sentence in the "Join the community" section, inconsistent with the section's own heading and with other product-name references on the page.
- Found: "...the primary way for the community to discuss juju and charms." | Correct: "...discuss Juju and charms."
- Found: "The discourse forum is the primary way..." | Correct: "The Discourse forum is the primary way..."

🔵 Minor

A4/generic – Feature image alt text ("Matrix", "Discourse", "Canonical") and all charm logo alt text are present but non-descriptive or empty; treated as minor per this skill's logo/alt-text severity override.

❓ Needs review

B3 (sentence length) – The Canonical support card's second sentence ("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.") runs to roughly 33 words, above the 12–20 word target. Flagging for reviewer judgment rather than a hard fail, since it reads clearly despite the length.

❓ Needs review

Design fidelity vs Figma – Could not be checked. The Figma MCP token returned 403: Token expired when fetching node 272-4097 in file VqD7aqJWV2Cm4l8sth9xLv. Reconnect the Figma MCP server and re-run this check before sign-off if visual fidelity needs confirming.
Copy doc comparison – The linked Google Doc (18KE4MzWdRNNe12B-rZXA_22NLg8U6LP2kcV3YTWcHy4) could not be fetched directly by this tool. If the page copy was meant to match an approved copy doc, compare manually.
Sentence length in the Canonical support card – see above.

⬜ Not applicable

Navigation – The header/nav and footer are the shared global site chrome, not page-specific content, so no page-level navigation findings apply here.
Forms & Inputs (page-level) – The only form on the page is the "Get in touch" modal, which is assessed inline above and passes.

✅ What looks good

Join the community

Clear, descriptive link text throughout: "Connect with the community on Matrix ›", "Connect with the community on Discourse ›", "Contact us ›" – no "click here" or "read more" patterns.
Section intro copy is concise and explains what each community channel offers before linking out.

Explore charms on Charmhub

Tabs are correctly built with ARIA roles (role="tablist", role="tab", role="tabpanel", aria-selected, aria-controls) and a <select> fallback for small screens – solid accessible and responsive pattern.
Each charm card link carries an aria-label naming the charm, so the accessible name is available even though the logo image alt text is empty.
Charm descriptions are consistent in structure (one clear sentence describing what the tool is/does).

Get started with Juju today

Two clearly differentiated CTAs ("Read Docs" and "Contact us") that are not confusingly similar.

Get in touch (modal form)

Every field has a visible, natural-language label (First name, Last name, Email, Company, Job Title, Country) rather than relying on placeholder text.
Required fields are clearly marked with is-required styling and the required attribute.

Structure & hierarchy

Heading order is logical throughout: H1 ("Community and Charmhub") → H2 sections ("Join the community", "Explore charms on Charmhub", "Get started with Juju today") with no skipped levels.
All headings are meaningful and specific – no vague or placeholder text.

🔲 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)
Discourse post (case studies only) – not applicable; this is not a case study page
Figma design fidelity – reconnect the Figma MCP server and re-check node 272-4097 against the live page
Copy doc comparison – manually compare the live page copy against the linked Google Doc

Generated by the automated UX QA review tool.

Sophie-32 · 2026-09-11T09:21:29Z

UX review

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

Demo review — charmhub-community-2026-09-11.md

UX demo review: Charmhub community

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: September 11, 2026
Note: Content was fetched via static HTML retrieval. The page is not JS-heavy for the purposes of this review – all four "Explore charms on Charmhub" tab panels are present in the raw HTML (toggled client-side), so their copy was captured in full. The hero section's second column renders as an empty container in the HTML – it likely holds a decorative background image or illustration applied via CSS, so it is flagged below as needs review rather than a content gap. The Figma file provided for design-fidelity context could not be checked – the Figma MCP token had expired (403: token expired) at review time, so no visual comparison against the design was performed. The linked copy doc (Google Doc) could not be opened directly by this tool, so findings below compare the live page against the UX and copy style checklists only, not against the copy doc.

Summary

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

Total issues: 13 (0 critical, 7 needs work, 6 minor) · Needs review: 3 · N/A sections: Navigation (shared global component, not page-specific copy)

Issues by page section

Hero

[UX quality] ❓ Needs Review – Second hero column renders empty in static HTML
Evidence: <div class="col"></div> next to the H1 "Community and Charmhub"
This may be a CSS background image or an element populated by JavaScript. Confirm visually that the hero isn't missing an intended image or supporting copy.

Join the community — Discourse forum card

[Brand & style] 🟡 Needs Work – Product name "Juju" written lowercase
Evidence: "The discourse forum is the primary way for the community to discuss juju and charms."
"Juju" is an official product name and should always be capitalized, including mid-sentence. Correct to "...to discuss Juju and charms."

[Brand & style] 🟡 Needs Work – Inconsistent capitalization of "Discourse"
Evidence: "The discourse forum is the primary way..." vs. the link text "Connect with the community on Discourse ›"
"Discourse" is a proper product/platform name and should be capitalized consistently. Correct the body copy to "The Discourse forum is the primary way..."

[Brand & style] 🔵 Minor – Missing hyphen in compound adjective
Evidence: "a comprehensive list of community curated guides and resources"
Per style guide A12, hyphenate compound adjectives before a noun: "community-curated guides."

Explore charms on Charmhub — intro copy

[Brand & style] 🔵 Minor – Missing hyphen in compound adjective
Evidence: "Canonical and community made charms are available on Charmhub."
Should read "community-made charms" (A12).

[Brand & style] 🔵 Minor – Missing serial (Oxford) comma
Evidence: "Charmhub includes a large collection of Kubernetes and Machine charms, their related information and official documentation."
Should read "...their related information, and official documentation." (A8).

[Brand & style] 🔵 Minor – Missing end punctuation
Evidence: "Charmhub is a curated marketplace for charms which can be readily integrated into any infrastructure" (bolded intro line)
This sentence has no closing period, inconsistent with the surrounding prose.

[Brand & style] 🟡 Needs Work – Inconsistent capitalization of charm type
Evidence: "a large collection of Kubernetes and Machine charms"
"Kubernetes" is a correctly capitalized proper noun, but "Machine" (as in "Machine charms") is not a proper name and should be lowercase for consistency with house style (A4): "Kubernetes and machine charms."

Explore charms on Charmhub — charm cards (tab panels)

[Brand & style] 🟡 Needs Work – Inconsistent hyphenation of "open source"
Evidence: Postgres – "Open-source relational database management system"; Traefik – "Open-source reverse proxy and load balancer for HTTP and TCP-based applications" vs. Kafka, Kubeflow, Apache Spark, Prometheus, Grafana, Loki, Vault – all use "Open source" (no hyphen)
Per style guide A2, "open source" is lowercase, two words, no hyphen (except in proper names). Two of the eleven charm descriptions use a hyphen while the rest correctly don't – fix "Open-source" to "Open source" on the Postgres and Traefik cards for consistency.

Get started with Juju today (CTA strip)

[Brand & style] 🟡 Needs Work – Inconsistent button label capitalization
Evidence: "Read Docs" vs. "Contact us" (adjacent buttons in the same CTA block)
Per style guide A4, use sentence case, not Title Case. "Read Docs" should read "Read docs" to match the sentence-case "Contact us" alongside it.

Contact us modal (shared form)

[UX quality] 🔵 Minor – Inconsistent label capitalization
Evidence: "Job Title:" (Title Case) vs. "First name:", "Last name:", "Company:" (sentence case) in the same field list
Correct to "Job title:" for consistency with the other labels.

[UX quality] ❓ Needs Review – Required field indicator not confirmed visible
Evidence: Required inputs carry an is-required CSS class on their <label>, but no asterisk or "(required)" text is present in the HTML/text content
Confirm visually that is-required renders a visible marker (e.g. an asterisk) – static HTML alone can't confirm this meets the "required fields are clearly marked" checklist item.

Hero and card images (site-wide)

[UX quality] 🔵 Minor – Generic alt text on illustrative images
Evidence: alt="Matrix", alt="Discourse", alt="Canonical" on the three "Join the community" card images
These describe the image's subject only in the broadest terms. Per the severity override for logo/illustrative images this is minor, but more descriptive alt text (e.g. "Screenshot of the Juju Matrix Space chat") would better serve screen reader users.

Brand & style compliance

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

🟡 Needs Work

A3 – "Juju" written lowercase mid-sentence
- Found: "discuss juju and charms" | Correct: "discuss Juju and charms"
A3/A14 – Inconsistent capitalization of "Discourse"
- Found: "The discourse forum is the primary way..." | Correct: "The Discourse forum is the primary way..."
A4 – "Machine charms" incorrectly capitalized as if a proper noun
- Found: "Kubernetes and Machine charms" | Correct: "Kubernetes and machine charms"
A2 – Inconsistent hyphenation of "open source" across charm cards
- Found: "Open-source relational database management system" (Postgres, Traefik) | Correct: "Open source relational database management system" (to match the other nine cards)
A4 – CTA button uses Title Case, inconsistent with its sibling button
- Found: "Read Docs" | Correct: "Read docs"
B7 – Unjustified superlative
- Found: "The Juju Matrix Space is the best way to interact with all the community members..." | Correct: state the specific benefit instead, e.g. "...is a great way to interact with..."
B7 – Unjustified superlative
- Found: "...to provide the best support experience for Ubuntu and your full open source stack" | Correct: state the specific benefit instead, e.g. "...to provide expert support for Ubuntu and your full open source stack"

🔵 Minor

A12 – Missing hyphen in compound adjective
- Found: "community curated guides" | Correct: "community-curated guides"
A12 – Missing hyphen in compound adjective
- Found: "community made charms" | Correct: "community-made charms"
A8 – Missing serial (Oxford) comma
- Found: "Kubernetes and Machine charms, their related information and official documentation" | Correct: "...their related information, and official documentation"
A8 – Missing end punctuation on a full sentence
- Found: "Charmhub is a curated marketplace for charms which can be readily integrated into any infrastructure" | Correct: add a closing period

❓ Needs review

Hero second column – renders as an empty <div class="col"> in static HTML; likely a CSS background image, but this could not be confirmed without rendering the page. [UX quality]
Required field indicator – the contact form marks required fields with an is-required CSS class but no visible asterisk or text is present in the fetched markup; confirm the indicator actually renders. [UX quality]
Figma design fidelity – not checked. The Figma MCP token had expired (403: token expired) at review time, so visual/design comparison against the linked Figma file (node 272-4097) could not be performed.

⬜ Not applicable

Navigation – the header nav is a shared global component reused across all Canonical/Ubuntu pages, not page-specific copy, so it is out of scope for this content review.

✅ What looks good

Structure & Hierarchy

Clean heading hierarchy: a single H1 ("Community and Charmhub") followed by three meaningful, descriptive H2s ("Join the community", "Explore charms on Charmhub", "Get started with Juju today"), no skipped levels.

Links and CTAs

Link text throughout is specific and descriptive: "Connect with the community on Matrix ›", "Connect with the community on Discourse ›", "Contact us ›" – no "click here" or "learn more" patterns.
No two links with the same text point to different destinations.

Accessibility

The charm-card tabs ("Databases", "Big data and AI", "Observability", "Infrastructure") use a full ARIA tab pattern (role="tablist", role="tab", aria-selected, aria-controls, role="tabpanel"), with a <select> fallback for small screens – a solid accessible and responsive pattern.
Charm logo images correctly use empty alt="" because each logo sits directly next to its visible product name in text – this avoids redundant screen-reader announcements rather than being a missing-alt-text problem.

Forms & Inputs

Every visible contact-form field (First name, Last name, Email, Company, Job Title, Country) has an explicit, associated <label>, not placeholder-only text.

Brand & style

"open source stack" in the Canonical support card copy is correctly formatted: lowercase, two words, no hyphen.
"Charmhub", "Juju" (in the CTA heading), "MongoDB", and "Ubuntu" are correctly capitalized in most instances on the page.

🔲 Manual checks for reviewer

Responsive behavior – resize the browser or use device emulation to check layout and readability at mobile, tablet, and desktop breakpoints, particularly the hero's second column and the long country dropdown in the contact form.
Keyboard navigation – tab through the page to confirm correct focus order, visible focus indicators, and accessible labels on interactive elements, including the vertical charm-category tabs and the contact modal.
Authenticated states – log in and check any copy that only appears after authentication (not applicable to this page as far as observed).
JS-rendered content – interact with the page to confirm the hero's second column and any dynamic states (form submission success/error) render as expected.
Discourse post (case studies only) – not applicable; this is not a case study page.

Generated by the automated UX QA review tool.

Sophie-32 · 2026-09-15T09:03:25Z

UX review

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

Demo review — charmhub-community-2026-09-15.md

UX demo review: Charmhub community (Juju)

URL: https://canonical-com-2803.demos.haus/juju/charmhub-community
Date: September 15, 2026
Note: The audit could not be completed. See "Unreachable page" below.

Summary

Check	✅ Pass	🔴 Critical	🟡 Needs Work	🔵 Minor	❓ Needs Review	⬜ N/A
UX quality check	–	–	–	–	–	–
Brand & style compliance	–	–	–	–	–	–

Total issues: Not assessed – page unreachable · Needs review: N/A · N/A sections: All (no content available)

Unreachable page

The demo URL returned an HTTP 404 on multiple attempts, including the site root (https://canonical-com-2803.demos.haus/) and with/without a trailing slash on the page path. This indicates the demo environment itself is not currently serving content (likely expired or torn down), not just a broken page path.

Per the skill's edge case guidance, no content was fetched, and no findings have been guessed or fabricated.

Recommended next steps:

Confirm the demo URL is still live – demo environments (demos.haus) are often ephemeral and may expire after the linked PR is merged, closed, or rebuilt.
If the PR is still open, check the PR's demo-link comment for an updated URL, or ask the dev to redeploy the demo.
Re-run this audit once a working demo URL is confirmed.

Design-fidelity context (Figma)

The provided Figma file could not be accessed: the Figma MCP server returned 403 Forbidden – "Token expired" for file VqD7aqJWV2Cm4l8sth9xLv, node 272-4097.

Recommended next steps:

Refresh or reconnect the Figma access token/OAuth session used by the MCP server.
Confirm the file is shared with the account associated with the token, and that the token has File content: Read and Dev resources: Read scopes.
Re-run the design-fidelity comparison once Figma access is restored.

Copy doc context

Copy doc provided for context: https://docs.google.com/document/d/18KE4MzWdRNNe12B-rZXA_22NLg8U6LP2kcV3YTWcHy4/edit?tab=t.0

This was not reviewed against page content, as no page content could be retrieved. Once the demo is reachable, re-run the review so copy can be compared against this doc for consistency.

❓ Needs review

All UX quality and brand/style checks – blocked by the unreachable demo URL.
Design fidelity against Figma – blocked by expired Figma token.

⬜ Not applicable

All checklist sections are marked not assessed – no page content was available to review (see "Unreachable page" above).

✅ What looks good

Not assessed – no page content was available to review.

🔲 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)
Discourse post (case studies only) – confirm that the dev has also created a corresponding Discourse post for the case study
Re-run this audit once the demo URL and Figma token are both confirmed working

Generated by the automated UX QA review tool.

build demo

a49113a

Copilot AI review requested due to automatic review settings July 22, 2026 05:41

Copilot AI reviewed Jul 22, 2026

View reviewed changes

muhammad-ali-pk changed the title ~~build demo~~ feat: Automated UX check demo Jul 22, 2026

muhammad-ali-pk mentioned this pull request Jul 22, 2026

feat: add google docs integration, local figma MCP, and scripts to run project locally canonical/automated-ux-qa-checklist-and-quality-standards#7

Merged

Uh oh!

Conversation

muhammad-ali-pk commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Done

QA

Issue / Card

Screenshots

Uh oh!

webteam-app commented Jul 22, 2026

Demo

Jenkins

demos.haus

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

muhammad-ali-pk commented Jul 22, 2026

UX review

UX content audit report – copy doc

Summary

Issues by page section

Metadata

🔴 Critical

🟡 Needs Work

Hero / Equal height row

🔴 Critical

🟡 Needs Work

🔵 Minor

Tabbed sections (Explore charms on Charmhub)

🟡 Needs Work

CTA section

❓ Needs Review (see below)

❓ Needs review

⬜ Not applicable

✅ What looks good

UX Figma review: Juju — Community and Charmhub

Summary

Check 1: Exact copy match

🔴 Critical — Wording differences

🔴 Critical — Missing from Figma

🟡 Needs Work — Extra in Figma

🔵 Minor — Punctuation / capitalisation / spacing

Check 2: UX quality check

Issues by page section

Header

🔴 Critical

Hero — "Community and Charmhub"

🔴 Critical

🟡 Needs Work

Charmhub hero — "Explore charms on Charmhub"

🔴 Critical

🟡 Needs Work

Tabbed charms directory

🟡 Needs Work

CTA section — "Get started with Juju today"

🔴 Critical

Designer annotations

Check 3: Brand & style compliance

Issues by severity

🟡 Needs Work

🔵 Minor

✅ What looks good

UX demo review: Charmhub community (Juju)

Summary

Issues by page section

Join the community

Explore charms on Charmhub

Get started with Juju today

Brand & style compliance

🔴 Critical

🟡 Needs Work

🔵 Minor

❓ Needs review

⬜ Not applicable

✅ What looks good

🔲 Manual checks for reviewer

Uh oh!

codecov Bot commented Jul 22, 2026

Codecov Report

muhammad-ali-pk commented Jul 22, 2026 •

edited

Loading