SBI Homepage Re-Design (12 Column Grid)

Color Theme

Typography

Header
Logo: As you saw in design Logo placement on the left. It is as per market standard and catch customer
attention there.

Top Blue Strip: I put low level menus in the top strip. Gave 50% percent attention to them. Also on right
showing phone and email details because I think if customer have some problems related
to service he/she first find contact details from the website. So it is very visible to anyone.

Menu: On right side of the logo I have added main level menu items. Menu also very visible to every
customer and easy to find any services from there. I have highlighted first menu item on hover or in
active case.

Search & Login: Exact beside the menu I have put Search. When click on that icon search box will
be appear in creative or animated way. Login is most important service of the customer end so it is very
prominent and catch customer attention first.
Body
Banner: We can add types of 4-5 banners basis on important service provide by bank. Banner size was
smaller in height because when customer come on the website at very first time, he/she should
be see more info on display area.

Bank Interest Highlight: Exact below the banner section interest rates highlighted in big font. I think
these rates are very important and one of the important services of which SBI bank provided.

Offered Services: If you look at in existing website SBI introduced there other services inside the
carousel. Here my thinking is why we hide the information? That’s why I put 2 rows, 6 items in a row
(Showing as much as possible). Then give a button for "More Services". Just want to save clicks.

Announcement: Announcement put as button which floating with screen. When you hover/click the
area will be slide out from the right and information shown inside. This is important section so it is
always visible to customer.

Footer Banner (Above Footer): Customer should be know the service provider also have mobile app.
From this section customer will know how the app work, which services app provide, what is the
installation process etc.

Footer
Footer area should be bigger like this. When customer scroll down and come to bottom of the page and
if he/she difficult to find info in whole website, the footer area always helpful to navigate website
pages. Also on right contact details shown. It's better for customer to find contacts from header and
footer. (Footer area is depend on how many data we have for close the webpage.)