# Personal Finance Website Design: Receipts to Plans Source: https://www.jvds.cn/en/share/ui-design/nuvance-plan-feature-clarity-u068 Language: en Published: 2026-10-15 Author: JVDS Design Studio Personal finance pages need to answer what a product helps people handle and which plan provides those capabilities. Nuvance carries white backgrounds, deep-blue type and bright-blue buttons across feature and pricing pages. The revealing sequence is receipt example, plan overview, detailed comparison and contact form. Each supplies a position for concrete use, quick selection, checking details and further conversation. ## Key takeaways - Receipt amounts, dates and download actions make broad product claims into recognizable tasks. - Three plan cards establish price steps, with aligned comparison rows below showing entitlement differences. - A white form beside a dark call card gives two contact methods distinct visual positions. ## A receipt card gives a feature a visible object Large introductory type presents AI tools above Receipt management as a specific example. Number 001, feature name and explanation form the first layer, then a receipt card nests inside. Its 47.58 amount is largest, followed by a date and Download Receipt after a divider. The hierarchy breaks an abstract capability into object, record information and executable action. A pale-gray feature container and brighter white receipt form two boundaries, separating introduction from an in-product record. The download text is pale and appears auxiliary; if this is the capability readers should understand most, color and icon could be clearer. Security and AI-effect claims belong to product copy; the receipt example demonstrates interface presentation without verifying those promises. ![Receipt example in a pale-gray feature card with amount, date and download text](https://www.jvds.cn/upload/2026/1008/d187-tp/u068-i1.webp) Number, feature explanation and receipt sample form three reading levels, from concept to task. ## The blue recommendation needs detailed comparison Starter, Plus and Premium sit side by side, with Free, 9.99 and 19.99 establishing scannable price steps. Plus is filled blue and slightly raised, its button reversed to white; the neighboring white cards have blue buttons. This creates a focus while all three start buttons retain a similar form. Compare plans below keeps the same three-column order and groups Essentials, Import & Convenience and Advanced. Quantities 10, 25 and Unlimited, checkmarks and Not included align in rows for closer reading. Stable comparison positions avoid searching three cards for the same feature. Copy still needs checking: Categorized transactions repeats in Starter, while Plus and Premium summaries use Pro and Basic, conflicting with the three headings. These create conceptual gaps within clear visual groups. Recommendation color directs attention; consistent [entitlement names](https://www.jvds.cn/en/share/website-design/saas-pricing-page-design-407) explain differences. ![Three plan cards with a grouped three-column feature comparison below](https://www.jvds.cn/upload/2026/1008/d187-tp/u068-i2.webp) Overview and comparison keep the same plan order; color and rows serve different reading tasks. ## The contact area offers two tempos for continuing Another overview combines team portraits, work scenes and contact. Names and roles sit below portraits, while an account card overlays a scene, attempting to connect product and service team. These are introduction visuals; photographs and sample figures are not evidence of customer outcomes. The left [contact area](https://www.jvds.cn/en/share/website-design/enterprise-contact-page-form-conversion) is a white fine-line form, with name and email fields in two columns and Message spanning one row. A large deep-blue gradient card on the right says Let’s have a call and Book a call. Differences in size and background distinguish asynchronous messages from appointments. Actual pages still need required-field indications and post-submission or booking next steps to turn the visual choice into a complete communication process. ![Contact form beside a dark call booking card near team content](https://www.jvds.cn/upload/2026/1008/d187-tp/u068-i3.webp) Message and appointment use different containers for different levels of communication readiness. ## Frequently asked questions ### Do pricing cards still need features when there is a comparison below? Yes, with separate roles. Cards retain a few capabilities that summarize the plan’s purpose, while comparison covers quantities, support and detailed permissions. Keep names and plan order consistent without unexplained new plan names. ## Design review checklist - Connect a claim to at least one concrete record or task and check its object and action. - Align plan names, inherited entitlements and comparison rows; remove repeated feature text. - Check feedback after both messages and bookings, plus required-field wording. ## Connect product use to reasons for choosing For a personal finance or SaaS website, organize feature examples, plan differences and contact routes before deciding how strongly to emphasize the recommendation card. JVDS provides UI/UX design and website design and development, helping organize the content and interfaces of these pages. [Contact JVDS to discuss your project](https://www.jvds.cn/contact)