UI/UX design for a fintech app usually costs $10,000 to $60,000+ in 2026. A simple wallet or MVP sits near $10,000 to $35,000, a neobank or lending app near $20,000 to $50,000, and a trading or multi-product platform at $25,000 to $60,000 or more. Design plus development costs $40,000 to $150,000 for an MVP and $150,000 to $500,000+ for a full platform.

‍

Those ranges come from 2026 pricing guides published by Clutch, Cleveroad, six2eight, Interexy and Saigon Technology. They're agency estimates, so read them as ranges. I've designed digital products for 10 years, and Hatypo Studio has delivered more than 10 fintech projects. Below I show where the money goes and how to plan a budget that holds up.

• US agencies bill $100 to $149 per hour. Southeast Asian studios bill from under $25 to$99.
• KYC onboarding, authentication, compliance and accessibility are the main reasons fintech design costs more than other apps.
• Budget separately for research, testing and design QA, then plan yearly maintenance at 15% to 25% of the build cost.
• At Hatypo Studio, price follows scope. One fintech project cost $6,500 for mobile appdesign, a landing page and a branding package.

The price depends mostly on how complex your app is. I group the published 2026 ranges into 3 tiers.

‍

‍

Sources disagree on full builds. Saigon Technology quotes $60,000 to $150,000 for a neobank MVP. Interexy quotes $350,000 to $900,000+ for a full-stack neobank. The spread comes from scope, team location, and how much compliance work each vendor counts

Hourly rates for similar work run from under $25 to $149 or more, depending on where your team sits. These are agency rates from Clutch's 2026 UX/UI pricing guide and Clutch country listings.

‍

‍

Most UX agencies on Clutch bill $25 to $49 per hour. Clutch puts the average reviewed UX project at $84,973, with a typical timeline of about 10 months and a monthly average of roughly $8,895.

‍

Clutch rate bands are self-reported by agencies. Use them to compare, then ask for a scoped quote.

A freelancer has the lowest hourly rate, and each model covers different risks.

‍

• Freelancer. Upwork reports a median of $27 per hour for UX designers, with most between $25 and $39. One person rarely covers research, UI, design systems and accessibility audits.
• In-house designer. Glassdoor puts the average US UX designer salary at $108,658 per year (about $52 per hour) before benefits, equipment and recruiting.
• Design subscription. Designjoy charges $4,995 per month for one request at a time. It suits steady UI requests more than a regulated product that needs research and compliance review.
• Agency or studio. You pay a higher rate for a team: researcher, product designer, UI designer, and often front-end developers. In fintech, that team usually catches compliance and edge-case problems earlier.

‍

For a first fintech launch, I recommend a studio for the core product design, then an in- house hire once the product has traction.

A fintech app has more states per screen than a typical consumer app, and someone has to design and test each one.

‍

How much do KYC and onboarding flows add?

On our fintech projects, onboarding is usually the single largest flow we design. It's also where you lose the most users.

‍

Signicat's Battle to Onboard research (2022) surveyed 7,600 consumers in 14 European markets. 68% had abandoned a financial services application in the past year, and people gave up after 18 minutes 53 seconds on average. 38% quit because they didn't have the required identity document.

‍

A good onboarding flow needs document capture, liveness checks, failure and retry screens, manual review states, and clear copy explaining why you ask for each item.

‍

Do PCI DSS, PSD2 and data protection laws change design scope?

Yes. Each one adds screens and states.

‍

• PCI DSS v4.0.1. All 51 future-dated requirements became mandatory on March 31, 2025. Payment pages need stricter script control and stronger multi-factor authentication, which affects card entry and login design.
• PSD2 strong customer authentication. In the EU, the European Banking Authority requires 2 of 3 independent factors: knowledge, possession and inherence. You need step-up authentication, biometric prompts and fallbacks.
• GDPR and local laws. Indonesia's Personal Data Protection Law (Law No. 27 of 2022) has been fully in force since October 17, 2024. Consent screens, data-access requests and privacy settings all need design.

‍

Does accessibility add cost?

It adds cost when you leave it until the end. The European Accessibility Act has applied to consumer banking services since June 28, 2025.

‍

WCAG 2.2 adds 9 success criteria, including a 24 by 24 CSS pixel minimum target size and accessible authentication rules. Building contrast, focus states and screen-reader labels into components from day 1 costs far less than fixing a finished app.

‍

What else pushes the price up?

• Number of screens and flows. As a rough guide, a wallet MVP has 30 to 50 screens, and a neobank with cards, transfers, statements and support can pass 150.
• Platforms. iOS, Android and web each need layout work, even with a shared design system.
• Dashboards and data visualization. Trading and wealth apps need charts, alerts, and empty, loading and error states for live data.
• Localization. Currency formats, right-to-left languages and longer translated strings change layouts.
• Design system. Six2eight and Liqteq list enterprise design systems at $40,000 to $80,000. A starter component library costs much less.

Founders most often miss 3 costs: research, design QA and post-launch iteration.

‍

• User research and usability testing. Nielsen Norman Group advises spending a 15-user budget on 3 studies of 5 users each. User Interviews recommends incentives of about $80 per hour for remote moderated consumer studies. With 1-hour sessions, that's about $1,200 in incentives for 3 rounds of 5, before recruiting and moderation time.
• Design QA during development. Designers need time to review builds, answer developer questions and fix gaps. Budget design hours for the whole build.
• Post-launch iteration. Six2eight estimates annual maintenance at 15% to 25% of the build cost. Interexy puts post-launch costs (API fees, audits, hosting, licensing) at $30,000 to $100,000+ per year.

Price one core flow first, then add platforms, markets and upkeep. This is how I walk clients through a budget before we quote.

‍

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 with the 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.

You can save on scope, platforms and team location without touching the parts that protect users.

‍

• Launch 1 product first. Add cards, investing or lending after the core flow works.
• Use a cross-platform UI. One component set for iOS and Android cuts layout work.
• Start with a small design system. Build the core components first and add the rest as the product grows.
• Use your KYC vendor's SDK, styled to your app. Flat Studio reported that bringing verification into the product interface cut drop-off from 48% to 30% on one banking project. That's a single agency case.
• Test small and often. 5 users per round, 3 rounds, costs less than one large study.
• Work with a lower-cost region. A Southeast Asian or Eastern European studio can cut hourly costs by half or more compared with US agencies.

‍

I wouldn't cut security states, error messages, consent screens or accessibility. Regulators check them, and they decide whether a user trusts your app with money.

Our price follows the scope of each project. As one example, a fintech project we delivered cost $6,500 and included mobile app design, a landing page and a branding package.

‍

Hatypo Studio is a UI/UX design studio in Surakarta, Indonesia, founded in 2021. Fintech is our specialty.

‍

That project came in below the $10,000 market floor because of location. Studios in Indonesia, Vietnam and the Philippines list rates from under $25 to $99 per hour on Clutch, against $100 to $149 for US agencies. Larger  copes, such as a full neobank or a trading platform, cost more.

A fintech budget goes furthest when you price one core flow first and keep every screen that protects your users.

‍

Hatypo Studio has delivered 15+ fintech projects since 2021, and we price each one by its scope. The work splits into 3 scopes depending on your stage:

‍

• If you're pre-launch and need a real product to show investors or first users, we design your mobile app, landing page and brand as one package.
• If sign-up loses users at KYC, we redesign your onboarding and verification flow.
• If your product has outgrown its first screens, we design your dashboards and the design system behind them.

‍

Tell us your core flow, your markets and your launch date. Book a consultation, and you'll get a scoped quote from our team.

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.

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 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.

‍

‍

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.

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.

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.

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.

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.

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.

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.

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.

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.

‍

‍

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

‍

‍

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.

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.

Build a custom design system when two or more people ship UI in the same product and keep rebuilding the same components. For most SaaS startups that happens around Series A, or when a second platform arrives. Before then, adopt an existing system. Agencies quote builds from $5,000 to $60,000+, and keeping a system alive takes a team of 2 to 3 people.

‍

This guide draws on Nielsen Norman Group's Design Systems 101, the zeroheight Design Systems Report 2026 (147 practitioners), and the Sparkbox 2022 Design Systems Survey (219 responses). Cost ranges come from agency price guides, which are estimates written by firms that sell design systems.

‍

Adhitya is a Senior UI/UX Designer at Hatypo Studio, a UI/UX design and development studio in Surakarta, Indonesia. Hatypo has delivered 20+ dashboard and SaaS projects since 2021. This guide covers the decisions a SaaS team faces when its interface starts to grow.

• Adopt or adapt an existing system first; Nielsen Norman Group calls adopting the lowest-cost route.
• Build a custom system when more than one person rebuilds the same components, or a second platform or brand arrives.
• Agency price guides put a starter system at $5,000 to $10,000 and a multi-brand system at $25,000 to $60,000+.
• Maintenance is the larger commitment: lack of resourcing is the top challenge for 56% of teams in zeroheight's 2026 data.
• Adoption decides the return: only 7% of systems are fully adopted across all teams.

A design system is a complete set of standards for managing design at scale with reusable components and patterns, according to Nielsen Norman Group. It has 2 parts: a repository of assets and the people who maintain it. A repository nobody maintains goes out of date.

‍

In Sparkbox's 2022 survey, 98% of systems contained typefaces, colors and styles, 95% contained components and 69% had design tokens. A startup version can stop there. Starter packages in Dot2Shape's price guide run 30 to 50 components with basic tokens and a Figma library.

When is it too early?

‍Nielsen Norman Group says a full system rarely pays back on a proof of concept or a prototype that will change, because its benefit is reuse of future design work. If you are still testing whether anyone wants the product, adopt an existing system and put the budget into research.

‍

The same source says systems fit companies that expect years of repeatable design work. Example: a pre-seed product with 8 screens and one designer has little to repeat.

‍

Which signals say it is time?

These are the signals I check first. Each one means the same design decision is being made more than once, by different people or on different screens.

‍

• The same component exists in 3 versions. Audit the product for buttons, tables and form fields. If you find 3 button styles, someone is redesigning a button every sprint.

‍

• A second designer or front-end developer joins. One person can keep a library in their head. Two people need a shared reference, and Nielsen Norman Group says a unified language cuts time lost to miscommunication.

‍

• A second platform or brand arrives. Dark mode, a mobile app or a white-label customer needs theming. In zeroheight's data, 76% of teams use tokens for visual modes such as light and dark, and 63% use them for different brands or products.

‍

• The product passes about 20 screens. One agency guide advises investing early once a product grows beyond 20 screens. Treat that as a rule of thumb.

‍

• UI bugs repeat. Developers fix the same spacing and state issues on different screens. Brad Frost names UI-related bugs as a signal that should fall as a system gets adopted, in a Smashing Magazine interview.

This is the order I use with SaaS teams so the first release stays small and gets used.

‍

1. Audit the live product. Screenshot every screen and group the buttons, inputs, tables and modals. The audit shows how many versions of each component exist and which ones the team uses most.

‍

2. Define tokens first. Tokens are named values for color, type, spacing and radius. The Design Tokens Community Group format reached a stable version (2025.10) in October 2025. It is a community specification and not on the W3C Standards Track. In zeroheight's data, 86% of systems include tokens.

‍

3. Build only the components the next two sprints need. Start with buttons, inputs, selects, tables and modals. Agency starter packages run 30 to 50 components, and I treat that as an upper limit for the first release.

‍

4. Name an owner and a contribution path. One person approves what enters the system, and anyone on the product team can propose a change. In zeroheight's data, 65% of teams already work this way.

‍

5. Write short usage guidance. For each component, state when to use it, when to skip it and what the states look like. Poor documentation was the most common complaint from subscribers in Sparkbox's survey.

‍

6. Review every quarter. Check the 3 numbers from the previous section and remove components nobody uses. Only 16% of teams in Sparkbox's survey tracked metrics, so a quarterly review already puts you ahead.

Nielsen Norman Group describes 3 routes: adopt an existing system, adapt one, or create your own. Cost, time and brand control all rise in that order. Adopting is the lowest-cost route, and the savings from adapting shrink as customizations pile up.

‍

Building your own pays off when your needs cannot be met by an open-source system, per the same article. Check that before you commission a custom build.

‍

A quick test: list your 10 most used components and check which ones an open-source system already covers. If most are covered, adapt that system and spend the budget on the few components that carry your brand. If few are covered, the case for a custom build is stronger.

‍

How much does each option cost?

Published prices vary because agencies scope differently. Dot2Shape puts a starter system at $5,000 to $10,000, a growth system at $10,000 to $25,000 and a multi-brand system at $25,000 to $60,000+. Its timelines run 4 to 6 weeks, 8 to 12 weeks and 12 to 20 weeks.

‍

Other guides disagree. Orbix Studio lists $15,000 to $50,000 in one table, $8,000 to $25,000 over 4 to 10 weeks in another, and $10,000 to $50,000 in its FAQ. Ask every agency which components, tokens, documentation and code the quote includes.

‍

‍Parallel prices design system creation inside an app project at $3,000 to $12,000. It also says building a custom system in Figma adds 20 to 40 hours compared with adapting a component library.

The in-house row doubles Parallel's US first-year cost of $120,000 to $200,000 per designer, which includes recruiting, software and overhead. A developer is extra.

Nielsen Norman Group says creating and maintaining a system is time-intensive and needs a dedicated team, because systems keep evolving with feedback. For larger organizations it suggests at least 1 interaction designer, 1 visual designer and 1 developer.

‍

Real teams are smaller. In zeroheight's data, 28% of design system teams have 1 to 2 people and 33% have 3 to 5. Even so, 61% say they lack enough people, and resourcing is the most common challenge at 56%.

‍

The sample leans large: only 11% of respondents work at companies with 1 to 100 employees. Startup data is thin, so use these numbers for direction.

‍

Adoption is the ongoing cost. Only 7% of teams in zeroheight's data call their system fully adopted across all teams, and satisfaction with leadership buy-in fell from 42% to 32% in a year.

‍

‍Sparkbox's 2022 survey found that 30% of respondents had support, training and onboarding for system users. Among those who called their system successful, 76% did. Budget for training time as well as component work.

‍

For a startup, I would plan for 1 named owner (a designer) plus a developer who builds the code components. Both can be part-time at first, as long as one person decides what enters the system.

‍

What does a first-year budget look like for a Series A team?

Here is an illustration built from the figures above, not a quote. A team with 1 designer and 3 front-end developers picks the growth tier. Dot2Shape's range for that tier is $10,000 to $25,000 over 8 to 12 weeks.

‍

The owner and the developer spend part of their week on handover during those weeks, so count their time as part of the cost.

‍

That one-time spend sits far below the $240,000 to $400,000 for 2 dedicated in-house designers. The comparison leaves out the work after launch: new components, training and the quarterly review.

‍

Ask every agency to include a handover your owner can maintain, and set aside time each sprint for upkeep.

A scale-up must pick a team model. In zeroheight's data, 51% of systems run a centralized team, 31% a hybrid and 13% a federated one.

‍

Staffing complaints differ by model: 53% of centralized teams say they lack people, against 68% of hybrid and 74% of federated teams. Federated teams cite unclear ownership and design system work losing out to feature work.

‍

I would start centralized with 2 to 3 people, then open contributions to product teams once the core components are stable. In the same report, 65% of teams already let anyone on the product team contribute.

Brad Frost points to internal measures: how quickly projects ship, how many UI-related bugs developers field, and how many UI-related issues reach customer support. The bug and support counts should trend down as the system gets adopted.

‍

Few teams measure at all. In zeroheight's report, 31% track speed of development and 5% track ROI. In Sparkbox's survey, 16% tracked any metrics. Pick 3 numbers before you start: time to build a new screen, UI bugs per release, and the share of screens built from system components.

‍

You will see claims that design systems cut design and development costs by 30% to 50%. One agency guide attributes the figure to Forrester and Medium analysis. We could not trace it to a primary study, so measure your own numbers.

Most SaaS teams ask this when the interface starts to grow faster than the team can keep it consistent. Hatypo Studio has delivered 20+ dashboard and SaaS projects since 2021, and projects start at $3,000 with price following scope.

‍

• If you are starting a new product, we design a small token and component set around your first screens, so it grows with the product.
• If your current system is underperforming, we audit the live UI, find the duplicate components and fix the ones that cause the most rework.
• If your product has outgrown its first system, we plan the move to a team model and contribution path that fits your headcount.

‍

Tell us where your product stands and we will tell you whether to adopt, adapt or build. Book a consultation.

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.

• 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.

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.

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.

‍

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.

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.

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.

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.

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.

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.

We use AI for thinking and writing, and keep people on visual decisions. In our October 2026 survey of 11 Hatypo, Habito designers and developers, 9 use AI daily or nearly daily, 8 deliberately keep visual design AI-free, and 10 spend the time they save on deeper research. None reported lower quality. Seven of 11 have no settled rule for when AI stays off.

‍

This article draws on our internal survey (16 responses, 11 in scope), Doshi and Hauser's 2024 Science Advances study of AI and creative writing, Microsoft Research's 2025 CHI survey of 319 knowledge workers, and Figma's 2025 AI report of 2,500 designers and developers.

‍

I'm Raull Khaq, COO at Hatypo Studio, and Art Director at Habito, our branding studio. I oversee daily operations across our teams and ran the survey behind this article. Hatypo has delivered 250+ projects since 2021, so I see how AI use plays out in real project work.

• AI helps most with brainstorming and copywriting, 4 of 11 respondents each.
• Output is a draft: reuse without edits averages 3.1 out of 5, and heavy rework averages 4.0.
• 10 of 11 have seen generic or wrong output, and 5 of them see it often.
• Craft means choosing the concept (9 of 11) and reading the client's context (7 of 11) more often than pixel detail (5 of 11).
• 8 of 11 say whether clients should be told about AI depends on the project.

We sent a Google Form to the designers and developers at Hatypo and Habito between 9 and 12 October 2026. Of 16 responses, 5 came from project managers and account executives, so we counted the other 11: 6 UI/UX designers, 3 brand designers, 1 motion designer and 1 front end developer.

‍

Eleven people is a small sample, so we report counts and skip percentages. The answers are self-reported, and the survey came from management, which can push answers toward the positive. Read the numbers as what our team says about its own work.

‍

Brainstorming, research and copywriting carry most of the AI work. Four respondents named brainstorming as the stage where AI helps most, four named copywriting, and one each named research, wireframing and coding. ChatGPT (10 of 11), Claude (9), Gemini (8) and Figma AI (7) are the tools in use.

‍

Visual design is where respondents most often stop. Eight of 11 said they deliberately avoid AI there, more than any other stage. Illustration and moodboards followed with 3 each.

‍

The open answers repeat the pattern: AI works on questions and words, and people make the visual calls. One designer put it as a rule: anything that needs empathy for the client or user, and all visual exploration, stays human, while AI handles technical tasks.

‍

Figma's 2025 report shows a similar split by role. Of its 2,500 respondents, 59% of developers used AI for core development work such as code generation, against 31% of designers for core design work such as asset generation.

Five of 11 respondents saved 26 to 50% of their working time, four saved 11 to 25%, and two saved more than 50%. Nobody chose the 1 to 10% bracket. In the same Figma report, 78% of respondents agreed that AI significantly improves the efficiency of their work.

‍

The saved time goes mostly into thinking. Ten of 11 spend it on deeper research, five on more iterations and five on rest. Only one respondent uses it to take on more projects.

‍

On our team, saved hours go mostly into understanding the problem.

‍

How often does AI output survive without edits?

Respondents rated how often they use AI output unchanged at 3.1 out of 5 on average (1 is never, 5 is always). They rated how often they rework it heavily at 4.0. Six of 11 gave rework a 4 or 5, and only 3 gave unchanged use a 4 or 5.

In practice AI gives a first version that a person finishes. Final quality still came out higher for 10 of 11 respondents (8 said slightly higher, 2 said much higher), and the eleventh saw no change.

‍

Why does AI output look generic?

Ten of 11 respondents have met generic, wrong or derivative output, and 5 meet it often. Respondents described layouts that start to look alike across projects, with dashboards and wireframes as examples.

A 2024 experiment in Science Advances found the same pattern in writing. Writers who could pick from five AI-generated ideas wrote stories that evaluators rated 8.1% more novel, yet AI-assisted stories were more similar to each other. That suggests the risk sits at portfolio level: each piece looks fine and the set looks alike.

‍

How do we check AI output before it ships?

Ten of 11 respondents check details by hand, 6 compare the output with references, 2 ask a teammate to review it, and 2 test it with a client or user. Peer review is the thinnest of our checks.

A Microsoft Research survey of 319 knowledge workers found that people who trust the AI more apply less critical thinking, while people confident in their own skill apply more. Three of our respondents tied the moments their craft slipped to deadlines, when there was no time to review everything AI produced.

‍

What do our designers and developers mean by craft?

We asked respondents to pick the parts of design they count as craft. Nine of 11 picked concept selection, 7 picked sensitivity to the client's context, 6 picked design decisions, and 5 picked visual detail at the pixel level. The question asked for up to three picks and several people chose more, so read the counts as relative weight.

In their own definitions, people described craft as a good concept, care for the smallest detail, and empathy for the client or user. Craft sits in judgment more than in manual execution, which fits the finding that 8 of 11 let AI work upstream and keep visual execution in human hands.

‍

Has AI lowered our craft, and has it raised it?

Five of 11 respondents said AI never lowered their craft, six said it did once or twice, and nobody said it did often. The reasons were specific: accepting output under deadline, results that felt unoriginal, and a concept the tool could not draw.

Respondents also described gains. They named more time for research, perspectives they had not considered, and visuals that would be hard to make by hand.

Six of 11 say AI helps them learn design skills faster, four see no difference, and one is unsure. Nobody said it slows learning, though the survey asked people to judge their own learning, which is hard to measure from the inside.

‍

What rules keep craft in place?

Four of 11 have a personal rule about when AI is allowed, three are building one, and four have none. The rules differ: no AI for logo design; empathy and visual exploration stay human; execution and the final decision stay with the designer; and AI is acceptable when deadlines are tight or client needs are unreasonable.

The things nobody hands to AI overlap. Three respondents named decision-making and two named logo design. Others named visual exploration, judging a full design from a brief, and what one developer called the soul of the work.

‍

What working rules does the survey support?

1. Use AI upstream and finish by hand. Research, brainstorming and first-draft copy go to AI. A person owns visual execution and the final decision, and 8 of 11 respondents already keep visual design AI-free.
2. Plan for rework. Heavy rework averages 4.0 out of 5, so schedule revision time and do not count AI output as done work.
3. Keep a minimum check under deadline. Every AI output gets a manual detail check and one comparison with references. Ten of 11 respondents already do the first, and 6 do the second.
4. Add a second reviewer on key deliverables. Only 2 of 11 ask a teammate to review AI output, which leaves most checks with the person who made the work.
5. Set one default for telling clients. Eight of 11 say disclosure depends on the project, 2 say always and 1 says it is not needed. Without a default, each project gets a different answer.

If you want to know where a design studio uses AI on your project and where it does not, we can walk you through our process on a call.

‍

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

‍

• If you are starting a new product or website, we design it from research through developer-ready files.
• If your current interface underperforms, we review it and propose a redesign scope.
• If your product has outgrown its first version, we rework the key flows and the design system.

‍

Tell us where you are and we will recommend a scope: Book a consultation.