Save Me
Project Overview
Bridging the gap between
environmental intent and daily action
⚡
The Challenge
Pakistani households waste significant energy due to lack of real-time monitoring tools, poor awareness of consumption patterns, and no localized guidance on sustainable practices.
🎯
My Approach
Led end-to-end UX design: user research, persona development, journey mapping, information architecture, wireframing, and high-fidelity prototyping with usability testing.
✨
The Outcome
A gamified mobile app connecting WAPDA utility data with personalized eco-goals, habit tracking, and localized recycling education — achieving 91% task success rate in testing.
Problem Statement
Pakistan's energy crisis is worsened
by a behavioral awareness gap
Despite frequent load-shedding and rising electricity bills, most households lack tools to monitor consumption or knowledge to act sustainably. The problem isn't just infrastructure — it's a missing layer of personalized, actionable guidance.
78%
Households unaware of daily energy consumption
23%
Urban households actively conserving energy
<5%
Pakistan's recycling rate vs. 35% global average
₨4,200
Monthly energy waste cost per average household
🔴 Root Causes Identified
1
No real-time energy monitoring tools for households
2
WAPDA bills are complex and unintuitive to interpret
3
Recycling infrastructure and education both lacking
4
No localized sustainability app for Pakistani context
5
Habit formation apps don't address environmental impact
🟢 Opportunity Areas
→
Gamification can increase engagement and habit retention
→
Visual data dashboards make consumption patterns legible
→
Local language tips increase adoption and trust
→
Goal-setting creates accountability and motivation
→
Community features enable peer-driven behavior change
User Research
Listening before designing
I conducted a multi-method research phase to validate assumptions, uncover hidden needs, and understand the real behaviors of Pakistani energy users.
🎙️
In-Depth Interviews
12 participants · 45 min each
📊
Online Survey
87 respondents · 3 cities
🔍
Competitive Analysis
5 sustainability apps
📋
Secondary Research
WAPDA reports · Energy data
🏠
Contextual Inquiry
Home visits · 3 households
🔑 Key Research Findings
📱
Real-time feedback is critical
Users want immediate, visual feedback on their energy usage — not monthly summaries. 89% said they would change behavior if they could see live impact data.
🎮
Gamification drives motivation
82% of surveyed users reported that reward systems, streaks, and achievements would increase their likelihood of maintaining eco-habits long-term.
🏠
Habit apps outperform utility apps
Users preferred goal-oriented habit apps 3x over utility-only monitors. The emotional reward of 'accomplishment' keeps users engaged.
🌐
Local context builds trust
91% of interviewees felt more confident using apps with content in their local language (Urdu/English hybrid) and locally relevant sustainability tips.
📈
Visual data reduces cognitive load
Users overwhelmingly preferred area/line charts over tables or text summaries. Color-coded consumption indicators were rated highest for clarity.
⚡
WAPDA bill confusion is universal
100% of homeowners interviewed said they couldn't interpret their WAPDA electricity bill. Bill photo scanning was identified as a high-value feature.
Research Partner: WAPDA (Water & Power Development Authority)
Secondary data from WAPDA's annual energy reports revealed that residential energy consumption accounts for 47% of Pakistan's total electricity use — making household behavior change the highest-leverage intervention point. Future integration with WAPDA's API would enable real-time bill monitoring.
Define
Understanding who we're designing for
Two distinct user archetypes emerged from research, each with unique contexts, motivations, and barriers to adopting sustainable behaviors.
F
Fatima Malik
34 · Homemaker · Lahore
Tech Savviness:
Low
Medium
High
Goals
✓
Reduce monthly electricity bills
✓
Teach children eco-habits
✓
Understand WAPDA billing
Pain Points
✗
No visibility into energy usage
✗
Complex, unreadable utility bills
✗
No time for lengthy tutorials
"I know I should save energy, but I don't even know where to start or what's actually wasting electricity."
A
Ahmad Hassan
27 · Software Developer · Karachi
Tech Savviness:
Low
Medium
High
Goals
✓
Track personal carbon footprint
✓
Build data-driven eco-habits
✓
Contribute to climate action
Pain Points
✗
No Pakistan-specific apps exist
✗
Current tools ignore local context
✗
Generic advice feels irrelevant
"I want to be sustainable but the tools available are designed for Western users — they completely ignore my context."
What both personas share
Motivation
Both are genuinely motivated by cost savings and environmental care — but need the right trigger to act.
Constraint
Limited time and attention spans demand an app that delivers value in under 2 minutes per session.
Expectation
Both expect localized, trustworthy data and prefer visual representations over text-heavy interfaces.
User Journey Map
Mapping Fatima's experience — from discovering the app to achieving her first monthly energy savings goal.
1
Awareness
🤔 Curious
Discovers Save Me via social media ad
💭 "Another energy-saving app? Let me see if this is actually different."
⚠ Skeptical after seeing many irrelevant apps before
2
Onboarding
😊 Hopeful
Downloads, creates profile, sets energy goal
💭 "Only 4 steps! And I can actually set my own goal amount."
⚠ Initially confused by 'units' vs PKR — added tooltip
3
First Use
💪 Motivated
Views energy dashboard, adds first habit
💭 "This chart actually shows me which hours I use the most electricity!"
4
Engagement
😤 Overwhelmed
Reads recycling guide, logs daily eco-habits
💭 "I didn't know I could recycle cardboard at that depot nearby!"
⚠ Too many tips shown at once — redesigned to show 3/day
5
Progress
🌟 Proud
Earns 'Green Streak' badge, shares with family
💭 "My kids are excited about my eco-points. They want to help now!"
6
Reflection
😌 Satisfied
Reviews monthly report — saved PKR 800
💭 "I actually saved money AND helped the environment. Sharing this!"
How Might We…
Translated key pain points into design opportunities using the HMW framework.
HMW…make energy consumption data understandable for non-technical, time-poor users?
HMW…motivate users to maintain eco-habits through meaningful — not superficial — gamification?
HMW…connect WAPDA utility data with personalized, actionable household insights?
HMW…educate users about recycling within the specific context of Pakistani waste infrastructure?
HMW…make carbon footprint reduction feel achievable and motivating rather than overwhelming?
HMW…design for diverse tech literacy levels while keeping the experience delightful for all?
Design Strategy
From insights to intentional decisions
Every design decision was grounded in research findings and mapped back to user needs. Here are the five core principles that shaped Save Me's UX.
👁️
Clarity Over Completeness
Users have limited time and cognitive bandwidth. Show only what matters, when it matters.
Design decision: Dashboard shows today's top 3 insights instead of all available data. Deep-dive is one tap away.
🏆
Meaningful Gamification
Points and badges only work if they connect to real impact. Empty rewards create churn.
Design decision: Every earned point shows a real-world equivalent (e.g., '50 points = 2kg CO₂ saved'). No vanity metrics.
🌍
Radical Localization
Generic sustainability advice fails Pakistani users. Context isn't optional — it's the product.
Design decision: All units, tips, recycling guides, and pricing in local context. Bilingual interface (English + Urdu labels).
📉
Progressive Disclosure
Diverse tech literacy requires different depths of information. One size doesn't fit all.
Design decision: Simple main view for Fatima, expandable data layers for Ahmad. Power mode toggle available in settings.
♿
Accessible by Default
Sustainability is for everyone, not just tech-savvy early adopters.
Design decision: WCAG AA color contrast, large touch targets (min 48px), screen reader labels, and offline mode for low-connectivity users.
🔄
Habit Loop Architecture
Sustainable behavior change requires cue → routine → reward loops baked into UX flow.
Design decision: Daily push notification (cue) → habit log (routine) → instant visual reward + streak counter (reward).
Lo-Fi Wireframes
Before any colour or branding, I mapped all five core screens as grayscale wireframes. This stage focused purely on layout, spacing, and hierarchy — allowing fast iteration with stakeholders without getting distracted by visual details.
Information Architecture
A task-flow-based tree showing how Save Me's five navigation sections branch into pages, actions, and reusable components — all reachable within 2 taps from the home screen.
Save Me App
🏠 Home
⚡ Track
📚 Learn
🎯 Goals
👤 Profile
Today's Usage
Energy Score
Quick Actions
Streak Status
Live Monitor
Usage History
Bill Upload
Appliance List
Recycling Guide
Daily Tips
Eco Articles
Local Depots
Active Goals
Habit Tracker
Points & Badges
Challenges
Impact History
Household Data
Settings
Share Report
PAGE
ACTION
COMPONENT
1
1 — Welcome
Splash & onboarding entry
2
2 — Create Profile
Registration form flow
3
3 — Choose Goals
Minimal multi-select
4
4 — Daily Tasks
Progress + task checklist
5
5 — Your Rewards
Points & redemption
Solution & Prototype
High-fidelity designs
grounded in user needs
After two rounds of wireframe testing, the high-fidelity designs were built on a clean teal design system inspired by nature, calm, and trust.
1
2
3
4
5
1
Welcome
Bold gradient hero surfaces the app's mission instantly. Feature pills and a glass-effect logo build trust before any commitment.
2
Create Profile
Step indicator orients users through onboarding. Dashed avatar upload and icon-anchored fields lower form-filling anxiety.
3
Choose Goals
Single-purpose goal picker with teal toggle checkmarks. Muted unselected items and a selection-count CTA guide confident action.
4
Daily Tasks
Circular progress ring surfaces completion at a glance. Emoji category icons give each task instant context and reinforce streaks.
5
Your Rewards
Points hero banner shows progress toward the next tier. Locked/unlocked reward cards tell users exactly what they're working toward.
Design System
A cohesive visual language inspired by nature, clarity, and trust — covering every token, component, and pattern used across Save Me.
01
Color Palette
Brand Colors
Primary Teal
#1ACEBA
CTAs · Brand · Progress
Ocean Blue
#0A9CE0
Data · Links · Charts
Mint Green
#22E5A8
Success · Achievements
Charcoal
#3A3D3D
Body text · Icons
Warm White
#FFFEFA
Backgrounds · Cards
Semantic States
Success
#22E5A8
Warning
#F59E0B
Error
#EF4444
Information
#0A9CE0
Brand Gradients
Primary Gradient
Warm Gradient
Hero Background
02
Type Scale · Roboto
Heading 1 — Screen Titles
H1 · 30px · 800 · −0.02em
Heading 2 — Section Labels
H2 · 22px · 700 · −0.01em
Heading 3 — Card Titles
H3 · 18px · 600 · 0
Body Regular — Content & Descriptions
Body · 15px · 400 · 0
Body Small — Metadata & Captions
Small · 13px · 400 · 0
LABEL · BADGE · TAG
Label · 11px · 700 · 0.1em
03
Spacing Scale · 4px base
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
04
Elevation · Shadow Scale
Flat
Inline, dividers
Raised
Default cards, inputs
Floating
Dropdowns, modals
Hero
CTAs, featured cards
05
Buttons · All Variants
Primary
Primary
Secondary
Secondary
Ghost
Ghost
Destructive
Destructive
Disabled
Disabled
+
FAB
↗
Icon
♻ Filter
Chip
Height: 44px
Radius: 14px
Touch target: 48px min
Gradient on primary
WCAG AA contrast ✓
06
Input Fields · Form Controls
DEFAULT
Search habits…
FOCUSED
Turn off lights
ERROR
invalid@email
⚠ Please enter a valid email address
DISABLED
Field locked
SELECT / DROPDOWN
Daily · Morning
TOGGLE SWITCH
On
Off
07
Cards & Containers
HABIT CARD
💧
Save 10L Water
Daily · Conservation
7.5 / 10 litres saved today
STAT CARD
This Month
PKR 820
Energy savings vs. last month
↑ 18%
vs June
TOASTS & ALERTS
🏆
Badge Unlocked!
7-day streak — "Green Week" earned
💡
AC at 26°C saves 18% more energy
08
Navigation · Bottom Tab Bar & Header
BOTTOM NAV BAR
🏠
Home
⚡
Track
📚
Learn
🎯
Goals
👤
Profile
52px height · Icon 24px · Active: teal fill + dot
SCREEN HEADER
Good morning, Fatima ☀
Today's Energy Score
🔔
48px+ height · Teal gradient · 16px side padding
09
Progress & Data Visualisation
CIRCULAR PROGRESS
78%
Monthly Goal
78% complete
45%
Today
45% complete
LINEAR PROGRESS
Water
80%
Energy
55%
Waste
35%
Carbon
20%
STREAK & GAMIFICATION
🔥
14
day streak
M
T
W
T
F
S
S
1,240
Eco Points
Level 5
Eco Guardian
10
Badges, Tags & Feedback States
ACHIEVEMENT BADGES
🌱
First Step
💧
Water Saver
🔥
7-Day Streak
⭐
Eco Champion
🏆
🔒
Green Master
CATEGORY TAGS & PILLS
♻️ Recycling
⚡ Energy
💧 Water
🌱 Habit
🏆 Achievement
+ 50 pts
STATUS INDICATORS
✓ Habit Logged
⚠ High Usage Alert
✗ Goal Missed
● Streak Active
⋯ Syncing Data
4px base grid
Radius scale: 8–20px
Min touch 48px
WCAG AA #1ACEBA on white ✓
WCAG AA white on #1ACEBA ✓
Testing & Impact
Validated through real users,
refined through real feedback
Two rounds of usability testing with 8 participants each revealed critical iteration opportunities and confirmed the core value proposition.
🧪 Usability Testing Protocol
Participants
8 users (mixed tech literacy, ages 22–45)
Method
Moderated task-based testing + think-aloud protocol
Tasks
5 primary task flows (onboarding → goal set → habit log)
Metrics
Task success rate, time-on-task, SUS score, error rate
Rounds
2 rounds — Lo-fi prototype → Hi-fi prototype
🔧 Key Iterations Made
7-step onboarding
→
4-step with progress bar
Drop-off ↓ 62%
Raw kWh data display
→
Color-coded consumption gauge
Comprehension ↑ 78%
All tips shown at once
→
3 daily tips with swipe
Scroll depth ↑ 3x
Generic achievement labels
→
Real-world CO₂ equivalents
Motivation score ↑ 34%
91%
Task completion rate in final usability test
4.3/5
System Usability Scale score (Good: 4.0+)
6.2 min
Average session duration (target was 4 min)
76%
Users who said they'd recommend the app
🌍 Projected Environmental & Economic Impact (Pilot Users)
⚡
15–20%
Projected energy savings for active users
💰
PKR 840
Average monthly savings per household
🌱
2.3 tons
Annual CO₂ reduction per active user
♻️
3x
Higher recycling rate among app users vs. control
🌿
Sustainability · Mobile UX · 2024
Save Me —
Eco Habits App
A mobile application that empowers Pakistani households to monitor energy consumption, build eco-friendly habits, and reduce their carbon footprint — one actionable step at a time.
Role
UX Designer
Duration
1 Year
Platform
iOS & Android
Tools
Figma · Miro
Energy Tracking
Habit Formation
Recycling Education
Gamification
Login Screen
Rewards Screen
© 2026. All rights reserved.
Muhammad Inzimam Saghir