Bank Website

Prototype was appointed to re-design the website for Mashreq Bank, one of UAE's leading financial institutions.

The bank required a new web presence to meet the increasing demand for online communication between the bank and its customers, and provide easy access to information on a wide variety of products and services.

The Challenge

Mashreq Bank was operating multiple websites – the main site and 6 sub sites for different product lines.


The job required the creation of a common layout across the different sites, so the bank's online presence would appear as one site, without compromising on the independence of the content and brand of each service.

The website had to be a tool that would allow consumers to navigate through a great deal of information easily, and guide them through the process of making product choices while also promoting other products.

The site was to be delivered in English and Arabic, and localized for 5 countries.

‍

Gallery

The Design

We implemented a modern, responsive design capable of presenting large amounts of content in an attractive way, and closely followed Mashreq Bank brand guides.


We designed common user interface elements such as tabs, lists, menus and sidebar widgets, and introduced a smart navigation solution for inner pages, that appears when the user scrolls down the page.

This navigational element provides quick and easy access across each section, with focus on call to action, and social sharing capabilities.

Further, users can search on any page for the exact content they are looking for with a search function that provides suggestions as they type.

The process

We restructured the site completely, reworked the site architecture and content structure.

The design process started with detailed wireframing and analysis of the existing content and the wireframes went through several revisions and optimization before we started the graphic design.

Then the concept for the site was developed, followed by style guides for all UI elements as well as detailed states for hover, menus, and search behavior.

We designed the core inner pages then continued to roll out the same design structure across the 6 microsites.

‍

Technical notes

The designs were converted into compliant HTML and CSS, and thoroughly tested before being implemented the content management system.

The front end was developed in a way that the same HTML could be used for both English and Arabic pages – a more challenging way to work, as we had to take into account the right-to-left (RTL) flow of Arabic and the LTR flow of the English views.

‍

The result

A benchmark site that discretely incorporates 6 microsites based on a common design theme, and positions Mashreq Bank as customer-focused and user-friendly banking website, all in line with the bank's vision to “. . . provide our customers the most rewarding banking relationships.”

The site received great feedback from the both the client and customers of the bank.

‍