Skip to content
DIGITAL PRODUCTS✦WEB DEVELOPMENT✦MOBILE APPS✦AI SOLUTIONS✦UI/UX✦CUSTOM SOFTWARE✦SAAS PLATFORMS✦BRANDING✦
DIGITAL PRODUCTS✦WEB DEVELOPMENT✦MOBILE APPS✦AI SOLUTIONS✦UI/UX✦CUSTOM SOFTWARE✦SAAS PLATFORMS✦BRANDING✦
Mhsoft Techs
Home About
01 AI School Routing SoftwareSchool transport & student safety 02 AI Hotel Management SystemAI hotel asset management & USALI reporting 03 SOS Safety AppUrban safety · Mobile + Web 04 Fuel Management SystemE-hailing fuel advances & mobility finance 05 Low Battery AlarmMobile battery alerts & health 06 GiftUp B2B Gift Card PlatformBulk gift card orders, payments & card management for companies. 07 Healthcare Staffing & Agency Management PlatformNurse verification, agency operations & placement management 08 Custom AI Voice AssistantInteractive real-time voice & conversational AI assistant for instant project guidance. 09 Real Estate CRM & Sales SystemLeads, floor plans, payment plans & sales analytics for property developers. 10 Sleep Habits Tracker & CBT-ISleep log, CBT-I habit timeline & sleep insights app. 11 Football Academy Management PlatformAthlete performance tracking, tournaments & player engagement Explore All Products →
Blog Contact
Start Your Project →
CASE STUDY · MOBILE APP · UI/UX · DARK MODE

Never let 0% surprise you.

Redesigning a battery utility into a complete app that rings at the level and length you choose.

Low Battery Alarm splash screen
Low Battery Alarm login screen
Low Battery Alarm battery health home screen
Low Battery Alarm sign-up screen
Low Battery Alarm payment screen
01 — OVERVIEW

A battery guardian that speaks up before it is too late.

Low Battery Alarm lets people set custom alerts for any battery percentage, with an audible alarm of a chosen length. The product design team took it from a single utility screen to an account-based app: onboarding, authentication, alarm setup, payment and feedback.

Role
Product designer on a team
Platform
iOS & Android
Team
Design, 2 engineers, PM
Scope
End-to-end app UI
02 — PROBLEM

Built-in warnings are fixed, silent and easy to miss.

01

Fixed thresholds

System alerts fire at preset levels. Heavy users need warnings earlier, light users later.

02

Easy to miss

A banner or a single beep goes unnoticed in a bag, in a meeting or during a call.

03

No control

People cannot choose how long an alert lasts or keep several alerts for different situations.

03 — DESIGN INSIGHTS

What shaped the design.

01

Percentage matters most

A single slider for the trigger level is the primary action and sits at the top of the setup card.

02

Duration needs a familiar control

A minute and second wheel picker feels like the native timer, so no learning is needed.

03

Alarms are a list, not a setting

Users keep several alarms and switch them on and off, so each gets its own toggle row.

04

Charging state builds trust

Showing level and charging status together confirms the app reads the real battery.

04 — USER FLOW

Install to first alarm in five steps.

Low Battery Alarm splash step
01
Splash
Get Started
Low Battery Alarm sign up step
02
Sign up
Email, password
Low Battery Alarm verify step
03
Verify
4-digit code
Low Battery Alarm home step
04
Home
Battery health
Low Battery Alarm set alarm step
05
Set alarm
Level, duration
Branch: Returning users skip to Login. Unverified accounts return to the 4-digit email code.
05 — UI SCREENS

Green on black. Status at a glance.

Low Battery Alarm splash screen
01

Splash

A glowing battery icon and one clear call to action set the tone.

Low Battery Alarm login screen
02

Login

Pill inputs, password reveal and Google, Facebook and Apple sign-in.

Low Battery Alarm verify email screen
03

Verify email

Four large digit boxes with a resend link keep the step quick.

Low Battery Alarm home screen
04

Home

Battery level, charging state, slider, wheel picker and an alarm list with toggles.

Low Battery Alarm payment method screen
05

Payment method

E-wallets and cards are grouped. The selected option is outlined in green.

Low Battery Alarm feedback screen
06

Feedback

Three fields and a single Send action.

06 — DESIGN SYSTEM

A small kit with one loud color.

Color
Signal green
#00BF3F
Background
#0B110D
Card
#262626
Alert red
#FF0000
Text
#FFFFFF
Muted
#8A948E
Type · Montserrat
Aa
Title 22 Bold
Label 16 SemiBold
Body 14 Regular
Primary buttonInput fieldChargingLow
07 — LEARNINGS

What the project taught us.

01

One accent color does the work

Green means safe and charging, red means low. Limiting the palette made status readable instantly.

02

Reuse native patterns

The wheel picker removed the need for instructions and cut setup errors in testing.

03

Test copy early

Small label fixes, such as the spelling in the percentage prompt, are worth catching before handoff.

Want an app like this for your business?

Tell us about your idea and we will plan the design and build with you.

Mhsoft AssistantONLINE & READY
Hi there! Welcome to Mhsoft Techs. I'm here to help you find the right service for your project. What are you looking for?
Great choice. Share a few details and our team will get back to you shortly.
✓ Thanks, there! We've received your request for . Our team will contact you soon.