Fin24: Dashboard

by Emil · February 8, 2012

The Fin24 Dashboard is an online application aimed at helping users make better investment decisions in a virtual environment. Its main goal is to educate the man on the street about the simplicity of online trading, and open up the possibility of eventually earning additional income through financial investments. It allows access to the same intel as professional investors whilst also creating a platform to compare notes with like-minded investors.

The Dashboard is available in two price points: Free and Premium. Anyone who registers on the Fin24 site has instant access to start virtually trading stocks on real companies, following other traders, and profiling their trading style to identify which kind of trader they are. Premium users can, for a monthly fee, access additional information provided by industry experts, define unique parameters when screening stocks and many more interesting features.

The system includes social elements, allowing the user to share their activity within the application and on Facebook or Twitter. There is also a gaming element built into the game, so users compete with each other for top spot on the leader board.

Fin24 Dashboard marketing page

Extensive testing and iteration went into the UX and IA phase of the application, as there were many factors to consider – and as with any product being built in a large corporate environment – many stakeholders to please. It was a great experience going from initial ideation stages, through concepting, user flows, wireframes and prototypes, to finally crafting the actual user interfaces.

The first steps were to identify the various sections to be featured in the app, as well as pinning down the feature sets of each section. The main sections identified were:

Dashboard: The central information resource to the app.
Portfolios: An in-depth view of various trading portfolios a user has.
Watchlist: An overview of instruments the user would like to keep an eye on
Profiler: Allowing the user to identify their preferred style of trading.
Stock Screener: Allowing the user to screen and select stocks according to very specific criteria.
Guru Analysis: An in depth analysis on stock behaviour as opined by some of the worlds to traders, including Buffet, Piotroski, Lynch and many others.

Fin24 Dashboard - Profiler

Once we had identified these sections, we set about pinning down the feature sets for each one, always taking into account how these would interact with each other across the system. Besides searching and adding instruments to a users portfolio whilst in the Dashboard environment, we also created the ability for the user to view an instruments’ index and add it to their portfolio or watchlist from anywhere on the Fin24 site.

Fin24 Dashboard - Watchlist & Portfolio

The Guru analysis allows the user to access in depth information provided by industry experts with various trading styles, all tailored to the types of instruments a user might have in their portfolio.

The Stock Screener is a unique tool, in that it allows the user to dynamically filter various parameters in order to identify and select the instruments most suited to their portfolio. The screener was loosely based on systems already available online, however the crude nature of these systems made them very unusable to normal users that do not have much trading experience. We therefore set about creating a friendly and fluid user interface, that allowed the user to interact with the tool in a very intuitive manner, through sliders and and drag and drop features.

Fin24 Dashboard - Stock Screener

The application launched in October 2011, and currently enjoys a user base of over 32 000, 23% of which are registered as premium members. The development of such a large application is always iterative, and improvements are being made on a daily basis – however the foundation has been laid for a very engaging and intuitive system that acts as a great agent to educate users about how the financial markets function.

Fin24: Style Guide

by Emil · February 8, 2012

One of the first problems I encountered after joining Fin24 in June 2011, was that there was no defined style across the whole site. Crucial elements that were featured in various disconnected sections on the site were completely inconsistent from one page to the next.

Creating a style guide was something I have always wanted to do, and this became my pet project during my time at Fin24.

Fin24 is part of a much larger agency – Media24, and as such, the site has become very laborious to manage. A case of too many chef’s in the kitchen. Over the past few years, it has become increasingly difficult to manage consistency of design amongst the various “24″ sub-brands. Ownership of the Fin24 brand has also passed between the core News24 team, and the financial services provider, McGregor BFA, creating a stiuation where no-one was sure who would actually be responsible for design decisions. With the newly formed UX team at Fin24, I decided to take a pro-active step at implementing consistency across our own site first, and then feeding this out to the other sub-brands.

One of the first tasks at hand was to create an inventory of all the varying styles on the site. This entailed combing the site for individual elements – for example data tables or tab navigation – and identifying how many variations there were for each of these elements.

Once this had been done, I was able to categorise all the elements, identify the strongest variation of each, and then optimise the UX for each, thus creating a “1st prize” version of each individual site element.

Finally I set about creating the document. Taking influence from the BBC Experience Guide, I divided the guide into categories, including:

Logos & Colour
Typography
Site Navigation
Page Furniture
The Grid
Box Model
Image Sizes
Tables, Charts and Tab Navigation

Through these categories, I was able to identify all the major elements used across the site, and define key design factors for each.

Particular attention has also been given to restructuring the site to a 960px grid, which was not adhered to in the previous design.

The style guide has now been handed over to the develpment team, and a phased process has been started to implement a consistent design across the Fin24 site.

Fin24 Style Guide - Logo and Colour

Fin24 Style Guide - Typography

Fin24 Style Guide - Site Navigation

Fin24 Style Guide - Page Furniture

Fin24 Style Guide - The Grid

Alex Koutny

by Emil · December 9, 2011

_The Client

A L E X K O U T N Y is the latest project by Alexander Koutny of distilled distinctive wearable pieces available exclusively through A L E X K O U T N Y . C O M
This project is a response to homogenous overly constructed products. Simplicity, ease, attitude and elegance without the fuss.
Alexander Koutny is a Fashion Designer based in New York City.

_The Brief

The brief was to assist Alex with the technical set-up of his online shop. Developing the store on the Shopify system was a first, but very pleasant experience. I also provided consulting on the architecture of the site layout, along with extensive input on the UX elements of the site. Keeping with a very minimal layout, it was important to create as much focus as possible on the important ‘Call to actions’ whilst at the same time keeping the layout simple and uncluttered.

The site is now live at www.alexkoutny.com

Alex Koutny

Gloo: Allan Gray

by Emil · December 7, 2011

Allan Gray Home Page

_The Client

Allan Gray is the most highly regarded Asset Management firm in South Africa. They provide unmatched client service and have a strong focus on creating meaningful long term relationships with their clients. Their philosophy is based on long term investing, and as such, the over-arching attitude to anything Allan Gray undertakes is to investigate all possible solutions, in order to be certain that the decision taken is the absolute best for all possible outcomes.

Gloo has a long standing relationship with Allan Gray, having played in integral part in building the online presence that the company currently enjoys. Amongst various other side projects, some of the major improvements successfully launched whilst I was directing the account include:

_My Role

I was the lead Project Manager on the Allan Gray account, managing day to day maintenance and development tasks, whilst also overseeing larger projects and campaigns. I was specifically placed on the Allan Gray account to provide guidance and insight to UX and Information Architecture best practices, as there is a strong focus with this client on creating the most effective communication solutions possible.

_EQC

Allan Gray delivers a quarterly printed magazine named the Quarterly Commentary, providing insights and reports on upcoming trends and areas of interest in the world of investment. This magazine also provides a great window into the world of Allan Gray, and how their investors are managing their clients money.

As part of the drive to increase Allan Gray’s presence online, Gloo worked together with the client to bring this publication online, in order to reach a far wider audience than previously possible with only the print edition. A customised landing page was built for the EQC, where the user can centrally navigate through all the articles of the current release, or also browse through an archive of previous publications, dating back to 2000.

_Home Page

The Allan Gray home page is the first point of contact a potential client might have with the brand online. It is therefore critical that this page act as a conduit to the rest of the site, allowing both first time users, and returning guests to quickly access the information they are looking for.

With this approach in mind, Gloo and Allan Gray consistently worked together to optimize each element on the home page, carrying out continuous A/B testing and direct user testing. A strong focus was placed on enabling the user to reach their desired information with 1 click wherever possible.

_News Hub

With Allan Gray’s increased popularity, it became evident that they needed to share and update their clients on a more regular basis. To this end, Gloo was briefed to create a central repository that users could access to find all the latest news about Allan Gray.

The solution was to create a page that features dynamic slides, enabling the user to easily navigate between email newsletters, reports, alerts and the latest EQC

_Marketing Campaigns

A further step that Allan Gray took to furthering their online presence, was to expand their advertising reach to include online advertising. Being a naturally conservative client, the process included a lot of education on Gloo’s behalf to illustrate just how effective online ad campaigns can be, whilst at the same time, coming up with concepts that would continue to push the boundaries of what is possible with rich media and banner display ads.

The result was that Gloo produced some of the most unique and immersive banner campaigns, allowing the user to engage and interact with the brand, while at the same time not being intrusive or negating the exclusivity that Allan gray has become known for.

Allan Gray EQC

Allan Gray NEws Hub

Gloo: Howzit MSN

by Emil · November 17, 2011

[video type="vimeo" id="28144603" width="540" height="400" /]

_Brief

MSN commissioned us to virally position its new portal, Howzit MSN, as the leading online news destination for South African Internet browsers and to communicate the variety of international and local content Howzit MSN has on offer.

Intended Audience: Existing Howzit MSN users and all web users who search for news content online. The target age group is roughly 22–45, with an even male/female split.

_Role

My role on this project was Project Manager whilst providing insight and guidance to the User Experience and Information Architecture of the campaign.

_Awards

Silver – 2011 Loerie Awards

_Solution

We created ‘The Insider’, a viral spoof news campaign, originating from a stand-alone microsite that allowed people to create scam stories about their friends and spread them on the real MSN platform.

After reading these outrageous, but lighthearted stories, those scammed, as well as those just enjoying the scam stories of others, would also be enlightened about the wide breadth of real news stories on offer on the growing MSN portal.

The microsite was presented in the format of a sensationalist news channel called The Insider. After being directed to it by means of a banner or Facebook post, visitors were requested to select one of four fictitious news scandals covering a range of Howzit MSN news categories. They then automatically logged in via Facebook Connect, selected the person they intended to place at the centre of the scandal, chose a suitable photograph from their chosen friend’s album, and finally, provided a few personal details about their friend.

They were then able to preview the scandal, which was personalised to include their friend’s information and picture, live on the real Howzit MSN site. Once they were happy with the result, the scandal was posted to the relevant individual’s Facebook wall and all that remained was to sit back and enjoy the response it received as the article was shared via Facebook, twitter and email.

To give an unusual and added depth to the viral campaign, those scammed could continue with a reprisal component, without the knowledge of the person who scammed them. This gave the friend who had been at the centre of the spoof news scandal a chance to have the last laugh. If they took up the offer, a spoof email was sent by MSN on their behalf to the individual who initiated the prank.

The outcome was a humorous, but brand-relevant experience for all involved, as well as a great viral campaign that helped spread the word about Howzit MSN’s amazing content.

Howzit MSN