The fourth teardown in the series of teardowns : http://www.fahimakhter.pk/jal-bujh-ux-teardown/
Focusses on an IoT device and it's android app and how it onboards users . What role the copy plays and how we can improve it to create a better user experience.
You can sign up to the teardowns here: http://eepurl.com/cD7LE5
Verified Trusted Call Girls Adugodiđ 9352852248 Good Looking standard Profil...
Â
How does copy help in user onboarding? UX & Usability teardown of JalBujh
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
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!