Financial Widgets

Financial Widgets

Overview

Gulf News a daily English language newspaper published from Dubai, in the United Arab Emirates appointed Prototype to design financial widgets for gulfnews.com one of the leading news websites in the region.

The widgets had to be in line with the gulfnews.com design guidelines and be optimized for a high traffic news website receiving millions of impressions per month. The design process started with wireframes which would outline the overall functionality of each widget and was followed by a detail design phase which focused on a highly integrated and optimized design, especially from a load time perspective. While some elements where derived from the design guide of gulfnews.com, the design required attention to detail and pixel perfection across different web browsers. The user would also have to access the information as fast as possible using rollover behavior and AJAX search.

‍

‍

How it works

Realtime Updates

Users start with an overview of the top financial indicators in the region, including regional and international markets, commodities and currencies.

By interacting with the widget, users can go from a simple overview, to a chart, to complete detailed information about any item. Users can also search stocks from the Dubai and Abu Dhabi markets, by simply starting to type a stock symbol or company name. Full details of every stock are available with a simple click.

‍

‍

‍

‍

‍

The Process

Technical Implementation

The client had a clear idea of what financial information had to be displayed on each widget.

Since this was defined, we started the visual design process and in parallel, we began the programming of a server proxy application to consume and process the data feeds coming from the financial data providers in the most efficient way. After the designs were approved, a functional XHTML mockup was created and tweaked according to the client's suggestions while the backend was being finished. Finally, the XHTML was integrated with the backend proxy and the Javascript UX was finalized, to be ready for a beta test with the client. The beta version was refined into a production-ready version and launched as per the planned dates.

‍