Hang Seng Bank Website redesign

This is an exercise taken from the book Don’t Make Me Think, Chapter 6 : Street Signs and Breadcrumbs by Steve Krug.

Here, I examined the Hang Seng Bank website and took it through Steve Krug’s acid test for web navigation.

Original Site (link)

image

Parts Identification

image

What’s wrong with this?

The global navigation doesn’t emphasize which section is on mouse over.

“You are here” indicator is a highlight in the global navigation (in this example, “Personal”), but doesn’t determine the specific subsection where the user is.

User login is a complicated two-step process with the user required to click Logon first before being able to input username and password to actually login.

My Version of the Site

image

What I did

Fixed the global navigation to highlight mouse overs.

Added the page name, “Private Banking” with the necessary breadcrumbs to help users determine where they are.

Labeled the local navigation to emphasize these were services under the current page.

Removed one step from the login process by having the form ready to be filled up in the page.

Typhoon x Typography

The howling wind brought by Typhoon Glenda woke me up 5am on Wednesday. It shut down the power supply for the whole Metro Manila, hence I was left digitally handicapped.

I chose that time to practice some typography instead.

Game of Thrones references are a must! 🙂

I’m thinking of continuing a series of this for the rainy season, adding to the collection every typhoon/storm day until I exhaust all the GoT house words into something rain oriented.

Yay or nay?

Cross-posted from my Tumblr.