The document provides a detailed teardown of the 'Jal Bujh' app, which transforms traditional geysers into Bluetooth-enabled devices for managing gas consumption. It highlights various user experience aspects, including permissions, interface design, and the need for clearer copy and instructions. The author emphasizes the importance of colors and contextually relevant prompts to enhance user engagement and suggests potential improvements such as gamification and better onboarding strategies.

1. Jal Bujh
UX & USABILITY TEARDOWN
Jal Bujhe turns your traditional geyser into a bluetooth enabled
device. Enabling you to manage your gas consumption.
Pakistani startups user experience series by Fahim Akhter

2. INTRODUCTION
JalBujh
You can download Jal bujh app from the google play
store. And buy the device from their e-commerce
store.
I bought the device last year, the physical device has
had some quirks but worth the overall savings.
All images are from the jal bujh app and the website and are owned by
Zaheen machines.

3. LEGEND
In the teardown. I use four colors:
Green: A good experience.
Blue: Suggestions for improvement.
Orange: An experience that can be improved.
Red : A bad experience.
Average reading time of the teardown is 8min. If you’re in a hurry? Jump to the takeaway

4. 99% of the time it’s a terrible idea to ask for
permissions right when the app starts.
The user does not know your app and there
isn’t any context yet.
This how ever is the 1% exception. The user
bought a bluetooth device so it’s natural to
have that as the first screen.
Allow!

5. Wicked! It’s turning my bluetooth on itself.
Since it already has the permission.
Now that’s automation!

6. I never got the chance to see that splash screen
though.
It was 2 popups and I’m here. This one I think
is a personal preference. I like to read that one
line explainer of what the app is. Specially the
first time I start it.
No Biggy. Let’s see this screen.
Green is the only color a user wants to see
when on the first step of anything. Great that
the bluetooth is working and an auto search
with no intervention double thumbs up.

7. So it found my device. The default name of the
device is Jal bujhe. So it’s identifiable.
Again yellow a great indicator of strength.
Users always look before they read and well
most don’t even read.
Let’s click on this
The button does not look like a button. Or if it
is it’s from the 90’s

8. Ting Ting Connecting…..

9. Let’s get to this message copy: “No pin number has
been assigned”
Was I supposed to assign a pin in the start? But you
never asked me to.
This is the first time the user is setting the ‘PIN’ a
better copy can be “PIN Required to access Jal
Bujh”. Enter your new pin provided this screen
wants the user to create a new pin.

10. Let’s see the second part of the copy : “Please enter
up to 6 digit pin”
I entered the PIN it doesn’t want me to create a pin.
But enter a pre assigned pin.
Where is this PIN?
Is it written on the box? It is on the device? In the
device? The user doesn’t know. Alright so I found
the PIN on a sticker inside the device. So let’s try
that out.
This is a great screen to tell the user what the pin
is. Why it’s used and where he/she can find it.

11. So it’s a numbers only field so only the num
pad comes up. Great.
The user has two choices “Cancel” and “Done”
Won’t it be a good idea to have a more
appropriate button text? How about “submit”
“Assign PIN” or “Connect to Jal Bujh”
Something that tells the user about the result of
pushing that button.
The app wants the user to press the ‘done’
button. So how about we highlight that. Nudge
him a little in the right direction. By changing
its color.
Let’s push done after putting in the pin code.

12. I just pressed done. What is this data that
you’re retrieving?
Would it be a better copy:
- “connecting to device”
- “Retrieving X data from device”
The copy of this popup and the previous button
should match. So the transition is smooth in
the user's head.
I did an action (pressed a button) and here is
the reaction it’s connecting to the device. The
copy of the action/reaction pair should reflect
the same thing.

13. Again it’s the copy. No Plan Detected tells the
users like there could have been a plan. It’s just
not there right now. Which isn’t true because
it’s the first user experience.
It’s the first time experience perhaps a copy
“No plan in device yet”
Now that’s good instruction. Let’s Program this
jal bujhe.
On a side note do these buttons have the same
priority? Is the user going to be programming
jal bujhe or changing the device name as his
first action. Is changing the device that
important? Maybe move it in the settings?

14. Hey happy green button.
Stands out. I want to click it.
This is a lot of empty space. There could be a
place holder of the ‘plan’ here a greyed out
template. So the user has a little idea of what a
plan might look like or where it might go.
Or this place could be used as an instruction,
like in the previous screen. That hey press the
green button to add a plan. Always try to
nudge your user in the right direction. Don’t
have him guess.

15. What’s a time slot? Tell the user what he’s
doing beforehand.
RED RED RED makes me so happy to see them
colors.
And we’re back to the boring old done button.
How about “Add time slot”

16. Cool. So at 8:48 (which is current time) turn the
geizer very hot.
But now what? This would be a good place to
tell the user ‘hey mate why don’t you try
putting in a off time too.
I would imagine this will occur in pairs. You
turn something on you also turn it off.
How about having the previous dialogue box in
two parts when to turn on and off?
Anyways so let’s add more timings.

17. Let’s make it a 1 min diff to see if the device
actually turns off.
Blondie for suspense

18. Great so we’ve got another time entry.
Remember kids RED BAD! Blue saving the world!
“Send plan to Jal Bujh”
I like this button. Tells me exactly what’s going to
happen. The ‘data’ was perhaps plan aye.
If I were to change anything about this ‘button’ I’d
have it look like a button. So I think we’re all set to
test it.
Let’s push the ‘send plan to jal bujhe’

19. Wohoo! Finally a button which tells me what’s
going to happen.
AAAAAAND SEND!

20. I think there was a small prompt in the bottom
with the sent sign. I missed it.
This would be a good place to congratulate the user
that hey buddy great job you’ve done it. Set your
first plan.
NOTE TIME!
I think this app could have a wonderful reward
system of saving trees or saving. The value of the
whole system is saving!
So why not tell the user how much he’s saved
using jal bujhe. Complete with medals and trees.
Let’s explore the app more.

21. So we can have multiple plans. That’s neat.
On a side note, could we let the user add
infinite plans name them and so on?
Let’s read the plan we just set to make sure it’s
in there.
Clicking Read plan in Jal Bujhe

22. The copy has changed from retrieving to
reading but still doesn’t tell us much.
Maybe “Reading Plan in Jal Bujhe!” would tell
the user a little more information.
“Press Back to cancel”
Why should I push back button? Why can’t I
have the cancel button right up there on the
dialogue box. Wouldn’t the context of that be
more clear?

23. Alrighty small prompt “plan read”
Hey I just saw the little green man. Now that’s
the perfect icon. Green and Running perfect.
What’s that info button on the top right corner.

24. Oh wicked a little wiki!
But so many words with no headers.
We don’t read anymore as users we Scan. If
there’s anything more than 150 characters.
Add a header make it scannable.
Anyways scrolling down

25. Ahan ahan all the stuff we just learned the
hard way
Almost done with the Jal Bujh first user
experience.

26. NOTE TIME!
I’d just re do this whole section it’s just too tight
and the copy isn’t relatable.
What if it was in the form of steps.
1 - Add a schedule
1a - Add a turn on time
1b - Add a turn off time
2 - Send plan to Jal Bujhe
3 - Read the plan see if it’s working
4 - And hey you can have multiple plans
And throw each one in a separate screen which
is paginated and put it up at the start.
It would be really helpful. No one is going to
click that small info button the top right corner
by himself.

27. So we’re all set and my geizer is saving the planet now. Let’s see what we’ve learned.
Colors: Great use of colors to indicate states in the app. Colors are great to direct the
users, to prompt them or just nudge them in the right direction or ask for attention. When
used right.
Copy: The copy needs a lot of changes specially the help and the wiki. In apps you need to
be precise with the copy and contextually aware. You can’t throw everything at one place
and expect the user to read through it all. Looking for what he needs.
Empty Screens/Scenarios: The empty screens can use an upgrade. If there is nothing
added nudge the user in the right direction. Use a copy there. If there is a loading instead
of a traditional loading show the user a placeholder for a better experience. Facebook,
Linkedin, Twitter everyone’s switch to default empty cards on loading.
Gamification: If you really want to get the folks engage maybe add gamification. How
much they saved? In terms of gas, money, trees, ozone and so on..
TAKEAWAY!

28. With our short attention spans these days. It’s an achievement in itself to read 27 slides. So
kudos to you my friend!
Where do you go from here? You can subscribe from here. So I’ll ping you as soon as I upload the
next teardown.
If your startup needs help onboarding users or retaining them hit me up me@fahimakhter.pk
YOU HAS MADE IT!