Last updated:
October 2026
·
0
min read

Fintech Onboarding UX: How to Earn Trust in the First 60 Seconds

Product Design
Business
Found this useful? Share it forward

Fintech Onboarding UX: How to Earn Trust in the First 60 Seconds

Fintech onboarding earns trust in the first 60 seconds by showing proof before it asks for data. Show what the product does and costs, who runs it and which regulator oversees it, then ask for the least data you can, explain each request, and finish with a first real result. In Signicat's 2022 survey, 68% of European consumers had abandoned a financial application.

‍

This guide draws on Signicat's 2022 Battle to Onboard survey as reported by FinTech Global and Payment Expert, Nielsen Norman Group's research on trustworthy design and progressive disclosure, Baymard Institute's 2025 checkout study, and Gitte Lindgaard's 50-millisecond first-impression study as reported by Nature.

Why does fintech onboarding UX come down to the first minute?

People judge a screen before they read it. Carleton University researcher Gitte Lindgaard and her team found that visual appeal can be assessed in 50 milliseconds, and those quick verdicts matched ratings given after longer viewing.

‍

That study measured visual appeal, not trust. It does show how little time a first screen gets, and money raises the stakes. In Signicat's 2022 survey of 7,600 European consumers, 68% had abandoned a financial application in 2021, up from 63% in 2020.

‍

The reasons were split. Time needed, the amount of personal data requested, and people changing their minds each drew 21%. Two of those three are decisions a design team controls. Separately, 92% of respondents said they worry about how providers use their data.

‍

The 60 seconds in the title is a working frame, not a measured cutoff. We use it to sort onboarding into 4 questions a new user answers in order: what is this, who is behind it, what will it ask of me, and what do I get? The sections below follow that order.

What should users see before they hand over any data?

Nielsen Norman Group's trust research names 4 factors people use to judge a site: design quality, upfront disclosure, comprehensive and current content, and connection to the rest of the web. Its later study found users still weigh the same 4 that Jakob Nielsen listed in 1999.NN/g also reports that asking for personal information before people can explore degrades trust. For a fintech app, that rules out a signup wall as the first screen. Let people see the product, the pricing and the rules first.

The first screens should answer 3 questions before any form field appears:

  • What does it do and what does it cost? One line on the product, and fees visible without an account. NN/g observed that sites missing basic information were quickly dropped from consideration.
  • Who runs it and who regulates it? Show the legal entity name, the regulator and the license number, linked to the regulator's public register where one exists.
  • How do I reach a person? Show a support channel and a stated response time without scrolling.

‍

NN/g notes that typos and broken links quickly degrade credibility. A screen that handles money has less room for them, so fix them before launch.

How do you ask for personal data and ID without losing people?

Every field asks for trust. In Signicat's survey, 38% of respondents abandoned an application because they lacked the right identity documents, and 21% left over the volume of personal data requested.

‍

Three habits cut those exits:

  • Ask for each item at the step that needs it. NN/g's progressive disclosure defers advanced features until they matter. Applied to data, that means email first, name next, and ID only when verification starts.
  • Say what's needed before the step starts. "You'll need a passport or national ID and about 3 minutes" lets people get the document before they begin.
  • Put the reason beside the field. One sentence is enough: "We check your ID to confirm it's you. Financial accounts require it.

‍

Payment and ID capture need extra care. Baymard's 2025 checkout study found that 19% of 1,026 US respondents had abandoned a checkout in the previous 3 months because they didn't trust the site with their card details. Testers felt less secure when card fields looked like every other field.

‍

That is e-commerce data, so it gives a directional signal for fintech. Card linking and ID capture are the same moment in a fintech flow. Give those fields their own container, a lock icon and one line on how the data is stored.

What does the first 60 seconds look like, step by step?

The 5 steps below turn the 4 questions into screens. The time windows are design targets for the trust decision. Full identity verification can run longer, and that's fine once the user has a reason to continue.

‍

  1. 0 to 10 seconds: say what this is. The first screen has one line describing the product, one primary action and a link to fees. It asks for nothing yet. A new user should be able to repeat the offer to a friend after reading it once.
  2. 10 to 20 seconds: show who is behind it. Put the legal entity name, regulator and license number on the welcome screen or one tap from it. Add a support channel. These are the 3 facts a cautious user looks for before typing anything.
  3. 20 to 40 seconds: ask for the least you can. Start with a phone number or email and a verification code. Place the reason for each field beside it, and show where the user is in the flow, for example "Step 1 of 3".
  4. 40 to 50 seconds: preview the verification step. Before the ID or selfie screen, say which document is needed, how long the check takes and what happens to the image afterwards. Where regulation permits, let the user see a preview of the account first.
  5. 50 to 60 seconds: give a first real result. Show something concrete: a confirmed account, a quoted rate, a sample dashboard populated with the user's own name. End with the next step and a time estimate.

Which trust signals backfire?

A trust signal works when the user can check it and the product can back it up. These 5 fail that test.

‍

  • Badges with no source. A "bank-grade security" icon that links nowhere gives a cautious user nothing to verify. Link each badge to the certificate, register or policy behind it.
  • Social proof nobody can confirm. A line like "Trusted by 1M users" needs a date and a source. If finance can't confirm the number, remove the line.
  • Jargon in security copy. "256-bit encryption" means little to most users. Say what it protects, for example "Your ID image is encrypted and deleted after verification," and write only what the product does. Engineering and compliance should confirm each claim.
  • Early gates. NN/g reports that asking for personal information before users can explore degrades trust. A required account before the user sees any rate is the common case.
  • Vague errors. A failed ID check is a trust moment. Say what failed, offer a retry, and give a route to a human.

How do you measure trust in onboarding?

Trust has no single metric. Put a funnel event on every screen in the 5 steps, then read the drop-off at each one against that step's job. Signicat's 3 abandonment reasons (time, data volume, changed mind) give you hypotheses to test first.

‍

  1. Define one core flow. For a wallet, that's sign-up, KYC, top-up and send.
  2. List your regulators and markets. EU users mean PSD2 and the EAA. Card data means PCI DSS. Indonesian users mean UU PDP and OJK rules.
  3. Count screens and states. Include errors, empty states and review states along withthe happy path.
  4. Pick a team model and region. Multiply estimated hours by the rate from the table above.
  5. Add a budget line for research, testing and design QA. Plan yearly upkeep separately; Six2eight estimates it at 15% to 25% of the build cost.

‍

Step Metric to track How to read it
1. First screen Tap-through on the primary action A low rate points to an unclear offer.
2. Who is behind it Taps on the license and support links A high rate means users want proof. Move it earlier.
3. First data request Completion rate and field-level drop-off Exits on one field mean it lacks a reason or comes too early.
4. Verification preview Drop-off before the ID screen and on it Exits on the screen itself suggest missing documents or doubts about data use.
5. First result Time to first useful result and first-week return rate A low return rate means the first result wasn't concrete enough.

‍

Pair the numbers with moderated sessions on the first 3 screens. Ask new users to say what the product is, who runs it and what it will ask for next. Teammates know the answers, so recruit people who have never seen the product.

Want a second look at your fintech onboarding flow?

Onboarding is where a new fintech product wins or loses its first users.Hatypo Studio has delivered 15+ fintech projects since 2021, and projects start at $3,000 with the price following the scope.

‍

  • If you're building a new fintech app, we design the first-run flow from welcome screen to first result before development starts.
  • If your onboarding loses users on a specific step, we review the funnel and redesign that step.
  • If your product has outgrown its first version, we redesign the flow across web and mobile.


‍

Tell us where your users drop off and we'll suggest where to start: Book a consultation.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Type image caption here (optional)

Authors :

Nurul Fitriani
UI Designer
FAQs
Frequently Asked Questions
[ 01 ]
What is the most important trust signal in fintech onboarding?
Visible proof of who runs the product: legal entity, regulator and license number, shown before any data request. NN/g reports that asking for personal information before users can explore degrades trust.
[ 02 ]
When should a fintech app ask for ID?
At the step that needs it, after the user has seen the product and read the reason. Tell them beforehand which document is required and how long the check takes.
[ 03 ]
Why do users abandon fintech onboarding?
Signicat's 2022 survey found 68% of European consumers had abandoned a financial application. Time needed, volume of personal data and changing their minds each accounted for 21% of reasons.
[ 04 ]
How do you measure trust in onboarding?
Track drop-off on every screen, taps on license and support links, and first-week return rate. Confirm the numbers with moderated sessions where new users explain what the product is and who runs it.
Next Insight

read more

Corporate Website Redesign: A Guide for Established Companies
Yunus Ersyah
October 29, 2026
·
0
min read

Corporate Website Redesign: A Guide for Established Companies

A corporate website redesign works when it starts from what buyers, partners, candidates and investors need to do on the site, and ends with a migration that keeps your search traffic intact. For most established companies that means auditing existing content first, mapping every old URL to a new one, and meeting Core Web Vitals and WCAG 2.2 Level AA before launch.

‍

This guide draws on Gartner's B2B buying research, Nielsen Norman Group's content audit method, Google Search Central's site move documentation, web.dev's Core Web Vitals thresholds, the 2025 Web Almanac and the W3C's WCAG 2.2 guidance, plus patterns from Hatypo's corporate projects.

‍

My name is Yunus Ersyah and I am a UI/UX Designer at Hatypo Studio. Hatypo has worked on 100+ corporate client projects since 2021 across property, engineering, manufacturing and other industries. I designed the page structure and interfaces for these sites, and this guide covers the planning and design decisions that repeat across Hatypo’s corporate projects.

When does an established company need a corporate website redesign?

A redesign pays off when the site no longer matches how the company sells, hires or reports. Four triggers come up most often in corporate work:

‍

  • The business changed. A merger, a new division or a move into new markets leaves the navigation describing a company that no longer exists.
  • Sales conversations start with corrections. When reps spend the first meeting explaining what the site gets wrong, the site is costing credibility before anyone has spoken.
  • The site misses the technical baseline. Slow pages, broken mobile layouts and inaccessible forms show up in Search Console and in complaints.
  • Nobody can update it. If a text change needs a developer ticket, content goes stale and stays that way.

‍

One trigger justifies an audit. The audit then decides whether the answer is a full rebuild or a focused refresh of the pages that matter.

What should a corporate website achieve?

A corporate site serves several audiences at once, and each arrives with a different job to do. Gartner's research describes B2B buyers looping back through each of six buying jobs at least once, with stakeholders using the supplier's website at various points along the way.

‍

Set one primary goal per audience before design starts. Across our corporate projects, five audiences cover most briefs:

‍

  • Buyers and procurement teams need capabilities, certifications, project references and a clear way to request a quote.
  • Investors and partners need leadership names, company history and figures they can verify.
  • Candidates need open roles and a realistic view of working at the company.
  • Existing clients need fast routes to support, documents and named contacts.
  • Press and regulators need one place for official statements, reports and contact details.

‍

Each goal needs a measure: quote requests, application starts, document downloads. Without one, the redesign gets judged on taste in the review meeting.

‍

Gartner also found that buyers who use a supplier's digital tools together with a sales rep are 1.8 times more likely to complete a high-quality deal than buyers who use them alone. Put a named contact or inquiry route on every page that supports a buying decision.

How do you plan a corporate website redesign?

Planning shapes the outcome. Four steps come first.

‍

  1. Audit content before designing. NN/g defines a content inventory as a list of every piece of digital content and an audit as the quality assessment of that list, and recommends doing both. Mark each page keep, update or remove, and give every update an owner.
  2. Name one decision owner. Corporate sites collect opinions from legal, HR, sales and leadership. One person with the authority to settle disputes keeps the schedule intact.
  3. Structure navigation around visitor tasks. Group pages under the jobs visitors came to do: find services, see projects, check credentials, apply for a role. Visitors outside the company often don't know its division names.
  4. Settle migration scope after the audit. Content that gets rewritten or cut changes the timeline and the budget. Decide it before design starts, with the keep, update and remove list in hand.

What do corporate sites need in property, engineering and manufacturing?

The core structure repeats across industries. The proof content changes. This table lists what visitors in three sectors we work with check first, and the page to build around it.

‍

Industry What visitors check first Page to build around it
Property Completed and ongoing projects, location, developer track record Project pages with status, specifications and an inquiry form
Engineering Capabilities, certifications, safety record, comparable projects Capability and project reference pages with scope, client sector and outcome
Manufacturing Product range, technical specifications, quality certifications, capacity A product or capability catalog with downloadable spec sheets

‍

Other sectors follow the same pattern. Find the evidence a buyer needs to shortlist you, then give it its own page.

How do you protect search traffic during migration?

A redesign that changes URLs can lose visibility if old addresses stop resolving. Google's site move guidance lists the controls.

‍

  • Map every old URL to a new one. Start with the pages that earn traffic and links, pull the full list from the CMS and server logs, and include images, PDFs and videos.
  • Use permanent server-side redirects. Google recommends 301 or 308 redirects and advises against long chains. Sending many old pages to the homepage can be treated as a soft 404.
  • Change one thing at a time. Google advises against switching domain, CMS and design in the same release.
  • Keep redirects for at least a year. Google says to keep them as long as possible, ideally 1 year or more.
  • Remove staging blocks before launch. Take out any noindex rules and robots.txt blocks used during development.
  • Monitor after launch. Watch Search Console for crawl errors and indexing changes. Rankings can fluctuate temporarily, and Google says a small to medium site typically needs a few weeks to move most pages.

What performance and accessibility targets should a corporate site meet?

Two published standards give a redesign testable targets. web.dev sets good Core Web Vitals at a Largest Contentful Paint of 2.5 seconds or less, an Interaction to Next Paint of 200 milliseconds or less and a Cumulative Layout Shift of 0.1 or less, measured at the 75th percentile of page loads.

‍

The 2025 Web Almanac found 48% of mobile sites and 56% of desktop sites passed all three, using July 2025 data. Test the homepage and the top landing pages from Search Console. Home pages passed less often than secondary pages in the Almanac (45% against 56% on mobile).

‍

On accessibility, WCAG 2.2 became a W3C Recommendation on 5 October 2023 and adds 9 success criteria to WCAG 2.1. Two Level AA additions affect corporate layouts directly: pointer targets of at least 24 by 24 CSS pixels, and keyboard focus that sticky banners or cookie bars never fully hide.

How do you run a corporate website after launch?

Corporate sites go stale when ownership is unclear. NN/g notes that content audits are ongoing work and tend to fail when they are added on top of someone's existing duties.

‍

  • Assign a content owner per section. Services, projects, careers and news each get one named person who approves changes.
  • Set CMS roles. Editors change copy, approvers publish and only developers touch templates, so a text edit never waits for a ticket.
  • Schedule reviews. Review project pages and certifications every 6 months, and watch the Core Web Vitals report in Search Console for regressions.
  • Report against the planning goals. Track quote requests, applications and document downloads monthly, compared with the baseline taken before launch.

Planning a healthtech product that has to be accessible and compliant?

A redesign works best when the audit, the page structure and the migration plan exist before the first screen is drawn.

‍

Hatypo has worked on 100+ corporate projects since 2021 across property, engineering, manufacturing and other industries, and projects start at $3,000 with the price following the scope.

‍

  • If you are planning a new corporate site, we plan the page structure and content with you, then design and build it.
  • If your current site underperforms, we audit it and fix the pages and flows that cost you inquiries.
  • If the company has outgrown its first site, we restructure it around current services and audiences and plan the migration so search traffic holds.

‍

Tell us which stage you're at and we'll scope it together: Book a consultation.

Webflow vs Framer for SaaS Marketing Sites in 2026
Oryza Sativa
October 29, 2026
·
0
min read

Webflow vs Framer for SaaS Marketing Sites in 2026

By Oryza Sativa, Front End Developer at Hatypo Studio · Last updated: October 2026 · 8 min read · Websites · Development · Strategy

‍

For most SaaS marketing sites in 2026, Webflow Premium fits content-heavy sites and Framer Pro fits design-led sites with a smaller library. Webflow Premium costs $25 a month billed yearly and holds 20,000 CMS items. Framer Pro costs $30 a month billed yearly and holds 2,500 CMS items, extendable to 40,000 with paid add-ons. Neither platform exports a full working site.

‍

Prices and limits come from Webflow's and Framer's own pricing pages, read in October 2026, plus Webflow's May 2026 plan announcement. Performance thresholds come from Google's web.dev and the 2025 HTTP Archive Web Almanac. Third-party trackers fill gaps, and the article names them when it uses them.

‍

I'm Oryza Sativa, a Front End Developer at Hatypo Studio. Hatypo has delivered 20+ dashboard and SaaS projects since 2021 and builds client websites in both Webflow and Framer. This comparison covers what a developer meets after the design is signed off: limits, code, performance, and hand-off.

Key takeaways

  • Webflow merged its CMS and Business plans into Premium on May 13, 2026, and the plan now carries 20,000 CMS items instead of 2,000.
  • Framer Pro's 2,500-item cap is the limit a content-heavy SaaS site hits first, and each extra 10,000 items costs $20 a month.
  • At list price, one designer plus two content editors costs about $55 a month on Webflow and $50 on Framer, before add-ons.
  • Webflow exports HTML and CSS without CMS content, and Framer exports nothing, so treat either choice as long-term.
  • A/B testing starts at $299 a month on Webflow and costs $50 per 500,000 events on Framer, so price experiments before you commit.

What changed in Webflow and Framer pricing in 2026?

Webflow rebuilt its Site plans on May 13, 2026. The old CMS and Business plans became one Premium plan at $25 a month billed yearly, or $39 billed monthly. CMS items rose to 20,000, and the CMS item add-ons disappeared.

‍

Existing sites move at their next renewal on or after June 29, 2026. Sites in Freelancer or Agency workspaces, and sites on legacy discounts from 2022 or earlier, move on or after November 16, 2026. Business-plan sites should check bandwidth: Premium includes 50 GB, where Business included 100 GB.

‍

Framer's own pricing page now lists Free, Basic at $10, Pro at $30 and a custom Enterprise plan. Cost trackers recorded the $100 Scale plan leaving the lineup on June 16, 2026, so older comparisons may list a plan that no longer exists.

‍

‍

Framer also changed editor pricing in May 2026. Extra editors now cost $20 a month on both Basic and Pro, and CMS-only content editors cost $10, with viewers free.

How does Webflow vs Framer pricing compare for a SaaS marketing site?

The table compares Webflow Premium and Framer Pro, the plcans a SaaS marketing site with a blog, integration pages and a changelog would buy. All prices are list prices in USD with yearly billing unless noted, read from each vendor's pricing page in October 2026.

‍

Item Webflow Premium Framer Pro
First screen $25/mo yearly, $39/mo monthly $ $30/mo yearly
CMS items 20,000 2,500 (40,000 with add-ons)
CMS collections 40 10 (40 with add-ons)
Static pages 300 150 (700 with add-ons)
Included bandwidth 50 GB (up to 2.5 TB with paid add-ons) 100 GB (up to 2 TB with add-ons)
Extra seats Full $39/mo, Limited $15/mo Editor $20/mo, content editor $10/mo
Localization From $9/mo (up to 3 locales), from $29/mo (up to 10) $20/mo per locale (up to 20)
A/B testing Optimize from $299/mo (25,000 page views) Convert $50 per 500,000 events
Code export HTML and CSS on a paid Workspace plan (from $19/mo), no CMS content None

Sources: Webflow pricing, Framer pricing.

‍

For a small team, the seat arithmetic decides the monthly bill. One designer plus two content editors costs $55 a month on Webflow ($25 plus two Limited seats at $15) and $50 on Framer ($30 plus two content editors at $10). Both figures exclude add-ons and tax.

‍

Experiments and languages move the total more than seats do. A/B testing on Webflow starts at $299 a month, billed by page views, and Framer's Convert add-on costs $50 per 500,000 events. Each added language costs $20 a month on Framer, while Webflow Localize starts at $9 and scales with locales.

Which platform fits a SaaS site's CMS volume?

Take an example site with 150 blog posts, 80 integration pages, 60 changelog entries and 30 comparison pages. That is 320 CMS items, well inside Framer Pro's 2,500 and Webflow Premium's 20,000. The platforms separate when the content plan grows toward thousands of generated pages.

‍

Framer Pro stops at 2,500 items and 10 collections. Past that, add-ons cost $20 per 10,000 items and $40 per 10 collections, capped at 40,000 items and 40 collections. Beyond the cap, limits are negotiated on Enterprise.

‍

Webflow Premium carries 20,000 items and 40 collections, and no item add-ons exist anymore. Unpublished drafts still count toward the cap, according to one Webflow agency's 2026 guide, and a full plan blocks new items rather than edits.

‍

A site that plans programmatic pages, such as one landing page per integration, per use case or per city, should start on Webflow or budget Framer add-ons from day one. A site that publishes a few hundred items will not meet either limit.

How do Webflow and Framer compare on performance and SEO?

A site that plans programmatic pages, such as one landing page per integration, per use case or per city, should start on Webflow or budget Framer add-ons from day one. A site that publishes a few hundred items will not meet either limit.

‍

The 2025 Web Almanac, using July 2025 field data, found 48% of mobile sites and 56% of desktop sites passing all three. A platform sets the starting point, and what each site adds on top decides the result.

‍

Each vendor publishes its own claims, and you should test them on your own build. Framer describes traffic-aware pre-rendering, static generation and edge image conversion to WebP and AVIF. Webflow describes AWS hosting behind a Cloudflare CDN and says it reaches 95% of the world in under 50 milliseconds.

‍

On SaaS sites the risk often arrives after launch. Google's web.dev says tag managers can take bandwidth and main-thread time, and it has seen a correlation between tag manager size and poorer INP scores. Analytics, chat widgets and consent banners need a script budget on either platform.

‍

Both cover the technical basics. Webflow lists custom meta tags, canonical tags, an automatic XML sitemap, robots.txt and llms.txt controls, schema markup support and per-item indexing for CMS content. Framer lists built-in SEO, sitemaps, clean metadata and llms.txt, with redirects on Pro.

Which platform is easier for marketers to edit after launch?

Webflow separates design seats from content seats. Full seats cost $39 a month, and Limited seats cost $15 for editing content or building pages with components. The Team plan costs $2,500 a month on an annual contract and adds publishing workflows, single-page publishing and 5 full seats.

‍

Framer charges $20 a month for each additional editor and $10 for content editors who only touch the CMS, localization and on-page editing. Both paid plans cap edit seats at 10. Pro adds a staging environment and branching with previews.

‍

Branching matters for a marketing site that ships weekly. Framer includes it on Pro, and Webflow's pricing page lists branch staging and publishing workflows under the Team plan.

Which should a SaaS team choose in 2026?

My recommendation: start a SaaS marketing site on Webflow Premium when it will publish more than 2,500 CMS items, needs more than 150 static pages, or will move to a governed team setup. The ceiling is 20,000 items, and the Team plan is the next step up.

‍

Choose Framer Pro when the site stays under about 2,500 items, a designer owns the build, and the team wants branching and low-cost content-editor seats. At $30 a month with 10 collections, it fits a launch site, a changelog and a blog.

‍

Whichever you pick, run three checks before launch. Price the add-ons you will need in year one. Test Core Web Vitals on a staging build with every third-party script installed. Write down who owns the site if the platform changes its pricing again.

Need help choosing or building a SaaS marketing site?

Choosing between Webflow and Framer gets easier after a short review of your content plan, your editing team and your third-party scripts.

‍

Hatypo has delivered 20+ dashboard and SaaS projects since 2021, and projects start at $3,000 with the price following the scope.

‍

  • If you are launching a new SaaS site, we design it and build it in Webflow or Framer to match your content plan.
  • If your current site is slow or converts poorly, we audit the build and fix what the audit finds.
  • If your site has outgrown its first version, we plan the move to the platform that fits the next stage.

‍

Tell us where the site stands today and we will recommend a platform: Book a consultation.

Healthtech UX Design: Accessibility, Compliance and Trust
Adhitya Laksana
October 29, 2026
·
0
min read

Healthtech UX Design: Accessibility, Compliance and Trust

Healthtech UX works when accessibility, compliance and trust are designed as one system from the first wireframe. In practice that means building to WCAG 2.2 Level AA, which includes the 2.1 AA standard HHS requires of federally funded providers from May 2027, treating health data as a protected category under HIPAA and GDPR, and telling users plainly where their data goes.

‍

This guide draws on the W3C's WCAG 2.2 documentation, the HHS Section 504 interim final rule, GDPR Article 7 and Article 9, the FTC Health Breach Notification Rule, the FDA's human factors guidance, and a 2019 JAMA Network Open study of health app data sharing.

‍

I'm Adhitya, a Senior UI/UX Designer at Hatypo Studio, where our team has delivered 10+ healthtech projects since 2021. This guide covers three questions every healthtech interface has to answer: who can use it, what rules apply to it, and why a patient should trust it with their data.

What does accessibility mean in healthtech UX?

The WHO estimates that 1.3 billion people, 16% of the world's population, experience significant disability. In healthtech, one inaccessible screen can stop someone from booking a visit, reading a result or refilling a prescription.

‍

The current standard is WCAG 2.2, which the W3C published on October 5, 2023. It adds 9 success criteria to 2.1 and retires 4.1.1 Parsing. The six new Level A and AA criteria all change how health screens get designed:

‍

  • Target Size, Minimum (2.5.8, AA). Pointer targets need at least 24 by 24 CSS pixels, or enough spacing around them (W3C). Check dose steppers, time-slot chips and close buttons first.
  • Accessible Authentication, Minimum (3.3.8, AA). Login can't depend on memorizing or transcribing something unless an alternative exists (W3C). Allow paste, support password managers and WebAuthn passkeys, and let one-time codes autofill.
  • Redundant Entry (3.3.7, A). Don't ask for details the patient already gave in the same process. An intake form that repeats date of birth on step 4 fails.
  • Dragging Movements (2.5.7, AA). Any control operated by dragging, such as a pain-scale slider, needs a single-tap alternative.
  • Focus Not Obscured, Minimum (2.4.11, AA). A sticky header or cookie banner can't fully cover the element that has keyboard focus.
  • Consistent Help (3.2.6, A). Put help, such as a nurse line or chat link, in the same place on every page.

‍

In the US, HHS's Office for Civil Rights pushed its Section 504 deadlines back one year in an interim final rule effective May 7, 2026. Recipients with 15 or more employees must meet WCAG 2.1 Level AA for web content and mobile apps by May 11, 2027. Smaller recipients have until May 10, 2028.

‍

Design to 2.2 AA from the start. It keeps every 2.1 criterion except the obsolete Parsing one, so it covers the HHS standard without a second pass.

Which regulations shape a healthtech interface?

Which rules apply depends on who holds the data, what the product does, and where its users live. The table lists the ones that most often change what a screen looks like, with the design consequence of each.

‍

Rule Who it applies to What changes on screen
HIPAA Security Rule Covered entities (providers, plans, clearinghouses) and business associates Role-based access, user authentication, audit trails, secured transmission
FTC Health Breach Notification Rule Health apps and similar products outside HIPAA Breach-notice flows; unauthorized data sharing counts as a breach
HHS Section 504 rule Recipients of HHS funding WCAG 2.1 AA for web and mobile apps by May 2027 or May 2028
GDPR Articles 7 and 9 Organizations processing personal data of people in the EU Separate, explicit consent screens; withdrawal as easy as opt-in
FDA human factors guidance and IEC 62366-1 Makers of medical devices, including some software Use-related risk analysis and usability validation with representative users

‍

HIPAA covers providers, plans, clearinghouses and their business associates. A consumer app outside that group can still fall under the FTC rule, which since its 2024 amendments names health apps not covered by HIPAA and treats an unauthorized disclosure as a breach. Consumer notices must name the third parties that received the data.

‍

HHS has proposed a Security Rule overhaul that would require encryption, multifactor authentication and network segmentation. Fierce Healthcare reported in July 2026 that the target for a final rule slipped to July 2027. Design the MFA flow now and treat the final text as pending.

‍

Under GDPR Article 9, health data is a special category, and processing it needs a lawful exception such as explicit consent. Explicit consent means an express statement for a specific purpose, so pre-ticked boxes and bundled terms checkboxes fail. Article 7 adds that withdrawing consent must be as easy as giving it.

‍

If your software counts as a medical device, the FDA expects a human factors process: analyze use-related risks, then validate with representative users in realistic conditions. IEC 62366-1 is the international standard for the same process.

How do you design for trust in healthtech?

Trust starts with what the product does with data. A 2019 JAMA Network Open study by Huckvale, Torous and Larsen tested 36 top-ranked depression and smoking-cessation apps. Of those, 33 sent data to third parties, 29 sent it to Google or Facebook, and only 25 had a privacy policy.

‍

Users can't anticipate sharing that the interface never mentions. Six practices address it:

‍

  1. State the reason at the field. Put a one-line purpose beside each sensitive input, such as "We use your date of birth to match your records." A link to a policy page asks the user to leave the task.
  2. Audit third-party scripts. List every analytics, advertising and session-replay script on logged-in pages. Remove any whose purpose and legal basis you can't name.
  3. Separate consent from terms. Give each purpose one choice and no pre-ticked box. GDPR requires this for health data, and a single-purpose screen is also easier to understand.
  4. Make leaving as easy as joining. Put consent withdrawal and account deletion in settings, within the same number of taps as the original opt-in.
  5. Write at the reader's level. Use plain language, define clinical terms and spell out units. Healthy People 2030 defines organizational health literacy as the degree to which organizations enable people to find, understand and use information for health decisions.
  6. Show who stands behind the content. Name clinical reviewers, date medical content and keep a contact route on every page, which also supports WCAG's Consistent Help criterion.

How do you build compliance into the design process?

Compliance checks cost the least at the stage where the decision is made.

‍

  1. Map the data before drawing screens. List every field, who sees it, where it is stored and which rule applies. Designers and legal share this data map, and every later screen refers back to it.
  2. Annotate accessibility in the design file. Add contrast ratios, target sizes, focus order and screen reader labels to each component, so developers receive the criteria together with the design.
  3. Design the consent and failure states first. Consent, session timeout, lockout, failed login and error screens carry compliance duties and usually get designed last.
  4. Test with the users who struggle most. Recruit people who use screen readers, have low vision or limited motor control, and have low health literacy. For regulated devices, run the FDA-style validation with representative users.
  5. Keep an evidence file. GDPR Article 7 requires you to be able to show that consent was given, so log the consent text version and a timestamp with each choice. Store audit reports and test notes beside it.
  6. Re-audit every release. Rules and deadlines keep moving: HHS extended its Section 504 dates in May 2026, and the HIPAA Security Rule target slipped to July 2027. Add an accessibility check to each release.

Planning a healthtech product that has to be accessible and compliant?

Healthtech screens carry accessibility, privacy and safety duties at the same time, and the design work moves faster when those constraints enter at the wireframe stage.

‍

Hatypo Studio has delivered 10+ healthtech projects and 20+ dashboard and SaaS projects since 2021; projects start at $3,000 and the price follows the scope.

‍

  • If you're starting a new healthtech product, we design the screens, flows and consent patterns around WCAG 2.2 AA from the first wireframe.
  • If your existing portal or app loses patients at login or intake, we audit those flows against WCAG 2.2 and redesign the steps that fail.
  • If your product has outgrown its first version, we rebuild the design system so every component carries its accessibility and consent rules.

‍

Tell us which stage you're at and we'll scope it together: Book a consultation.

[ 01 ]
Work with us
Close

lets

partner

up!

Still have any questions?
Book a Call
Book a Call
[ 01 ]
Please check at least one checkbox
[ 02 ]
[ 03 ]
[ 04 ]
[ 05 ]
Please check at least one checkbox
[ 06 ]
By submitting, you accept our Privacy Policy
Still have any questions?
Book a Call
Book a Call
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.