Desktop hero crop
CTA and value proposition split across separate visual groups.
◢ SAMPLE REPORT
Sample UI/UX audit report.
A realistic preview of the UXTally output: score summary, evidence-backed priorities, before/after recommendations, and handoff material a product team can ship from.
See this quality on your own URL.
Generate a saved report with scores, evidence, priority fixes, before/after guidance, and implementation exports.
01
Score summary
Every report separates the overall decision from the category-level signals that explain where the experience is strong, weak, or risky.
68
Overall
Good enough to understand, not yet strong enough to trust as a paid conversion surface without a targeted repair pass.
UI74
UX68
Accessibility61
Mobile66
Trust70
Conversion64
Design system58
See this quality on your own URL.
Generate a saved report with scores, evidence, priority fixes, before/after guidance, and implementation exports.
02
Top 5 priority fixes
Recommendations are ranked by likely user impact, implementation clarity, and evidence quality.
- High conversion impact
Make the first viewport explain the product outcome faster.
The sample hero uses three competing text groups before the primary action, so the outcome and next step compete for attention.
Lead with the customer outcome, keep one primary action visible, and move secondary proof into a compact row below the CTA. - High UX impact
Replace vague CTA copy with an action tied to the buying intent.
Primary and secondary buttons use generic verbs that do not say whether the user will start a trial, view pricing, or generate a report.
Use one primary action such as Generate my report and one secondary action such as View sample report. - Accessibility risk
Improve contrast and focus states for forms and secondary actions.
Muted teal and gray controls sit close to the background color, and focus treatment is not visible enough on keyboard navigation.
Raise contrast for text and borders, add a 2px visible focus ring, and test controls at mobile and desktop breakpoints. - Design-system impact
Consolidate repeated spacing and color values into semantic tokens.
The reviewed sample has several near-identical teals, grays, and spacing values that make components feel related but not consistent.
Map repeated values to action, surface, border, muted text, warning, and spacing tokens before expanding the page set. - Trust and conversion impact
Move trust proof closer to the decision point.
Support, refund, security, or delivery expectations are not visible near the form and checkout decision area.
Add concise, verifiable trust copy near the CTA: secure checkout, saved report access, support contact, and refund-policy link.
03
Evidence-style screenshots
Real reports attach captured screenshots and bounded crops. This public sample uses neutral visual blocks so no client names, logos, or private URLs are shown.
Mobile form crop
Input label and supporting note wrap before the action is visible.
Token sample
Seven near-matching surface and border values found in one flow.
04
Before and after recommendations
The report translates findings into concrete design direction instead of stopping at critique.
Hero message
Before
A broad product headline, two support paragraphs, and multiple equal-weight actions.
After
One outcome-led headline, one sentence of context, one primary CTA, and one proof row.
Primary CTA
Before
Learn more
After
Generate my report
Mobile layout
Before
Cards collapse after the proof content, leaving the action below the first scroll.
After
Action stays directly below the value proposition; proof becomes a two-row compact list.
05
Developer handoff preview
A generated report includes implementation notes, acceptance criteria, and export snippets for design-system cleanup.
Repair landing-page clarity and form accessibility
- Update hero copy and CTA labels in the public landing route.
- Create shared Button focus styles for primary, secondary, and text-link variants.
- Replace local spacing values with semantic layout tokens.
- Verify 390px, 768px, 1280px, and 1440px viewports before release.
CSS variables
:root {
--color-action: #007a7a;
--color-action-strong: #005f61;
--color-surface-raised: #ffffff;
--color-border-subtle: #dfe5df;
--space-section-y: clamp(56px, 8vw, 112px);
}
.button-primary {
background: var(--color-action-strong);
color: var(--color-surface-raised);
outline-offset: 3px;
}Theme extension
export const theme = {
colors: {
action: "var(--color-action)",
"action-strong": "var(--color-action-strong)",
surface: "var(--color-surface-raised)",
border: "var(--color-border-subtle)",
},
spacing: {
section: "var(--space-section-y)",
},
};Ready to review your own site?
Generate a saved report with scores, evidence, priority fixes, before/after guidance, and implementation exports.