# New Venture Wealth — Digital Experience > Website experience for financial services and SMSF, designed to communicate complex information clearly. Canonical case study: https://uditha.design/projects/nvw.html Created by Uditha Prabhasha Dharmarathna. This page summarises the published case study; claims about testing and outcomes are limited to those stated in the original. CASE STUDY 05 / Financial services · UX/UI · Design systems ## Clarity and confidence for the SMSF journey. NVW — New Venture Wealth. A reassuring website experience supported by a scalable design system and a custom Figma workflow tool. **Project:** New Venture Wealth **Platform:** Website **My role:** UX/UI & design system **Tooling:** Figma · React · TypeScript 01 / PROJECT OVERVIEW ### Making super feel less overwhelming. New Venture Wealth is an SMSF management platform for Australians seeking clarity and confidence in their super. The website simplifies complex services and guides visitors towards expert consultation and onboarding. **THE CHALLENGE** Explain information-dense financial services while building the trust people need before taking the next step. **THE DESIGN DIRECTION** Clear language, progressive information, calm interactions and a supportive consultation pathway. 02 / CONTENT & CONVERSION ### Guide people from uncertainty to action. The journey moves from a clear value proposition to service explanations, social proof, differentiators and answers to common questions. A free consultation is the primary action; newsletter engagement offers a lower-commitment option. #### From awareness to action. Scenario: an Australian visitor exploring SMSF support and deciding whether to contact a specialist. - 01Awareness ##### Find a starting point **User action:** Arrive through search, a campaign or referral. **User question:** Is this relevant to my super? **Anticipated concern:** Unsure where to begin. **Design response:** A clear hero message and a visible consultation route. **Touchpoint:** Hero · navigation - 02Exploration ##### Understand the services **User action:** Scan the service cards and compare their relevance. **User question:** Which service fits my needs? **Anticipated concern:** Financial language can feel complex. **Design response:** Plain-language explanations with a clear content hierarchy. **Touchpoint:** Our Services - 03Trust building ##### Evaluate the provider **User action:** Review feedback and reasons to choose NVW. **User question:** Can I feel confident in this provider? **Anticipated concern:** Credibility needs reassurance. **Design response:** Place feedback and differentiators near the decision. **Touchpoint:** Feedback · Why Choose Us - 04Decision support ##### Resolve the questions **User action:** Read FAQs or look for specialist support. **User question:** What about cost, setup and compliance? **Anticipated concern:** Unanswered questions can delay action. **Design response:** Concise FAQs and an easy route to ask for guidance. **Touchpoint:** FAQ · contact options - 05Action ##### Choose the next step **User action:** Book a free consultation or contact a specialist. **User question:** How do I get started without pressure? **Anticipated concern:** Not every visitor is ready to enquire. **Design response:** Prioritise consultation; offer newsletter engagement as an alternative. **Touchpoint:** Consultation · newsletter · footer Proposed journey based on the design justification. Questions and concerns are design assumptions to validate through user testing. 03 / DESIGN ### A closer look at the design. Each section has a clear purpose: explain the offer, build confidence and help visitors choose their next step. 01 / LANDING #### Landing A clear value proposition introduces SMSF support, with separate paths for a new consultation and switching an existing fund. Navigation and contact details stay easy to find. ![New Venture Wealth Landing section from the Figma design.](https://uditha.design/assets/nvw/landing-final.webp) 02 / OUR SERVICES #### Our Services Five consistent cards explain accounting, crypto, property, equities and gold. Short descriptions and clear links help visitors identify the service relevant to them. ![New Venture Wealth Our Services section from the Figma design.](https://uditha.design/assets/nvw/services.png) 03 / CUSTOMER FEEDBACK #### Customer Feedback A dedicated feedback section brings reassurance into the browsing journey. Testimonial cards pair each message with a name and date to make the content easy to scan. ![New Venture Wealth Customer Feedback section from the Figma design.](https://uditha.design/assets/nvw/feedback.png) 04 / WHY CHOOSE US #### Why Choose Us A varied card layout explains the platform’s benefits through account connections, reporting, forecasting, investment management and specialist support. ![New Venture Wealth Why Choose Us section from the Figma design.](https://uditha.design/assets/nvw/why-choose-us.webp) 05 / FREQUENTLY ASKED QUESTIONS #### Frequently Asked Questions Common questions sit beside a direct contact option. The accordion layout keeps the page concise while letting visitors explore the details they need. ![New Venture Wealth Frequently Asked Questions section from the Figma design.](https://uditha.design/assets/nvw/faq.png) 06 / NEWSLETTER #### Newsletter A simple email subscription offers a lighter next step for visitors who want to learn more before contacting a specialist. ![New Venture Wealth Newsletter section from the Figma design.](https://uditha.design/assets/nvw/newsletter.webp) 07 / FOOTER #### Footer Grouped links, contact details and a final consultation action give visitors a practical way to continue after reaching the bottom of the page. ![New Venture Wealth Footer section from the Figma design.](https://uditha.design/assets/nvw/footer.png) 04 / DESIGN SYSTEM ### A system that grows with the product. Local variables drive colour, typography, spacing and interaction states. Brand tokens define raw values; alias tokens give them semantic meaning; mapped tokens define their use in text, actions, borders and surfaces. COLOUR VARIABLES #### Semantic palette examples Primary / 50 Primary / 100 Primary / 200 Primary / 300 Primary / 400 Primary / 500 Primary / 600 Primary / 700 Green aliases connect to the Brand collection. Swatches reproduce the supplied variable reference. TYPOGRAPHY VARIABLES #### Type styles **Heading / H1**48 px size / 64 px line height / 48 px paragraph spacing. **Heading / H2**40 px size / 52 px line height / 32 px paragraph spacing. **Heading / H3**32 px size / 44 px line height / 28 px paragraph spacing. **Heading / H4–H6**Responsive variables extend hierarchy to smaller content groups. **Body / Large–Extra small**Responsive paragraph roles keep supporting text consistent across layouts. CORE COMPONENTS #### Reusable UI building blocks ##### Button & link Shared actions guide visitors between service information, floor plans and contact. ##### Navigation Consistent page links help visitors move between the main content areas. ##### Card Reusable content groups organise service and plan information. ##### Form & FAQ Shared fields and expandable answers support enquiry and clarification. [Open design system in Figma](https://www.figma.com/design/Xdh1B65UAf2PZKNAomtrNH/Claryzo?node-id=173-6801) 05 / WORKFLOW TOOLING ### Bringing the tokens into the workflow. A custom Figma Design Token Applier removes repetitive variable lookups and manual value copying. Built with React and TypeScript, it provides a searchable browser for 100+ tokens across 13 groups, one-click fill and stroke application, typography tokens and a component inserter. ![Design Token Applier: token browser, typography controls and component insertion.](https://uditha.design/assets/nvw/image4.webp) Design Token Applier: token browser, typography controls and component insertion. ![The plugin in the Figma workflow alongside the website design.](https://uditha.design/assets/nvw/image2.webp) The plugin in the Figma workflow alongside the website design. Token values come from the exported Brand_tokens.json file. The component tab scans the Components page and surfaces the core UI library. [Read the plugin development story](https://www.linkedin.com/pulse/i-built-figma-plugin-tonight-uiux-designer-coding-uditha-prabhasha-tdi4c/) 06 / OUTCOME & REFLECTION ### Trust, clarity and scalability. The final design brings together a reassuring consultation journey, consistent interface components and a maintainable token system. The plugin extends the system into everyday design work, reducing manual lookup and application steps. This case study documents the design rationale and workflow outcome. Conversion and usability performance have not been quantified in the supplied project material.