# Solar System App

## 1. Project Overview

This project focuses on designing a mobile application for a renewable energy company that provides intelligent solar power solutions for agricultural and commercial users. Once the hardware (Inverter, Battery, and Datalogger) is installed, customers use this app to monitor and optimize their energy performance.

* **Role**: UX/UI Designer.
* **Project type**: Design based on requirement.

<figure><img src="https://938834231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKLkB3qUl3bnZtTfcQj08%2Fuploads%2FAVvQhjKHWvUjXIGhkaX9%2FSmart_solar_energy_202604101428.jpeg?alt=media&#x26;token=855a449f-4dba-435a-878a-e2025ca5684b" alt=""><figcaption></figcaption></figure>

***

## 2. The Challenge & Goals

**The Challenge**: \
Solar energy data is often technical and difficult for non-expert users to interpret.&#x20;

**The Goals:**

* Simplify complex technical data into financial values and easily digestible information.
* Develop a modern, data-driven, and premium interface.
* Enable users to track real-time savings and system health effortlessly.

<figure><img src="https://938834231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKLkB3qUl3bnZtTfcQj08%2Fuploads%2FgWM34cQTHUbcrPXYO22c%2FFarm_owner_looking_202604101433.jpeg?alt=media&#x26;token=2c662672-9d2b-4bff-9d10-b7ad3c828ffe" alt=""><figcaption></figcaption></figure>

***

## 3.  Target Audience

<figure><img src="https://938834231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKLkB3qUl3bnZtTfcQj08%2Fuploads%2FD3n9INxnNrMmrdYINb8d%2FFarm_owner_in_202604101444.jpeg?alt=media&#x26;token=8b2f3a0d-19e9-4965-8337-2f88a9f1c0c3" alt=""><figcaption></figcaption></figure>

**Primary Users**: \
Farm owners and business owners.

**Key Characteristics**: \
Users with limited technical knowledge who prioritize financial optimization, reliability, and simple data presentation.<br>

***

## 4. Design Solutions

The design strategy centers on a modern, data-driven, and premium interface that simplifies complex technical information into meaningful value for users.

### A. Home Screen

<figure><img src="https://938834231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKLkB3qUl3bnZtTfcQj08%2Fuploads%2FXWknZglY9ECQj2aGYyn7%2FHome.png?alt=media&#x26;token=caf35f87-eb81-467d-8f5f-e73182c240d4" alt=""><figcaption></figcaption></figure>

The goal of this screen is to provide an immediate snapshot of the system's health and financial performance.

**Energy Flow Visualization**: A dynamic diagram showing the real-time power flow between Solar → Battery → House → Grid, allowing users to understand their energy ecosystem at a glance.\
\
**Real-time Metrics**: High-contrast cards display current solar power (kW) and battery percentage to ensure constant awareness.\
\
**Financial Impact**: The screen prominently features the daily money saved, translating technical output into tangible economic value.\
\
**Actionable Insights**: Displays smart suggestions, such as prioritizing battery charging before an approaching storm, to help users optimize energy use proactively.

### B. Solar Production Screen

<figure><img src="https://938834231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKLkB3qUl3bnZtTfcQj08%2Fuploads%2F3AsIdaVlFcnzmpr20YLy%2FSolar%20Production.png?alt=media&#x26;token=48332eb9-b085-4d4d-8d89-bedbc3caddf3" alt=""><figcaption></figcaption></figure>

This screen breaks down production data into easy-to-digest visual formats for non-technical users.

**Multi-period Summaries**: Users can toggle between Daily, Monthly, and Yearly views to track production history.\
\
**Production** **Charts**: Intuitive graphs visualize energy trends throughout the day, highlighting peak production hours.\
\
**Energy** **Distribution**: A breakdown (often via donut charts) shows the percentage of solar energy consumed by the home, stored in the battery, or exported back to the grid.

### C. Saving Screen

<figure><img src="https://938834231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKLkB3qUl3bnZtTfcQj08%2Fuploads%2FNY1iFiJ3PsFNG4ipjGlT%2FSaving.png?alt=media&#x26;token=1ab4bbd6-6c59-4f1e-a0ea-34cad419554e" alt=""><figcaption></figcaption></figure>

As a core feature, this screen focuses on the user's primary concern: economic benefit.

**Cost Comparison**: A visual contrast between "Using only grid electricity" and "Using solar energy" to highlight the return on investment and monthly savings.\
\
**Electricity Savings Trend**: A historical graph that tracks financial optimization over time, reinforcing the long-term value of the system.\
\
**Environmental Impact**: Translates savings into relatable metrics, such as CO₂ reduction, to align with the brand's sustainable mission.<br>

### D. Alerts Screen

<figure><img src="https://938834231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKLkB3qUl3bnZtTfcQj08%2Fuploads%2FbyXeDLcslq0fFNMoRqlm%2FAlerts.png?alt=media&#x26;token=2e8651a0-d8cb-415a-87c0-e312be1b5e90" alt=""><figcaption></figcaption></figure>

This screen ensures system reliability through simplified status notifications.

**Status Categorizatio**n: Alerts are clearly classified into categories like Low Battery, Grid Outage, Maintenance Reminders, or System Updates.

**Visual Clarity**: Uses the brand's high-contrast palette (Yellow #FFC810 and Black #212121) to make critical warnings stand out immediately.

**Plain Language**: Translates complex technical faults into simple, actionable information for users with limited technical knowledge.<br>

## E. Support Screen

<figure><img src="https://938834231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKLkB3qUl3bnZtTfcQj08%2Fuploads%2FFVzklMUUSFI58UL3XacI%2FSupport.png?alt=media&#x26;token=e46f560b-6ed3-4c1e-aa19-2296480e31a9" alt=""><figcaption></figcaption></figure>

The final step in the user flow ensures users feel supported and builds trust in the brand.

**Quick Help**: One-tap access to a Hotline, Messaging, or Email for immediate consultation.

**Help Center**: A categorized library for Troubleshooting, Reporting Issues, and checking System Status, empowering users to resolve simple queries independently<br>

***

## 5. Visual Identity

<figure><img src="https://938834231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKLkB3qUl3bnZtTfcQj08%2Fuploads%2FSOjw1imF9AIgItIZLkpX%2FColor.png?alt=media&#x26;token=b3f5192b-03a4-4522-8a95-23b9cef43bd1" alt=""><figcaption></figcaption></figure>

The design adheres to a modern and trustworthy brand direction:

**Primary Colors**: \
Yellow (#FFC810): Representing solar energy, power, and optimism.\
Black (#212121): Representing stability, technology, and trust.

**Visual Style**: A high-contrast Dark Mode interface was implemented to enhance the readability of data charts and maintain a premium tech-driven feel.<br>

***

## 6. Outcome

{% embed url="<https://www.figma.com/design/cdwLBIHHK5iUFCuKrRiw98/Solar-System-App--Preview-?m=auto&t=08SO7YAk2MO6ht1K-6>" %}

{% embed url="<https://www.figma.com/proto/cdwLBIHHK5iUFCuKrRiw98/Solar-System-App--Preview-?node-id=1-1625&viewport=556%2C401%2C0.16&t=refekz7LYvqpieTY-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A1625&page-id=0%3A1\\>" %}

The final high-fidelity UI solution delivers:

**Strong Visual Hierarchy**: Ensuring the most critical data is noticed first.

**Intuitive** **Layout**: Logical card-based components that prevent data overload.

**Seamless** **Experience**: A user journey that successfully bridges the gap between technical monitoring and financial management<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://howie.gitbook.io/work/design/mobile-app-design/solar-system-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.