Fitness Performance Card
The card effectively highlights key fitness metrics with a clear, bold numeric display and an intuitive radar chart for quick attribute comparison. However, the small text and dense layout can hinder readability, and the lack of interactive elements limits user engagement and customization.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast3
Content Readability & Clarity5
Visual Consistency, Imagery & Media2
Navigation & Structure0
Conversion & Actions1
Tone, Friendliness & Delight0
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
1Critical
4Major
12Moderate
4Minor
No Visible Primary Navigation Controls
Critical
Navigation & Structure
The Problem
The screen lacks visible primary navigation elements such as menus, tabs, or buttons that would allow users to move to different sections easily.
Why it Matters
Without apparent primary navigation, users cannot efficiently explore or switch between different views or features, potentially causing abandonment.
How to Fix
Implement a clearly visible primary navigation bar or menu with touch-friendly controls for section switching or app navigation.
Issue Highlights
Unlabeled Large Central Number '560'
Major
Content Readability & Clarity
The Problem
The large number '560' is prominently displayed but lacks a clear label or explanation indicating what this number represents (score, power level, etc.).
Why it Matters
Users may be confused about the meaning or relevance of the large number, which lowers immediate comprehension.
How to Fix
Add a clear label directly above or next to the number that explains what '560' signifies to the user.
Issue Highlights
No obvious interactive elements to proceed
Major
Flow & States Completeness
The Problem
The screen shows a score, stats, and a username but does not provide any visible buttons or prompts for the user to take a next action or continue.
Why it Matters
Users may be confused about what to do next after viewing their score and stats, leading to frustration or drop-off.
How to Fix
Add a clear call-to-action, such as a button to retry, challenge, share, or proceed to another screen.
Issue Highlights
Lack of Clear Navigation Context or Location
Major
Orientation Missing (Environment/Role/Location)
The Problem
The interface does not provide clear indication of the user's current location, role, or environment within the application. There is no visible breadcrumb, header, or active navigation state to orient the user.
Why it Matters
Users may become confused about where they are or what the data relates to, reducing efficiency and increasing cognitive load.
How to Fix
Add clear orientation elements such as a header, breadcrumb trail, or highlighted active navigation state to clarify the user's context within the app.
Issue Highlights
Low Contrast and Illegible Text in Lower Graph Labels
Major
Strategic Design
The Problem
Graph labels 'Str', 'Rel', 'End', and 'Spd' on the radar chart are very faint and difficult to read due to low contrast against the dark background.
Why it Matters
Users may struggle to understand what each axis represents, which hampers the effectiveness of the data visualization and lowers usability for assessing the stats.
How to Fix
Increase the contrast of the radar chart labels by using lighter or brighter colors or adding subtle outlines or shadows to ensure clear readability.
Issue Highlights
Radar chart missing legend or explicit unit context
Moderate
Visual Consistency, Imagery & Media
The Problem
The radar chart showing four attributes (Str, End, Spd, Rel) does not include a legend or any unit description, making it unclear what the numbers or graph points represent.
Why it Matters
Without units or legend, users may not understand the meaning or scale of the chart, reducing usability and interpretability.
How to Fix
Add a legend or label clarifying the units or meaning of the radar chart metrics, and ensure consistent terminology with text labels.
Issue Highlights
Low contrast on 'justfit.app' link text
Moderate
Color & Contrast
The Problem
The bottom-right text 'justfit.app' is displayed in a medium bright yellow on a dark brown background, with contrast likely below WCAG AA requirements for normal text.
Why it Matters
Users with visual impairments may struggle to read links, which affects navigation and interaction.
How to Fix
Use a brighter yellow or white for the text or darken the background behind it to increase contrast.
Issue Highlights
Weak Hierarchy Among Stat Labels and Values
Moderate
Content Readability & Clarity
The Problem
The stat labels (STR, REL, SPD, END) and their numeric values all share a similarly styled font and size, with minimal differentiation or emphasis, making it harder to quickly distinguish labels from values.
Why it Matters
Users must spend more effort to parse the information, slowing down comprehension and making the UI feel cluttered.
How to Fix
Increase visual distinction between labels and values by adjusting font weight, size, or color contrast to create a clearer text hierarchy.
Issue Highlights
Left margin misalignment of user handle text
Moderate
Visual Consistency, Imagery & Media
The Problem
The vertical @powerhouse_j text on the left side is placed closer to the left border than other text elements, causing misalignment with the main content block.
Why it Matters
Misalignment draws unintended visual attention and disrupts the overall balance and readability of the interface.
How to Fix
Adjust the horizontal position of the user handle to align with the left padding margin of the main content area.
Issue Highlights
Unlabeled yellow rectangular progress bar
Moderate
Visual Consistency, Imagery & Media
The Problem
The yellow rectangular bar to the right of the text 'POWERHOUSE' appears to indicate progress or some metric but is unlabeled and lacks an explanation of what it represents or its scale.
Why it Matters
Users may not understand what the bar signifies, leading to confusion and undermining trust in the interface.
How to Fix
Add a label or tooltip explaining the meaning and value represented by the yellow bar.
Issue Highlights
Unlabeled Statistic Value '560' Lacks Context
Moderate
Efficiency & Cognitive Load
The Problem
The large number '560' is displayed prominently but lacks a clear label or explanation of what it represents, requiring users to rely on memory or inference.
Why it Matters
Without clear context, users may be uncertain about the significance of the number, increasing cognitive effort and potential misunderstanding.
How to Fix
Add a descriptive label or tooltip explaining what '560' represents (e.g., 'Total Score' or 'Power Level').
Issue Highlights
Graph Labels Are Abbreviated and Unclear
Moderate
Efficiency & Cognitive Load
The Problem
The radar graph uses brief labels (Str, Rel, Spd, End) which may cause users to hesitate or pause to interpret their meaning without immediate clarity.
Why it Matters
This slows comprehension and adds minor friction as users must decode terminology rather than instantly understanding it.
How to Fix
Use full or clearer labels with tooltips or a legend nearby to help users interpret the graph quickly.
Issue Highlights
Low contrast on vertical handle text @powerhouse_j
Moderate
Color & Contrast
The Problem
The vertical text '@powerhouse_j' on the left uses a light yellow color (#f9d03e approx) on a dark brownish background, resulting in low contrast that may be below WCAG AA standards for normal text.
Why it Matters
Users with low vision or color blindness may have difficulty reading this text, reducing accessibility and usability.
How to Fix
Increase the contrast by using a lighter text color or a darker background behind the vertical text, or add a contrasting outline or shadow to improve legibility.
Issue Highlights
No guidance or explanation for score or stats
Moderate
Flow & States Completeness
The Problem
There is a score and stats breakdown displayed but no explanatory text or hints about how to improve or what these numbers mean exactly.
Why it Matters
Users unfamiliar with the scoring system may not understand the significance of their score or how to interpret or improve it, reducing engagement.
How to Fix
Add a brief description or tooltips explaining the score, stats labels (STR, REL, SPD, END), and next possible actions.
Issue Highlights
Potential Overcrowding of Interactive Elements
Moderate
Navigation & Structure
The Problem
The interface shows multiple small text blocks and chart elements close together without clear spacing or grouping, which could lead to accidental selections or difficulty targeting.
Why it Matters
Users may struggle to select the intended control or data point, leading to user errors and frustration.
How to Fix
Increase spacing and visual grouping between interactive elements to improve tap target size and reduce accidental clicks.
Issue Highlights
Missing trust or reassurance near score submission
Moderate
Tone, Friendliness & Delight
The Problem
The interface prominently displays a score and stats but lacks any trust signals or confirmation messages reassuring users about score accuracy, privacy, or data handling.
Why it Matters
Without clear trust signals, users may hesitate to engage fully, fearing their data or effort might not be handled properly or reflected accurately.
How to Fix
Add a brief note or icon assuring data privacy, accuracy, or steps users can trust relating to score submission and display.
Issue Highlights
Lack of Visual Emphasis or Unique Branding in Main Score Area
Moderate
Strategic Design
The Problem
The central score '560' and the label 'POWERHOUSE' appear visually flat and lack distinctive styling or branding elements that would make the main metric memorable or clearly differentiated.
Why it Matters
Without strong visual emphasis, users may not immediately recognize or remember the key score or its significance, reducing the impact of this primary information.
How to Fix
Enhance the score and label with bolder typography, distinctive color contrasts, or unique iconography to create a memorable and brand-aligned focal point.
Issue Highlights
Inconsistent capitalization in attribute labels
Minor
Visual Consistency, Imagery & Media
The Problem
The attribute labels around the graph are lowercase (str, end, spe, rel), while the corresponding attribute labels in the text list to the right (STR, REL, SPD, END) are uppercase.
Why it Matters
Inconsistent capitalization can confuse users and reduce the perceived polish and professionalism of the UI.
How to Fix
Standardize capitalization for all attribute labels, choosing either all uppercase or all lowercase within the component.
Issue Highlights
Different font weights used in attribute labels and values
Minor
Visual Consistency, Imagery & Media
The Problem
The attribute labels on the right side are in a lighter font weight, while the numeric values are bold. The small spider chart labels are thin and less visible, leading to inconsistent typographic emphasis.
Why it Matters
Inconsistent font weights reduce clarity and cohesiveness of the presentation and can distract users.
How to Fix
Maintain consistent font weight styling for corresponding labels and values in the same component set.
Issue Highlights
Small Footer Text 'Can you beat 560?' and URL
Minor
Content Readability & Clarity
The Problem
The footer text and URL in the bottom corners are very small and may be difficult for users to read comfortably.
Why it Matters
Important prompts or secondary information may be missed if users struggle to read small text, reducing engagement.
How to Fix
Increase the font size of footer text and ensure sufficient contrast for better readability.
Issue Highlights
Redundant Small Stat Numbers Add Visual Clutter
Minor
Efficiency & Cognitive Load
The Problem
The four small numbers (145) are repeated in different categories without additional differentiation or explanation, contributing to unnecessary visual detail.
Why it Matters
The repetition may distract users and reduce focus on the main data without adding meaningful insight.
How to Fix
Consider consolidating or simplifying the presentation of these stats to highlight key differences or remove redundant values.
Issue Highlights