Vinay Mohanty

UI Redesign | HDFC Forex CardUsability Review & Recommendations | July 10, 2008

Problems format

– Interface problem

– How it leads to user problem

– Screen Shot

– Severity of Problem

– Heuristic rule which the problem violates

– Suggested Fix

Issues & Recommendations

Before Login Screen

Interface problem: next steps... call us...then login.

User problem: call us and login seem related where as they are not. Login is only used after the users holds a forex or gift card.

Before Login Screen

Recommendation:

•LOGIN should be placed in a distinct and visible position.

•It can even be given a unique button.

Login

FOREX CARD

Login

Interface problem: Login Page opens in a new window. It has no relation with the previous page. Looks wise, it comes across as too blank.

User problem: Page does not convey a feeling of being secure and trust worthy. Looks incomplete as if the page hasn’t loaded fully.

Login Screen-page background

Login Screen-page background

Recommendation:

•The new page should be consistent with the parent HDFC site in terms of banner, look and feel, colours, shapes etc.

• The need for a Unique identity for the set of pages is essential for the user to understand he is working on a new application window to reinforce the feeling of security and trust.

• no copy paste should be allowed for security reasons.• could do with small images/banner.•virtual keyboard

PREPAID CARD FOREX

Login Screen-header

Interface problem: Page has no heading.

User problem: Is this gift card or forex card? Which card application are you using?

Login Screen-header

Recommendation:

• The name of the specific Prepaid card is needed

PREPAID CARD FOREX

Login Screen- form fields

Interface problem: no forgot password link.

User problem: What if I have forgotten password or card number.

Login Screen- form fields

Recommendation:

• A forgot password link should be provided.

• what is ipin,

• card number and pwd.can be shown with tool tip and (?)

•highlight on active field to be filled

Card Number |

IPIN

Card Number is the …………IPIN is the Number provided on the…

?

?Forgot IPIN

Card no is the 16 digit no on your card

Login Screen-Wrong Passwd

Interface problem: WRONG password, why a new page?

User problem: increases clicks and takes time. User has to enter card no again.

Login Screen-Wrong Passwd

Recommendation:

The system should check the password entered and notify the user on the same page.

Doing the validation and presenting error message on the same page save couple of clicks.

Access your Forex Card account

Card No and IPIN entered do not match.

Forgot passwordWhat is IPIN. Click here to get new IPINTrouble logging in ?Recommended settings

Use virtual keyboard to enter your password.

IPIN(Password)

Card Number 123567

XXXXXX

Login >

Verified by <Verisign>

Welcome to Forex Card online

Welcome Screen

Interface problem: Tiling of background at welcome screen

User problem: users cannot understand where they are and what to do next

Welcome Screen

Recommendation:

•The welcome screen can have a summary of what all the prepaid card user can accomplish after logging in.

•It can even have the Balance upfront or as a quick link.

• features such as report fraud, report loss of card can be added

• BREADCRUMBS : to show where you are

Report Fraud

Report loss of card

Statement > monthly statement

GIFT card needs FAQ

FAQ

Interface problem: Gift card FAQs need to carry on even after the login.

User problem: gift card: since someone gifts you the gift card, user is not so familiar with the its concept

GIFT card needs FAQ

FAQ

Recommendation:

• there should be a summary of actions allowed.

Welcome Screen-Home

Interface problem: HOME: take you where? Why is it at the same level with others?

User problem: home link seems like a function similar to others( balance enquiry, change pin etc. )

Welcome Screen-Home

Recommendation:

Home should be a part of a global navigation menu.

The HDFC bank logo can serve as the home( main screen) pressing

Statement Screen-Main

Interface problem: Page has no heading. Where am I ? Need a stronger highlight at to show it is selected.

User problem: user gets lost and waits for system to load…

Statement Screen-Main

Recommendation:

•The last 10 transaction can be given upfront and the other options can be given separately.

• the statement just gives you a brief understanding of the usage of card. On clicking last 10 transactions, A simplified statement showing transactions can be shown and the user can have the choice to view the details.

•Statement Screen main, should provide summary of what all comes within statement and what does it do.

Statement shows you the ………..

View Details

Statement shows you the ………..

View Details

Last 10 transactionsLast 10 transactions

breadcrumbs

Welcome Screen-Logout

Interface problem: logout... weird placement

User problem: As its placed in a bottom right corner and is not prominent, users will tend to miss the button and maybe just close the page by clicking on browser window. Improper closure of application using browser window might lead to security problems.

Welcome Screen-Logout

Recommendation:

• Logout should be placed at a visible place and somewhere close to the global navigation bar.

• Need a functionality where the user is logged out in case of no activity for 3 mins.

Logout

IPIN & ATM main screen

Interface problem: IPIN and ATM page does not tell user what these things are and what would happen if you click on them

User problem: vagueness and unnecessary clicks. No summary.

IPIN & ATM main screen – by evening

Recommendation:

•A clear distinction can be made between IPIN and ATM PIN.

•Since there are only two functions under the category, the functions itself can become separate clicks. Parent click can be easily omitted.

•A small descriptor can be added for each.

Change IPIN

Alerts

Re-Issue ATM PIN

Statement

My profile

Design of main screen

Change IPIN

Alerts

Re-Issue ATM PIN

Welcome VinayCard No: 1234567897

Welcome to FOREX Card Online

Balance Enquiry

Amount : Rs 12345

Statement

View Details >

View Monthly Statement >

Sl No Item Amount

Showing last 10 transactions

My profile

Something summary Something summary Something summary Something summary Something summary

July 10, 2008 Logout

Balance Enquiry- main screen

Interface Problem: Too much extra information like address, mother maiden name.

User Problem: Extra information confuses, Need separation and a profile view. As some of this information is editable by users and some view only.

Interface Problem: Inconsistency : statement main screen, IPIN and ATM main screen have a blank page on click whereas Balance main screen gives the page.

Balance Enquiry- main screen

Recommendation:

Add a separate profile page having>dynamic information: current balance>editable info: mailing address, phone number>static info: passport number, maiden name, etc.

And keep balance enquiry pasted on all pages of the application.

Balance: 43765

My Profile

My Profile

Monthly statement

Interface problem: Don’t call it selection criteria, more direct naming like : Choose the month you want to view statement for

from ____ to ___ . Do not need two dropdowns. As we know current system date, use one dropdown and grey out the other months... show only last 6 months only...

User problem: Two dropdowns will allow selection outside 6 months and will give error message.

Monthly statement

January 2008February 2008March 2008April 2008May 2008June 2008July 2008

January 2008Select monthDate: 10th July 2008

You can only view

statements for the last six months.

For older statements click here

( Do we have a paid older statement facility. Create that feature page ? )

Choose the month, for which you want to view the statementRecommendation:

The heading monthly statement- past statement can be changed

Show only the last six months in the dropdown.

Vadility of card

Monthly Statement

Card No: 1234567897 Welcome SupriyaWelcome to FOREX Card Online

Change IPIN

Alerts

Re-Issue ATM PIN

Statement

View last 10 transactions >

My profile

Monthly Statement

July 10, 2008

Logout

You can only view statements for the last six months.

For older statements click here

( Do we have a paid older statement facility. Create that feature page ? )

Choose the month, for which you want to view the statement

Balance Enquiry

Amount : Rs 12345

View Details >

January 2008Select month

Submit

Monthly Statement

Card No: 1234567897 Welcome SupriyaWelcome to FOREX Card Online

Change IPIN

Alerts

Re-Issue ATM PIN

Statement

View last 10 transactions >

My profile

Monthly Statement

July 10, 2008

Logout

You can only view statements for the last six months.

For older statements click here

( Do we have a paid older statement facility. Create that feature page ? )

Choose the month, for which you want to view the statement

Balance Enquiry

Amount : Rs 12345

View Details >

January 2008Select month

Submit

Nov 2007Dec 2007January 2008February 2008March 2008April 2008May 2008June 2008July 2008

Monthly Statement – Option 2

Card No: 1234567897 Welcome SupriyaWelcome to FOREX Card Online

Change IPIN AlertsRe-Issue ATM PINStatement

View last 10 transactions >

My profile

Monthly Statement

July 10, 2008

Logout

You can only view statements for the last six months.

For older statements click here

( Do we have a paid older statement facility. Create that feature page ? )

Choose the month, for which you want to view the statement

Balance Enquiry

Amount : Rs 12345

View Details >

January 2008Select month

Submit

Nov 2007Dec 2007January 2008February 2008March 2008April 2008May 2008June 2008July 2008

Change IPIN

Interface problem: Page heading different from menu item through which it is accessed.

User problem: Different naming violates consistency and might lead to confusion.

Change IPIN

Recommendation:

Need to call it change IPIN and not change password.

Change IPIN

Reissue ATM PIN

Interface problem: request pin change? For ATM pin change, does not explain how the new pin will be communicated to the user.

Clicking on left navigation pops a question. Need summary and then a Submit which could lead to above screen

User problem: Might confuse user.

Reissue ATM PIN

2

1

Using this feature, you are requesting for an a new ATM PIN. The ATM PIN will be delivered to you by……..

Recommendation:

ATM PIN should not be confused with IPIN by the user. Therefore, both these should be communicated distinctly and not called PIN

And confirmation should come after a user shows interest for changing the PIN

Are you sure you want to change the ATM PIN?

Yes

No

Cancel or Continue

Takes back to home page

Alerts

Interface problem: No interface present, only an error message

User problem: Odd position of error message. Will be missed by the user.

____

Need to design this whole task flow and screen.

Alerts

Recommendation:

If the card is not in the active state then can it be brought upfront…on all pages?

The demo site not working. Could not see alerts page.

AlertsBalance: 64384Status: Inactive

AlertsAlertsYes, I want to receive alerts…

Questions / Clarifications

Welcome Screen-Home

HOME: takes you where? The current home is blank welcome screen. Should take you to a redesigned summary screen.

Where is Help, contact?Should we add these features- FAQ- FIND ATMs

Welcome Screen-Home

scroller on all pages.?

OK button at result pages

What happens when we press OK ?

Does it take us back to welcome screen ?

The Ok button should be called something else.

Next Steps

• Identify problems once site works.

• Do a heuristic evalution based on Neilsen’s 10 rules

• Expert evaluation based on user’s mental model.

• Report of problems and recommendations.

• Design of screens in MS visio.

Report Format

– Executive Summary

– User Profile : what kind of users the site is trying to address

– Extent of evaluation: Describe which parts of the interface were evaluated and the goals of the evaluation.

• End /