how does copy help in user onboarding? ux & usability teardown of jalbujh

Jal BujhUX & 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

INTRODUCTIONJalBujh

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.

LEGENDIn 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

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!

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

Now that’s automation!

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.

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

Ting Ting Connecting…..

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.

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.

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.

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.

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?

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.

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”

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.

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

Blondie for suspense

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’

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

AAAAAAND SEND!

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.

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

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?

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.

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

Ahan ahan all the stuff we just learned the hard way

Almost done with the Jal Bujh first user experience.

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 time1b - Add a turn off time2 - Send plan to Jal Bujhe3 - Read the plan see if it’s working4 - 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.

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!

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!