Jawwy Mobile App UX Project

Build my Plan

Problem Statement

Jawwy’s customer satisfaction ratings are low because users find the build my plan process hard to understand and they don’t have adequate onboarding or help tools to let them understand the process or the different plans.

 

Jawwy App primary goal and is to allow the customer to customize and build a plan easy and quickly. Customers satisfaction rate is low due to the difficulty and ambiguity of the process of building the plan. the user should have a clear understanding of his current plan at glance and be able to customize/change it easily.

Vision Statement

The new design of “build my plan process-Pages ” will help users achieve their goal by giving them the ability to  Select the plan, understand the different payment methods, Pay for the new plan, and get engaging feedback with greater accuracy and efficiency, and without problems that they currently experience. This will dramatically improve Jawwy’s customer satisfaction ratings and lead to increased market share.

Questions to be answered

Goals — What makes an easy plan building journey?

Opportunity — What activities currently make a bad journey?

Priorities — What is most important to you?

Information — What helps you make decisions?

Quotes Directly from Users:

”I find it very difficult to build a plan

”I do have credit but i can't build a plan

”I charged my credit with 10 SAR to buy the 10 SAR unlimited minutes plan and it is not working- I don't understand what is wrong and i can't get help"

”to be able to recharge my credit I have to use the app and it doesn't allow me to do it through the wifi connection. sometimes I run out of the internet and I get stuck not knowing how to recharge my credit. the app freezes alot"

”I have a problem using the recharge and choosing the plans. i had to uninstall the app "

Persona Profile and expectations

The results of my research suggested that there were several types of users with diverse needs. The accumulation of the different insights and common patterns that came from the users’ quotes helped me create three personas which are the manifestation of that data in a character. Two of the personas presented edge cases since they were based on certain needs of some of the participants. Therefore, eventually, I focused on the more common persona.

Task Models and User Journey

Task model and user journey exercises will help us ensure that the Jawwy App matches users expectations of how to build a plan.

Usability Problems occur when there is a discrepancy between what the user wants to do and the way the app requires them to do it.

Build my Plan Flowchart

Mapping the basic flow of the app helped us to figure each step on the path the users will take throughout the journey of building the plan.

Why Can’t i see my current plan here?
What is the difference between fexible and current plan ?
Why do i have to deactivate my WIFI for the app to work?
Carsoul is very confusing
i can’t understand the meaning of the icons
I can’t find the ” select” button , where is it ?
Page is very cluttered and not Visually appealing
Page is very confusing. i don’t know where to click
I am new to debit/credit Cards , i don’t know where my account is
The page is not Visually appealing and not engaging
does the ” close ” button close the application? i am confused
i hope they don’t ask me for another thing to do!
I clicked button ” select payment ” but the page name is credit card . did i click something wrong ?
I don’t have a credit card . I only have a debit card . the screen meantions credit card only . will i be able to pay ?

Competitive analysis

Competitors : Virgin KSA , Swyp , Mobily , Virgin UAE

Virgin KSA

Virgin UAE

Swyp

Mobily

Onboarding

Does the app show the perks and what the package comes with before signing in?

No

No

Yes

No

After Login

Does the user see his plan first thing after he login?

Yes

Yes

Yes

Yes

After Login

Can the user choose to change the plan through the home screen?

Yes

Yes

Yes

Yes

After Login

Is the CTA clear and easy for the user to see ?

Yes

Yes

Yes

Yes

Key Findings

UI Design Patterns

Proposed Solution

1.Onboarding
Allow the user to different Perks/Plans/Promotions every time the page loads

The User uses the application at least one time a month to recharge his balance  he will be updated with the new Promotions-Plans-Offers .. etc

Colorful Vertical scroll sections, each section covers the main point of interest to the user -maximum of 4 sections with an option to skip.

after user scrolls to the end of the page he should see the following options :

  • Login
  • Sign up
  • Not a member yet? Get your sim we

Should use illustrations and animation to make communicate with the user and make the app more engaging. Users are more likely to want to try a visually appealing product, and they’re more patient with minor issues.

This page is the user’s first impression so it needs to be very visually appealing!

the page should contain an option for the Arabic language

The page should contain a button for help or help options for the user to choose from (FAQs, Live chat, contact… etc )

2.Register – Number validation required
  • Users don’t like long registration forms
  • Users don’t like when they don’t know how many steps left for them to register.
  • Users prefer social login
  • The user should be able to access help when needed
  • The user should be able to change language when needed
  • Remove anything that isn’t Mandatory ( ex. Community Username)
Personalization: The first form should start with asking user their name, then Including the user’s name on screens for a more personalized experience.

To drive engagement: Colorful forms with a Progress bar to show Registration progress, using a friendly tone of voice in copywriting.

Skip option to each step that is Skippable – animated feedback

Emotion: a friendly congratulation message with the username

Steps:

  • Ask for name
  • Step 1: Activation code
  • Step 2: Let’s build a base plan
  • Step 3: Let’s add pay-go credit
  • Congratulation message

The page should contain a button for help or help options for the user to choose from (FAQs, Live chat, contact… etc )

3.My Plan – Homepage
  • Users need to see their plan once the page loads
  • User have a clear option to change the plan ” Manage your plan – make it flexible they way you like it “
  • The user should be able to access help when needed
  • The user should be able to see his wallet
  • The user should be able to see a detailed view of his usage ( minutes- data)
The page should show Phone number used/ Name / and device.

To drive engagement: Colorful display of data to show the different elements of the plan ( ex. circle or line progress bar )

A clear button to Customize his plan

Use wording like “Customize” instead of ” build” – “build” is only used when something doesn’t exist and you need to build it – which will make the user confused

The page should contain a button for help or help options for the user to choose from (FAQs, Live chat, contact… etc )

The page should show the amount of money he has in his wallet and access to his wallet ( button )

The page should show the add-ons he has and access to them

The page should show a way to add a new device

The page should show the expiry date of my plan

The page should show if i am running out of data alert

4.Customize Plan
  • Users like to be able to do a whole task through one page
  • Payment methods should be gathered in one tab
  • Users tend to like stepped forms
  • Users like to see the word ” save money “
Personalization: The form should start with greetings or encouraging statement with the username.

To drive engagement: Colorful forms with 3 hand sliders to be able to choose Data, minutes, and international calls

a progress bar to show that this is step one

Meaningful and clear icons for Minutes, data, and international

Animated feedback

Cancel option

a wallet view

a way to access wallet to be able to add money

The page should contain a button for help or help options for the user to choose from (FAQs, Live chat, contact… etc )

5. Confirm order
  • Users like to have a conversation-like-process
  • Users like to see the amount of money they have in their wallet
  • Users like to see where they can get a coupon
  • Users like to see how they can add a voucher
  • Plus : Users will really like a suggestion “if they are used to spend less and they are wasting money ” on how to save money.
Personalization: The form should start with encouraging statement with the username. ( Ex. Great, You have 10 SAR in your wallet, you need to top it up with 20 SAR – do you want to add a coupon or add a voucher ? )

To drive engagement: Colorful form using bright big icons

a progress bar to show that this is step two

Meaningful and clear icons Wallet, Voucher and coupon.

Animated feedback

Cancel option

a wallet view

when the user clicks add voucher, credit card or coupon an animated bottom sheet appears to add the required data without leaving the page

a button to add a credit card

a Payment ui pattern ( credit card ) to show him the placement of data

a view of saved credit cards

The page should contain a button for help or help options for the user to choose from (FAQs, Live chat, contact… etc )