Solar Fintech Calculator | Design Challenge

UI/UX

Product Design

Fintech Energy

As part of a design challenge for a venture-backed fintech initiative, I was tasked with creating native iOS app screens for a solar system calculator and quote summary. The goal was to help customers understand the financial impact of installing a solar system — from upfront costs to long-term savings — and guide them confidently through their decision-making process.

Client

Design Challenge

Tool

Figma,Apple Human Interface Guidelines

Year

~4 days

Role

Product Designer

Fintech

Fintech

Fintech

Fintech

(Context)

©2025

01
Brief

Design a summary and calculator flow for a new fintech solar marketplace. The experience should help users understand their costs and savings, and serve as a foundation for applying or comparing solar system providers.

01
Brief

Design a summary and calculator flow for a new fintech solar marketplace. The experience should help users understand their costs and savings, and serve as a foundation for applying or comparing solar system providers.

01
Brief

Design a summary and calculator flow for a new fintech solar marketplace. The experience should help users understand their costs and savings, and serve as a foundation for applying or comparing solar system providers.

01
Brief

Design a summary and calculator flow for a new fintech solar marketplace. The experience should help users understand their costs and savings, and serve as a foundation for applying or comparing solar system providers.

02
Goal

Build user trust through transparent financial breakdowns Make solar investment outcomes easy to understand and compare Encourage next-step actions like quote download, email, or application submission Support both upfront payment and loan financing flows

02
Goal

Build user trust through transparent financial breakdowns Make solar investment outcomes easy to understand and compare Encourage next-step actions like quote download, email, or application submission Support both upfront payment and loan financing flows

02
Goal

Build user trust through transparent financial breakdowns Make solar investment outcomes easy to understand and compare Encourage next-step actions like quote download, email, or application submission Support both upfront payment and loan financing flows

02
Goal

Build user trust through transparent financial breakdowns Make solar investment outcomes easy to understand and compare Encourage next-step actions like quote download, email, or application submission Support both upfront payment and loan financing flows

03
Success Metrics

📊 50% reduction in time spent on session creation through bulk editing & duplication. 📊 Improved session tracking, allowing admins to quickly identify low-enrolment sessions. 📊 Better attendee management, with centralised tracking across all subjects.

03
Success Metrics

📊 50% reduction in time spent on session creation through bulk editing & duplication. 📊 Improved session tracking, allowing admins to quickly identify low-enrolment sessions. 📊 Better attendee management, with centralised tracking across all subjects.

03
Success Metrics

📊 50% reduction in time spent on session creation through bulk editing & duplication. 📊 Improved session tracking, allowing admins to quickly identify low-enrolment sessions. 📊 Better attendee management, with centralised tracking across all subjects.

03
Success Metrics

📊 50% reduction in time spent on session creation through bulk editing & duplication. 📊 Improved session tracking, allowing admins to quickly identify low-enrolment sessions. 📊 Better attendee management, with centralised tracking across all subjects.

Overview
Overview
Overview

Project Overview

Project Overview

I was tasked with designing a mobile-native solar calculator and summary flow for a new clean-energy fintech marketplace. The goal: help everyday homeowners estimate system costs and savings, understand their ROI, and compare financing options—all within a user-friendly, trust-building experience.

The design needed to:

  • Support both upfront purchase and loan repayment paths

  • Communicate savings and payback periods transparently

  • Reduce drop-off with progressive disclosure and early motivation

  • Follow Apple’s native design language and UI guidelines

Understanding the User
Understanding the User

I created a primary persona: Claire Tan, a first-time solar buyer, aged 38, moderately tech-savvy, and environmentally motivated. Claire recently received a high electricity bill and is actively exploring solar options.

🔍 Key questions Claire needs answered:

  • “What size system do I need?”

  • “How much can I save annually?”

  • “Is financing worth it compared to paying upfront?”


Function

User Need

Understand cost vs. savings Estimate panel size based on usage. - Compare upfront vs. financed payment options Quick application or follow-up with providers

Function

User Need

Understand cost vs. savings Estimate panel size based on usage. - Compare upfront vs. financed payment options Quick application or follow-up with providers

Function

User Need

Understand cost vs. savings Estimate panel size based on usage. - Compare upfront vs. financed payment options Quick application or follow-up with providers

Structure

Problem

“What size array do I actually need?” “Can I afford it and when will it pay for itself?”

Structure

Problem

“What size array do I actually need?” “Can I afford it and when will it pay for itself?”

Structure

Problem

“What size array do I actually need?” “Can I afford it and when will it pay for itself?”

Visibility

Pain points

- Overwhelming industry jargon (e.g., STC, FiT) - Lack of transparency around quotes - Drop-off due to too many steps without guidance

Visibility

Pain points

- Overwhelming industry jargon (e.g., STC, FiT) - Lack of transparency around quotes - Drop-off due to too many steps without guidance

Visibility

Pain points

- Overwhelming industry jargon (e.g., STC, FiT) - Lack of transparency around quotes - Drop-off due to too many steps without guidance

Research

Main User

👩‍💻 Admins – Oversee session creation, duplication, and student enrolment. 📈 Marketers – Use data insights to track session popularity and adjust promotions accordingly.

Research

Main User

👩‍💻 Admins – Oversee session creation, duplication, and student enrolment. 📈 Marketers – Use data insights to track session popularity and adjust promotions accordingly.

User Persona


Overview

Project Overview

I was tasked with designing a mobile-native solar calculator and summary flow for a new clean-energy fintech marketplace. The goal: help everyday homeowners estimate system costs and savings, understand their ROI, and compare financing options—all within a user-friendly, trust-building experience.

The design needed to:

  • Support both upfront purchase and loan repayment paths

  • Communicate savings and payback periods transparently

  • Reduce drop-off with progressive disclosure and early motivation

  • Follow Apple’s native design language and UI guidelines

Understanding the User

I created a primary persona: Claire Tan, a first-time solar buyer, aged 38, moderately tech-savvy, and environmentally motivated. Claire recently received a high electricity bill and is actively exploring solar options.

🔍 Key questions Claire needs answered:

  • “What size system do I need?”

  • “How much can I save annually?”

  • “Is financing worth it compared to paying upfront?”


Function

User Need

Understand cost vs. savings Estimate panel size based on usage. - Compare upfront vs. financed payment options Quick application or follow-up with providers

Structure

Problem

“What size array do I actually need?” “Can I afford it and when will it pay for itself?”

Visibility

Pain points

- Overwhelming industry jargon (e.g., STC, FiT) - Lack of transparency around quotes - Drop-off due to too many steps without guidance

Research

Main User

👩‍💻 Admins – Oversee session creation, duplication, and student enrolment. 📈 Marketers – Use data insights to track session popularity and adjust promotions accordingly.

User Persona


Ideation & Solutions

Competitive Gaps Identified
Competitive Gaps Identified
Competitive Gaps Identified

🔸 Sunspot
– Too many steps, no progress indicator → user anxiety
– Quote transparency lacking → delayed payoff info

🔸 SolarQuotes
– Form-heavy, lead-gen focus → no real guidance
– Assumes users know their system size

🔸 SolarCalculator.com.au
– Dense charts, no storytelling
– No fallback if users don’t know their usage

How calculator works

To simplify this first step electricity bill calculation, there are 3 ways to do this:

1. Select Housing Types: Choose types of housing and show average prices in the neighbourhood.

2. Estimate Electricity Bills: Provide a default data or rough estimate based on household occupancy.

3. Detailed Calculation: Offer a precise calculation based on actual electricity bills.

To simplify this first step electricity bill calculation, there are 3 ways to do this:

1. Select Housing Types: Choose types of housing and show average prices in the neighbourhood.

2. Estimate Electricity Bills: Provide a default data or rough estimate based on household occupancy.

3. Detailed Calculation: Offer a precise calculation based on actual electricity bills.

To simplify this first step electricity bill calculation, there are 3 ways to do this:

1. Select Housing Types: Choose types of housing and show average prices in the neighbourhood.

2. Estimate Electricity Bills: Provide a default data or rough estimate based on household occupancy.

3. Detailed Calculation: Offer a precise calculation based on actual electricity bills.

Calculator breakdown

Housing Type

Select Housing Types: Choose types of housing and show average prices in the neighbourhood.

Initial calculations based on post code

Housing Type

Select Housing Types: Choose types of housing and show average prices in the neighbourhood.

Initial calculations based on post code

Housing Type

Select Housing Types: Choose types of housing and show average prices in the neighbourhood.

Initial calculations based on post code

Housing Type

Select Housing Types: Choose types of housing and show average prices in the neighbourhood.

Initial calculations based on post code

Estimate Electricity Bills

Dividing users to 2 parts: first group who knows the detailed bills; another groupd based on post code to provide average bills

Building trust and reducing friction

Estimate Electricity Bills

Dividing users to 2 parts: first group who knows the detailed bills; another groupd based on post code to provide average bills

Building trust and reducing friction

Estimate Electricity Bills

Dividing users to 2 parts: first group who knows the detailed bills; another groupd based on post code to provide average bills

Building trust and reducing friction

Estimate Electricity Bills

Dividing users to 2 parts: first group who knows the detailed bills; another groupd based on post code to provide average bills

Building trust and reducing friction

Detailed Calculation

Offer a roof overview based on actual location

Receive real-time alerts when you're approaching your budget limits.

Detailed Calculation

Offer a roof overview based on actual location

Receive real-time alerts when you're approaching your budget limits.

Detailed Calculation

Offer a roof overview based on actual location

Receive real-time alerts when you're approaching your budget limits.

Detailed Calculation

Offer a roof overview based on actual location

Receive real-time alerts when you're approaching your budget limits.

Ideation
Ideation
Ideation
Ideation

Iteration

WIREFRAMES

Low-Fidelity Mobile Prototype

Simplified the summary screen to prioritise outcomes over raw data

  • Reordered inputs to show savings earlier

  • Created a design system of UI cards and components for future scalability (tablet, web)

Low FI wireframe

WIREFRAMES

Iteration Highlights

  • Simplified the summary screen to prioritise outcomes over raw data

  • Reordered inputs to show savings earlier

  • Created a design system of UI cards and components for future scalability (tablet, web)

Iteration
Iteration
Iteration
Iteration
Final delivery
Final delivery
Final delivery
Final delivery

Final Delivery

Final Delivery

Close-up of the hand holding the mobile phone
Close-up of the hand holding the mobile phone
Close-up of the hand holding the mobile phone

Key Flow Decisions

Journey Split

Users first select if they’re first-time installers or upgraders. This small split allows the experience to feel personalised early on.

📍 Postcode input follows—used to infer sunlight intensity, average system sizes, and region-specific defaults for smarter recommendations.

Key Flow Decisions

Electricity Bill Input

Claire might not know her kilowatt usage, so I offered an alternative estimation path based on household size and time-of-use habits.

To keep motivation high, a sticky footer shows early estimates: “You could save ~$1,240/year, payback in 4.2 years.”

Key Flow Decisions

Roof & Location

Users enter their roof material and see a visual map of their home. This builds relevance and trust, replacing cold forms with contextual imagery.

Key Flow Decisions

Summary Screen (Core UI)

  • Toggle between loan vs upfront

  • Graph shows cumulative savings vs cost over 25 years

  • Key insights like first-year savings, payback time, and monthly repayment are visually prioritised

  • Users can download, email, or apply directly—offering both soft and hard CTAs depending on readiness

Next Step

If this were to move into implementation, I’d focus on:

  • Usability testing with real users in target markets

  • Localisation for postcode-specific rebates and installer data

  • Expanding into desktop versions for quote review and partner decisions

  • Collaborating with engineering to build the solar estimation logic and validate region-based assumptions

🙌 Major takeaways:

This project pushed me to think beyond UI — to design systems that empower internal teams through clarity and control. I collaborated closely with developers to navigate technical constraints and prioritise meaningful functionality over visual polish alone. The result was not just a smoother admin experience, but a smarter, scalable foundation for Project Academy’s growth.

Next Step

If this were to move into implementation, I’d focus on:

  • Usability testing with real users in target markets

  • Localisation for postcode-specific rebates and installer data

  • Expanding into desktop versions for quote review and partner decisions

  • Collaborating with engineering to build the solar estimation logic and validate region-based assumptions

🙌 Major takeaways:

This project pushed me to think beyond UI — to design systems that empower internal teams through clarity and control. I collaborated closely with developers to navigate technical constraints and prioritise meaningful functionality over visual polish alone. The result was not just a smoother admin experience, but a smarter, scalable foundation for Project Academy’s growth.

Miranda Li

✴

Miranda Li

✴

Miranda Li

✴