Investor Hub - Case Study



The challenge

Investors and stakeholders wish to be kept updated about the latest news as well as the performance of their investments. It is challenging for an investor to keep browsing the web looking for different resources of information and feed in order to find the proper data.

Usually, JSE listed companies publish their financial reports on their investor relations section of their website, or on their annual integrated report once per year; on the other hand, they publish SENS announcements on their corporate website; in some case, the investor has to look for third-party resources to find an updated share price feed.

Based on a conducted market research, the team found that it was not an easy task to gather basic investing information about certain listed companies, and in some case, it was impossible to find what we were looking for.

The solution

Create a centric user interface that encapsulates all the information, documentation and feed that investors need and look for to maintain and sustain their investment.

My role

My role consisted of the following:

  • Conduct market research and find gaps in the financial digital experience
  • conceptualise, design and develop a new digital product that caters to the type of clients we served
  • User experience research and analysis
  • UI design, UX research, and Prototyping
  • Front-end development
  • Liaise with web developers, content developers, proof-readers and usablity testers
  • Liaise with the project manager
  • Usablity testing & UAT
  • Present and sell the product to the client

The approach

The aim was to develop this initiative as a product to cater for JSE listed companies, helping them to resolve the lack of accessibility issue, maintain their investor' trust and enhance their online experience.

The UI of the app should be clean, neat and professional, also very minimalist to shift focus on important data and charts. It would be built around tabs allowing users access to different sections and types of data, download PDF, get the latest feed from third-party APIs, latest share price, charts and more.

The main features of the app:

  • Mobile and desktop ready
  • Single-page app
  • Performant and fast
  • Accessible and usable
  • Offline possibilities/PDF
  • Friendly backend to allow the client control
Basic concept of the information architecture of the App

The process: UX Research and conceptualisation

After determining the gap and exchanging ideas with the team, I set up ideation workshops with the writing team and the financial analysts, gathering more information about our clients and their current challenges in order to determine a perfect Customer Journey Map

We categorised the information, that investors need, into clusters (Tabs) with a seamless information architecture (Reports, SENS, Feed, Presentations, Media etc..); the use of tabs is a very natural design pattern in this context.

I started working on few high-level concepts that I shared with the team, and could collect many valuable inputs and ideas to make it more usable, this has served as a preliminary step in usuablity testing process.

Shortly after that, a final structure of the app started taking shape, and a wireframe was created.

Once the wireframe was ready, I needed to have a closer look at the functioning of the UI; consequently, I have put together an interactive prototype with actual content; then, I iterated with usability testers, whom at that phase, were colleagues from different departments; the aim was to gather first impression user interaction, and enhance the layout, if need be.

Basic wireframe of the UI

UI Design

The UI is targeted to be used by investors of all ages and backgrounds, but focused on Boomers, Generation X and Millenials; The layout had to be minimalist, clean and professional.

Readability is very important in this context, therefor, I chose a robust sans-serif typeface, "Roboto", that is easy to read and heightens the modern look.

Negative space was used to ensure enough breathing room. Tabs, modals, and accordions have been used to arrange the information and enhance accessibility.

The app had to be fully responsive and adaptive to network resources for optimal performance. Mobile design was the starting point.

A dark look of the UI

Web application development

The app is very light, it uses Bootstrap 3 as a skeleton and runs with jQuery.

The app's loading time had to be considered to accommodate slow networks.

Considering that the app featured external feed and sources of content, AJAX loading has been adopted to enhance single-page app experience, allowing API queries to happen smoothly in the background while users consume other information at hand.

We ran few UAT tests and gathered inputs from users, that allowed us to enhance few elements in the functionality and sort out few bugs.

Wordpress integration had to take place at a later stage, allowing the client to upload documents and manage certain fields of the front-end easily.


Here is a list of tools that have been used throughout this project:

  • InVision Studio
  • Adobe Indesign
  • Adobe Photoshop
  • Balsamiq Mockup
  • Shutterstock
  • NotableApp
  • Atom, Insomnia, LAMP Stack

Pitch and sales

We could determine a few of our clients, who could benefit directly from this app in the short and long term; We, therefore, planned to include the Investor Hub as part of our next pitch.

We had selected a client at the time who was open to discussing new solutions, we adjusted the look and feel of the UI to suit their corporate brand guidelines since the app would have to be hosted as a part of their online cluster.

The Investor Hub concept was presented by myself to the executive team of SPAR South Africa, in their Headquarters in Durban, with their new integrated report pitch, that me and the team were working on.

The client was very happy of the outcome and currently using the app on their investor relations website.


SPAR South Africa

Live app

PS. Currently, the App is managed by a third-party service provider, hence the design alterations.