Patient Appointment Details
The design effectively uses clear sectioning with concise labels and icons, making it easy to scan appointment and patient information quickly. However, the interface could improve accessibility by increasing contrast for important alerts and enhancing the visibility of actionable buttons for better user interaction.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast2
Content Readability & Clarity4
Visual Consistency, Imagery & Media1
Navigation & Structure1
Conversion & Actions3
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
5Major
13Moderate
7Minor
Low contrast on disabled text 'Mark session as complete'
Major
Color & Contrast
The Problem
The text 'Mark session as complete' appears in a gray color that contrasts insufficiently against the white background, likely below WCAG AA ratio of 4.5:1 for regular text.
Why it Matters
Users with visual impairments or in bright environments may struggle to read the disabled text, affecting usability and comprehension.
How to Fix
Increase the contrast by using a darker shade of gray for the disabled text or a subtle background to boost contrast to meet WCAG AA standards.
Issue Highlights
Appointment time lacks timezone
Major
Ambiguous Date/Time/Timezone
The Problem
The appointment time is shown as 'Wed, 8 Dec 2025 at 9:00 am' but no timezone is provided, which could cause confusion for remote users or any scheduling across time zones.
Why it Matters
Without a timezone, users may misunderstand the exact appointment time, leading to missed or late attendance.
How to Fix
Include the timezone abbreviation or offset alongside the appointment time to clarify when the appointment occurs.
Issue Highlights
Disabled primary action lacks clarity and feedback
Major
Conversion & Actions
The Problem
The 'Mark session as complete' button is disabled and styled in a way that makes it unclear to users why it is disabled or what is needed to enable it.
Why it Matters
Users may be confused about how to complete the session, leading to frustration or abandonment of the task.
How to Fix
Provide a clear label or tooltip explaining why the button is disabled and what steps the user must take to enable it. Consider enabling the button with inline validation or guidance.
Issue Highlights
Missing reassurance around allergy information
Major
Tone, Friendliness & Delight
The Problem
The allergy information 'Is allergic to Ibuprofin' is displayed in red text but lacks any additional context or reassurance about whether this has been acknowledged, flagged for safety, or whether any alternatives are suggested.
Why it Matters
Users may feel uncertain about whether the allergy information is being properly handled, which could reduce trust in the service and cause safety concerns.
How to Fix
Add a clear acknowledgment or confirmation message near the allergy info, explaining any actions taken to address the allergy and provide guidance or warnings throughout the user flow.
Issue Highlights
Patient allergy alert lacks visual emphasis
Major
Strategic Design
The Problem
The alert for John's allergy to Ibuprofen is displayed in plain red text without additional visual cues such as icons or highlighted backgrounds, making it less noticeable in the order header section.
Why it Matters
Critical patient allergy information needs to be immediately obvious to prevent medication errors and ensure safe care delivery.
How to Fix
Add a prominent icon (e.g., a warning or alert symbol) and use a contrasting background or border color to draw attention to the allergy notice.
Issue Highlights
Inconsistent button styles in action steps section
Moderate
Visual Consistency, Imagery & Media
The Problem
The 'Add patient information' button uses a filled style with an outline and icon, while 'Mark session as complete' uses a disabled or ghost style with a different icon style, causing inconsistency in the visual presentation of related action buttons.
Why it Matters
Inconsistent button styles can confuse users about which actions are primary, secondary, or disabled, increasing cognitive load.
How to Fix
Standardize the style of action buttons within the same group for consistent visuals, using either all filled or all ghost style but differentiating states clearly.
Issue Highlights
Page lacks clear user role or environment context
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
While the page shows order and patient information, there is no explicit indication of the user’s role (e.g., clinician, admin) or environment context beyond this single order view.
Why it Matters
Users may be uncertain about their current functional scope or environment, which could reduce efficiency and cause confusion when navigating between patient orders and other workflow areas.
How to Fix
Include visible role or environment indicators (such as a title bar, user role label, or breadcrumb path) to clarify the context of the current screen.
Issue Highlights
Separate patient information addition and session completion steps
Moderate
Efficiency & Cognitive Load
The Problem
The user must complete two distinct steps: 'Add patient information' and then 'Mark session as complete.' These sequential micro-steps might increase task friction.
Why it Matters
Forcing users to separately add patient info before marking completion extends task time and may cause confusion about process flow.
How to Fix
Combine the patient information input and session completion into a single streamlined step or clearly explain the required sequence.
Issue Highlights
Disabled 'Mark session as complete' action lacks explanation or activation cue
Moderate
Flow & States Completeness
The Problem
The 'Mark session as complete' button is disabled with no visible explanation or guidance on how to enable it next.
Why it Matters
Users may be confused about why they cannot complete the session or what steps remain, which may impede workflow and cause frustration.
How to Fix
Add a tooltip or message explaining why the button is disabled and what user action is required to enable it. Alternatively, enable it automatically once preceding steps are completed.
Issue Highlights
Low contrast of 'Client is diabetic' booking note text
Moderate
Color & Contrast
The Problem
The booking note text 'Client is diabetic' uses a medium gray on a light gray background, likely providing insufficient contrast below recommended WCAG AA levels.
Why it Matters
Moderate contrast can make the text harder to read for users with moderately impaired vision or in low-light conditions.
How to Fix
Increase text color darkness or lighten background, ensuring contrast meets or exceeds WCAG AA 4.5:1 ratio for body text.
Issue Highlights
Insufficient distinction for secondary statuses under titles
Moderate
Content Readability & Clarity
The Problem
Text like 'Is allergic to Ibuprofin' under the patient name and 'Client is diabetic' under Booking note uses a faint red or gray color that competes visually with primary labels but does not stand out as a distinct status or warning clearly.
Why it Matters
Users may overlook or misunderstand these important health notes if they are not visually emphasized as warnings or critical info.
How to Fix
Use stronger contrast or distinctive visual styling (bold, color coding, or icons) to clearly differentiate alert or status texts from normal labels.
Issue Highlights
Tabs in Patient data section are not visually aligned or spaced evenly
Moderate
Visual Consistency, Imagery & Media
The Problem
The tabs labelled 'Records', 'Vitals', 'Meds', and 'Other' appear to have inconsistent spacing and alignment under the section title 'Patient data'. The indicator line under 'Records' may not be perfectly centered relative to the tab text.
Why it Matters
Misaligned tabs reduce UI clarity and make navigation feel less polished, impacting user trust in the app quality.
How to Fix
Adjust tab padding and spacing so all tabs align horizontally with equal spacing and consistent baseline. Center the active indicator under the tab text precisely.
Issue Highlights
Small tap targets on 'View details' links in Services booked
Moderate
Accessibility & Input Ergonomics
The Problem
'View details' links appear as small inline text without additional padding, likely smaller than recommended 44x44pt touch target size.
Why it Matters
Small tap targets are harder for users to accurately tap, increasing frustration and error rates.
How to Fix
Increase padding around 'View details' links to meet or exceed 44x44pt target size recommendations or make the entire service row clickable.
Issue Highlights
User must recall past services without details visible
Moderate
Efficiency & Cognitive Load
The Problem
The 'Past services' section lists abbreviated service names with a '+3 more' link, requiring users to remember or click to see full details.
Why it Matters
Users have to rely on memory or take additional actions to know full past services, increasing cognitive load and reducing efficiency.
How to Fix
Show more past services directly or provide inline previews to reduce memory reliance and unnecessary clicks.
Issue Highlights
Allergy warning color tone feels severe but no follow-up reassurance
Moderate
Tone, Friendliness & Delight
The Problem
The allergy text is in red, which is a strong alert color, but the interface does not balance this severity with reassuring or guiding text to soften user anxiety.
Why it Matters
The severe color draws attention but could induce anxiety if no positive or calming follow-up tone is present, negatively impacting user comfort.
How to Fix
Include a supportive message or icon that tempers the severity with reassurance, for example, 'Allergy noted and actions taken' or similar comforting language.
Issue Highlights
Booking note 'Client is diabetic' lacks trust signals or risk info
Moderate
Tone, Friendliness & Delight
The Problem
The booking note that the client is diabetic is stated plainly with no indication of how this impacts treatment, safety measures, or what actions have been taken.
Why it Matters
Users need clear communication about how sensitive health conditions are managed to build trust and reduce confusion or concern.
How to Fix
Add clarifying language that indicates diabetes has been considered for the booking and any necessary adaptations have been made.
Issue Highlights
Tight vertical spacing between patient data list items
Moderate
Accessibility & Input Ergonomics
The Problem
The three patient data items ('Forms', 'Notes', 'SOAP notes') have small vertical spacing between them that might cause accidental taps on the wrong item.
Why it Matters
Targets that are placed too closely increase risk of user tapping the wrong element, impacting usability and efficiency.
How to Fix
Increase vertical spacing between these tap targets to at least 8-10pt separation.
Issue Highlights
Disabled 'Mark session as complete' button lacks clarity
Moderate
Strategic Design
The Problem
The 'Mark session as complete' button is disabled and visually muted, but it is not clear why it is disabled or how to enable it, as it is placed immediately below an active step with no explanation.
Why it Matters
Users may be confused about the next step needed to complete the session, leading to potential frustration or incomplete workflows.
How to Fix
Provide a tooltip, helper text, or visual cue explaining the disabled state and what action is required to activate the button.
Issue Highlights
Non-interactive label styling on disabled 'Mark session as complete' button
Minor
Accessibility & Input Ergonomics
The Problem
The disabled 'Mark session as complete' button is styled with muted text and no apparent UI affordance like border or background, making it appear non-interactive.
Why it Matters
Users may be confused or unsure if the element is a disabled button or just a label, possibly missing important actions.
How to Fix
Provide a visually clear affordance for the disabled state, e.g., consistent button shape even when disabled.
Issue Highlights
Misalignment in text content inside Services booked container
Minor
Visual Consistency, Imagery & Media
The Problem
The left-aligned service titles and right-aligned 'View details' links are spaced unevenly vertically, making the edges look visually off-grid within the container.
Why it Matters
Improper alignment reduces visual harmony, which can distract users and reduce perceived UI quality.
How to Fix
Align service titles and links along a consistent baseline grid and adjust spacing to create a balanced left and right edge flow.
Issue Highlights
Multiple adjacent interactive links clutter services booked section
Minor
Navigation & Structure
The Problem
The 'Services booked' section lists multiple services with each having a 'View details' link right next to the service name, creating visually dense clickable targets.
Why it Matters
Users may find it difficult to tap the correct link on small screens, which can reduce efficiency and increase error rates.
How to Fix
Group service names and links more distinctly or consider using expandable sections or buttons to reduce clutter and improve tap target clarity.
Issue Highlights
Subtext under patient data cards may be too small
Minor
Content Readability & Clarity
The Problem
Subtext such as 'Last submitted today', 'Last submitted yesterday', and 'Last submitted 12 Aug, 2025' appear smaller than main text and may be challenging to read comfortably on smaller mobile screens.
Why it Matters
Smaller subtext can reduce readability and clarity, especially for users with visual impairments or in bright environments.
How to Fix
Increase the font size slightly for subtext to improve legibility while maintaining hierarchy.
Issue Highlights
Unclear meaning of icons in Complete the following steps and Booking note
Minor
Visual Consistency, Imagery & Media
The Problem
Icons next to 'Add patient information' and the booking note use a document-style icon with additional marks (+, check) which are not immediately clear about their specific meaning or status.
Why it Matters
Ambiguous icons without labels can increase cognitive load and lead to misunderstanding of the UI actions or information status.
How to Fix
Add tooltips, labels, or more intuitive icon variations that clearly convey the action or note status.
Issue Highlights
Multiple redundant patient data sections increase clutter
Minor
Efficiency & Cognitive Load
The Problem
Patient data is split into several tabs (Records, Vitals, Meds, Other) with multiple items (Forms, Notes, SOAP notes) shown under the Records tab, which may overwhelm users visually.
Why it Matters
Excessive visual elements and sections increase cognitive load and make it harder for users to quickly find key information.
How to Fix
Combine related patient data items or allow customization to show/hide less relevant details to reduce visual clutter.
Issue Highlights
Past services summary lacks detail or actionable options
Minor
Flow & States Completeness
The Problem
The 'Past services' section shows a brief summary ('Hangover relief, Semaglutide +3 more') with no option to view details or further interact with the data.
Why it Matters
Users may want to review past services in more detail but have no clear way to do so from this screen, which limits usability.
How to Fix
Provide a 'View all' link or button to allow users to see a full history of past services.
Issue Highlights