-
Type
Web Platform, Development
-
Sectors
Financial, Investments
-
Technologies
Wordpress, Custom Wordpress Theme
Look Beyond The Ordinary
Visio, a South African-based investment management firm. The company embarked on a full-scale rebranding exercise and part of this rebranding project was the re-design and the development of their website, based on their CI.
As with any financial company, its online presence and information portrayed to stakeholders is highly important, not only from a brand perspective but also from the actual information and financial data.
We teamed up with Firedog, a highly experienced branding and design agency. Firedog's role was to design the new website, encompassing the CI and incorporating branded elements.
A BESPOKE DESIGN NEEDED A CUSTOM THEME
Elemental's role was to utilise these designs and build the website as a pixel perfect custom WordPress theme. Why WordPress and why a custom theme you may ask?
Firstly WordPress was selected as the Content Management System (CMS), as this allows Visio to add and change content as they please.
Now for the custom WordPress theme. Well, this was the only option really, as the design was so unique and custom to this project that the only way to achieve the end result was to develop our own bespoke WordPress theme.
To be honest, we prefer developing our own WordPress themes rather than use out of the box purchased themes. There are so many benefits to going this route here.
CONTENT MANAGEMENT MADE EASY
With any website, over time content will change and grow. Visio is a fairly content heavy website and we developed the website in such a way that the power of content management is granted to Visio's website administrators.
As we mentioned before, the website has been developed as a custom wordpress theme, which meant that our best solution for providing the best content management functions was to use Advanced Custom Fields (ACF). For those of you who don't know what we're talking about, ACF is a WordPress plugin that allows us to add fields for any data element or content item, this allows users to take full control over the content management.
The implementation of ACF particularly applied to pages that were very content heavy and pages that had content items that were segmented and changed often (for example projects, our team, etc.).
Visio also contains highly technical financial data that is used in the plotting of fund performances in the form of graphs. This data changes and needs to be updated often and so we empowered Visio by providing them with powerful data uploading tools that make it easy and quick for them to update these financial metrics quickly.
FUND INFORMATION IS BEST DISPLAYED VISUALLY
It's no secret that financial information contained in Excel Spreadsheets can be boring and monotonous to read, not to mention difficult to interpret.
Visio's financial information includes hedge funds, unit trusts and segregated mandates. Investors and stakeholders need to gain access to the financial instrument's data in various shapes and forms.
The fund performances are visually represented with interactive graphs, showing the fund's growth compared to the CAPI Index. The data is plotted over the fund's timeline and allows users to hover and view metrics of fund's percentage performance.
Additional information related to the funds and unit trusts include downloadable fact sheets and monthly returns tables, all in PDF format.
Do you need the services of a solid web development agency?
Companies around the world choose Elemental as their tech partner for the design and development of custom websites, web apps, software, and mobile apps. We work with businesses of all sizes, from agile startups to well-established enterprises, to bring their ideas to life. Let's discuss your vision and explore how we can turn it into reality.
MOVEMENT AND ANIMATION
Movement and animation have become part and parcel of modern websites and they lend themselves to an improved User eXperience (UX).
For the Visio website, this has been incorporated to make the website a bit more polished. Our approach was to incorporate these animations in a subtle manner, that isn't distracting or over the top as that can be counterproductive and annoying for users.
Done right, it gives the website a feeling of class.
The navigation shifts and adjusts as users scroll, making the top navigation more prominent when you're at the top of the page but shrinking it as you scroll down, making it less "in your face".The navigation is also sticky, meaning that it's always present and users don't have to navigate all the way up to locate the menu.
Simple yet effective "back to top" buttons use slick animation to take the user to the top of the page instead of the normal jolt to the top which can be harsh on the user.
Accordions are used fairly often in websites and Visio is no different. With certain pages being quite content-heavy, accordions allow users to open and close sections of content.
The expansion and contraction of the accordions are done with a touch of animation to make the feel consistent with movement in the rest of the website.
INTERESTING FACTS
The graphing requirements were very specific, in order to show and represent the fund's performance in a visual format that is user-friendly and that is consistent with the website's User Interface and the brand's CI.
When it comes to graphing solutions and libraries there are a variety of options out there, many with loads of features and many with restrictions.
After much research and trial and error, we settled on https://canvasjs.com. This powerful library uses HTML5 to allow us to build beautiful graphs and charts. There is ample documentation and is compatible with all major web browsers. The visualisation of data is fast and slick, giving us the end result that we were looking for. Fund performance data is an ever evolving set of financial numbers that is used in the creation and plotting of financial graphs.
We empowered Visio's team to maintain this financial data by developing a document upload system, which allows for the upload of the CSV files.
These CSV files are formatted in a pre-defined format and are saved in specific locations. Once the files are uploaded and validated to ensure that the format is correct. They are used to populate the fund performance graphs which are visible to end users.
Adopting this approach makes it quick and easy to upload the latest financial data, which immediately reflects on the website front end.
Do you need the services of a solid web development agency?
Companies around the world choose Elemental as their tech partner for the design and development of custom websites, web apps, software, and mobile apps. We work with businesses of all sizes, from agile startups to well-established enterprises, to bring their ideas to life. Let's discuss your vision and explore how we can turn it into reality.
Related Projects
Bodyswitch
