Aatral Mobile logo

A local clean energy marketplace connecting everyday homeowners to buy and sell solar power.

Aatral Mobile App Mockup

Overview

Aatral Mobile makes buying and selling green power as easy as sending a message, converting complex utility data and charts into simple daily-life choices that anyone can understand.

Timeline

November 2025 – February 2026

Role

Lead UI/UX & Mobile Architect

Platform

Figma, React Native

Tech Stack

React NativeExpo RouterZustandTailwind CSS

The Impact

100%

Self-Serve Verification

Users fetch credentials directly from utilities via themed overlay browsers.

40%

Drop-off Reduction

Introduced 'Skip VC Upload' escape hatch, allowing instant dummy data sandbox preview.

6

Languages Integrated

Supports dynamic mid-flow translation switching for rural prosumers.

The Problem

Everyday homeowners are asked to act like professional energy traders, managing utility meter records, verifying solar assets, and navigating complex networks.

High Cryptographic Barriers
Forcing users to upload complex cryptographic credentials on step one caused 80%+ drop-off.
Disconnected Utilities
Consumers had to manually exit the app, fetch utility bills from government sites, and copy hashes.
Dashboard Clutter
Sellers and everyday buyers were forced into identical, confusing, data-heavy views.

Design Evolution

Before pushing any pixels, the product went through a rigorous, two-phase architectural and visual design translation.

1

Gray-Box Prototyping

Gray-Box Prototyping
2

Figma Tokens

Figma Tokens System

The Process & Operational Reality

Structured around two distinct user archetypes who participate in the same local grid but operate under entirely opposite environmental constraints.

Consumption & Savings Focus

The Buyer wants cheap, reliable, and clean energy without needing to understand kilowatt-hours (kWh) vs. megawatt-hours (MWh). The design optimizes for decision speed.

  • Replaces complex trading charts with everyday time slots (e.g., 'Morning: 6 AM - 12 PM').
  • Highlights green energy source tags clearly (e.g., 'Solar Power', 'Wind Energy').
  • Streamlines purchasing into a Double-Confirmation Sliding Sheet Modal featuring clear cost breakdowns.
Aatral Buyer Screen 1
Aatral Buyer Screen 2

The Solution

A comprehensive deep dive into the operational breakthroughs engineered to bring low-cognitive friction, verified security, and conversational ease.

Problem Tackled

Redesigning Cryptographic Upload into a Self-Serve Bottom Sheet

Friction-Free Utility & VC Verification

Verifiable Credentials (VCs) are secure, cryptographic files that prove a consumer’s identity. We integrated a trigger-based bottom sheet, themed in-app browsers, and a 'Skip VC' escape hatch to streamline onboarding.

Aatral Onboarding Screen
Aatral Seller Publishing Screen

Problem Tackled

Listing Excess Solar Energy inside a Seamless 1-Hour Delivery Window

Publish Energy Intent & Scheduling

Sellers are empowered to list precise energy slots in real-time, eliminating friction from residential green grid distribution with instant market listings and dynamic yield suggestions.

Problem Tackled

Direct Conversion of Green Grid Earnings into Spendable User Accounts

Wallet Ledger & Account Withdrawals

A cohesive financial dashboard built to bridge peer-to-peer micro-grid earnings straight to the user's primary bank account with verifiable proof ledgers and seamless balance transfers.

Aatral Order Ledger & Wallet Screen

Learnings

"This project reinforced that adoption is rarely a feature problem—it is a confidence problem. High-contrast colors, premium animations, and simple translations build structural credibility that makes users feel secure."

Explainability over Jargon

Cryptographic credentials and local grids are highly intimidating. True design means hiding the technical overhead behind friendly, everyday metaphors and self-serve utility logins.

Dynamic Design Builds Trust

In peer-to-peer energy systems, premium micro-animations and seamless dark-mode themes are not just visually pleasing; they convey professional operational security.

Regional Inclusivity is Mandatory

Designing native support for 6 regional languages from day one showed me that true accessibility means designing for cultural and linguistic diversity in local grids.

Cohesive UX Architecture

A great design system connects code and aesthetics. Having our Zustand states, Expo routes, and Figma variables perfectly mapped is what made this project highly reliable.

Let's craft the next operational breakthrough.

Have a complex transactional workflow, multi-role portal, or data-dense dashboard to design?