• Er. GSK

    • Home
    • Projects
    • About
    • Resume
    • Contact
Projects
E

Energy Balance App

Academic

Energy-monitoring mobile app: UI/UX design and an interactive Figma prototype.

UI/UX design & prototyping2024Team project (Swinburne, C01_T4)Swinburne University of TechnologyEnergy / IoT
Figma prototype
On this page
  • Overview
  • Tech stack
  • Showcase
    • Home & monitoring
    • Devices
    • Add a device
    • Method · Scan a QR code
    • Method · Add manual details
    • Method · Connect via local network
    • Billing · Overview
    • Billing · History
    • Sustainability
    • Activity & support
    • Export a report
    • Navigation

Overview

A mobile app concept for monitoring home energy. It brings together live consumption against solar production, per-device usage, billing and breakdowns, carbon-footprint estimates, and weather, with a guided flow for connecting new devices by QR or manual entry. The work covered the end-to-end UI and an interactive Figma prototype.

Tech stack

Figma
Prototyping
Design system
User flows
The skills behind this

Showcase

Home & monitoring

Energy Balance App dashboard with a 24-hour consumption versus solar-production chart and key energy stats.
Dashboard
Real-time energy monitoring screen tracking live electricity usage in the Energy Balance App.
Real-time monitoring

Devices

Connections screen listing the smart appliances linked to the Energy Balance App.
Connections
Device detail screen showing a connected device's energy usage, view 1.
Device detail · 1
Device detail screen showing a connected device's energy usage, view 2.
Device detail · 2
Device detail screen showing a connected device's energy usage, view 3.
Device detail · 3
Device detail screen showing a connected device's energy usage, view 4.
Device detail · 4
Device detail screen showing a connected device's energy usage, view 5.
Device detail · 5
Device detail screen showing a connected device's energy usage, view 6.
Device detail · 6
Device detail screen showing a connected device's energy usage, view 7.
Device detail · 7

Add a device

Add New Connection screen offering three ways to add an appliance: scan a QR code, enter details manually, or connect over the local network.
Choose a method

Method · Scan a QR code

Scanning a QR code to add an appliance, step 1.
Step 1
Scanning a QR code to add an appliance, step 2.
Step 2
Scanning a QR code to add an appliance, step 3.
Step 3
Scanning a QR code to add an appliance, step 4.
Step 4

Method · Add manual details

Entering appliance details manually, step 1.
Step 1
Entering appliance details manually, step 2.
Step 2
Entering appliance details manually, step 3.
Step 3
Entering appliance details manually, step 4.
Step 4
Entering appliance details manually, step 5.
Step 5

Method · Connect via local network

Connecting an appliance over the local network, step 1.
Step 1
Connecting an appliance over the local network, step 2.
Step 2
Connecting an appliance over the local network, step 3.
Step 3
Connecting an appliance over the local network, step 4.
Step 4

Billing · Overview

Billing overview screen showing monthly cost as a bar chart.
Overview
Cost-breakdown sheet over the billing overview, month 1.
Breakdown · 1
Cost-breakdown sheet over the billing overview, month 2.
Breakdown · 2
Cost-breakdown sheet over the billing overview, month 3.
Breakdown · 3
Cost-breakdown sheet over the billing overview, month 4.
Breakdown · 4

Billing · History

Billing history screen listing past invoices.
History
Cost-breakdown sheet opened from a billing-history invoice, view 1.
Breakdown · 1
Cost-breakdown sheet opened from a billing-history invoice, view 2.
Breakdown · 2
Cost-breakdown sheet opened from a billing-history invoice, view 3.
Breakdown · 3
Cost-breakdown sheet opened from a billing-history invoice, view 4.
Breakdown · 4

Sustainability

Carbon footprint screen estimating CO2 emissions from energy use, with the local grid emission factor, in the Energy Balance App.
Carbon footprint
Weather forecast screen used to anticipate solar generation in the Energy Balance App.
Weather forecast

Activity & support

Activity history screen of the Energy Balance App.
History
Notifications screen of the Energy Balance App.
Notifications
Help screen of the Energy Balance App.
Help
Feedback screen of the Energy Balance App.
Feedback

Export a report

Generate Excel Report sheet with real-time data selected.
Report type
Generate Excel Report sheet with a specific day selected.
Specific day
Generate Excel Report sheet with a specific month selected.
Specific month
Selecting a month for the exported report.
Pick month
Report generating in progress.
Generating

Navigation

Side navigation menu of the Energy Balance App.
Side menu

Interested in this kind of work? Get in touch

More projects

View all

Coupaso

Receipt photos turned into verified, payable cashback.

Hero Ecotech

SAP-integrated B2B field-sales ordering app and backend.

Mentcape

Therapy and coaching SaaS, my step up from junior to senior.

Finlo

Multi-tenant parking and transport SaaS with a stats engine.

On this page

  • Overview
  • Tech stack
  • Showcase
    • Home & monitoring
    • Devices
    • Add a device
    • Method · Scan a QR code
    • Method · Add manual details
    • Method · Connect via local network
    • Billing · Overview
    • Billing · History
    • Sustainability
    • Activity & support
    • Export a report
    • Navigation