← All projects
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
NVW / NEW VENTURE WEALTH
Your super.
A clearer future.
clarity. trust. confidence.
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.

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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.
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.
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.
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.
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.
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.
07 / 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.
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 / H148 px size / 64 px line height / 48 px paragraph spacing.
Heading / H240 px size / 52 px line height / 32 px paragraph spacing.
Heading / H332 px size / 44 px line height / 28 px paragraph spacing.
Heading / H4–H6Responsive variables extend hierarchy to smaller content groups.
Body / Large–Extra smallResponsive 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

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.
Design Token Applier: token browser, typography controls and component insertion.
The plugin in the Figma workflow alongside the website design.
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
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.

NEXT PROJECTMelo