AI UI Redesign of a Legacy Hospital Appointment Portal

By Lyxvo · Published November 2, 2026 · 5 min read

An AI UI redesign of a legacy hospital appointment portal starts with understanding what patients actually struggle with, not with picking new colors. This guide walks through a practical process you can follow, from audit to handoff, and shows where an AI design agent can speed up the work.

Why legacy appointment portals need a redesign

Many hospital appointment portals were built years ago around internal departments rather than patient tasks. The result is familiar: patients must know which department to choose, forms repeat the same questions, and error messages are vague. Older layouts also tend to ignore small screens, screen readers and users who are stressed, elderly, or booking for a family member.

A redesign should aim for three things: fewer steps to book, rescheduling and cancelling that are easy to find, and clear language a non-medical person understands.

Step 1: Audit the current portal

Before designing anything, document how the portal works today.

• List every task a patient can complete: book, reschedule, cancel, find a doctor, see prep instructions, pay a deposit, get a reminder.
• Count the clicks and form fields for each task.
• Record every error message and note whether it tells the patient what to do next.
• Check the portal on a phone, a tablet and a desktop browser.
• Run an accessibility check: color contrast, keyboard navigation, labels on form fields, and text scaling.

Interview front-desk staff too. They usually know the top five reasons patients call, and those reasons point to the screens that most need work.

Keep clinical content and data rules owned by your clinical and compliance teams. The redesign changes presentation and flow, not medical logic.

Step 2: Define patient-first flows

Rewrite the main tasks as short patient goals:

1. "I need to see a doctor about a sore knee this week."
2. "I need to move my Tuesday appointment."
3. "I need to know what to bring for my scan."

Each goal becomes one flow. A good booking flow might look like this:

Keep each screen to one decision where possible, and always show a clear way back.

Step 3: Set design rules for healthcare users

Write down a short style guide before generating screens:

• Use large, readable type and support system text scaling.
• Meet WCAG contrast targets for text and buttons.
• Give form fields visible labels, not placeholder-only hints.
• Use plain words: "Cancel appointment" instead of "Withdraw booking."
• Show one primary button per screen.
• Use calm, neutral colors so warnings and urgent notices stand out.
• Never rely on color alone to show status.

Step 4: Generate screens with an AI design agent

This is where an AI design tool helps most. You can use Lyxvo AI's app design tool to plan and design complete screens for iOS, Android and web. For a responsive portal, start in the web UI design generator and produce the same flows at phone and desktop widths.

A practical prompt structure:

• Context: who the patients are and what device they most often use.
• Task: the single flow you want, such as "book a first-time consultation."
• Constraints: accessibility rules, brand colors, and the wording rules from your style guide.
• Output: the screens needed, in order.

Generate one flow at a time. Review each screen against the audit list before moving on. Treat AI output as a first draft: check every label, date format and empty state against real content from your hospital.

Step 5: Design error and empty states

Legacy portals often fail hardest in the edges. Design these deliberately:

• No slots available: explain why, offer the nearest date, and offer a phone number.
• Session timed out: keep the entered data where it is safe to do so, and say so.
• Wrong ID or date of birth: say which field is wrong without revealing sensitive details.
• Network error during booking: confirm whether the appointment was saved before asking the patient to retry.

Write each message as: what happened, what to do now, how to get help.

Step 6: Test with real patients and staff

No generated screen replaces testing. Run short sessions with five to eight people from different age groups and abilities. Give them real tasks, such as rescheduling an appointment, and watch where they hesitate. Also test with a screen reader and with keyboard-only navigation. Record the failures, fix the screens, and test again.

Step 7: Hand off to developers

A good handoff saves months of rework. Deliver:

• Final screens for each breakpoint, with states (default, loading, error, empty).
• Component names and reusable button, field and card styles.
• Color and type tokens with the exact values from your accessibility check.
• Copy deck with every string, so translations and legal review are easy.
• The flow diagram from Step 2.

You can export designs as PNG at real size, or to Figma as SVG and tokens, so your front-end team works from the same source. Where the team builds in code, exports to HTML, Flutter or Kotlin Jetpack Compose can give a starting point for the real implementation, which still needs developer review.

How to do this in Lyxvo AI

To run this redesign in Lyxvo AI, open the web studio and describe your first patient flow using the prompt structure from Step 4. The design agent plans the flow, then designs the screens. Edit text, colors and images directly in the Canva-style editor, and use the component styles you defined to keep every screen consistent. Share the project with your team for real-time collaboration, then export to Figma or as PNG for review. For a larger multi-page build, the Lyxvo Engine is a separate paid option, and every account can try 2 pages free. Check pricing for current plan details, and see the docs for export options.

Checklist before launch

• Every core task takes fewer steps than the legacy version, measured in your own audit.
• All text meets contrast targets and scales with system settings.
• Each error message says what to do next.
• Screen reader and keyboard tests pass.
• Clinical and legal teams have signed off on wording and data rules.
• Developers have tokens, components and a full copy deck.
• A rollback plan exists in case of problems at launch.

A redesign of a legacy appointment portal succeeds when it is built around patient tasks, tested with real users, and handed off cleanly. AI design tools make the drafting faster, but the audit, the accessibility rules and the testing are what make the portal safe and usable.