Here’s how we transformed a complex financial data set into a fast, responsive, accessible graph that helps users make the next smart move with their finances.
Hello, youve stumbled into the old Cogblog archives
We've switched our blogging focus to our new Innerworks content, where tech community members can share inspiring stories, content, and top tips. Because of this, old Cogworks blogs will soon be deleted from the site, so enjoy it while you can. A few of these might refer to images in the text, but those have been deleted already sorry. Some of these subjects will return, some aren't relevant anymore, and some just don't fit the unbiased community initiative of Innerworks.
If you'd like to take on this subject yourself please submit a new blog!
Farewell Cogworks Blog 💚
Data visualisation today.
Research has shown that 65% of us learn visually, meaning we'd rather read a high-quality infographic full of pretty colours than reams of pointless text.
Data visualisations like graphs, infographics, and interactive animations take advantage of our natural preference to learn visually, helping to uncover patterns, connections, and insights, ultimately driving brand credibility and better business decisions.
Building a powerful and positive data visualisation.
Following Bestinvest's website launch, we asked Cogworks developer Ahmed to walk us through the build of the Grow My Money tool, an animated chart designed to help users make informed decisions about their wealth!
Try Grow My Money for yourself.
See how your money could grow.
The Grow My Money tool is a super-slick way of showing you the expected outcome of certain investments over a specific period.
This sleek UI was generated through collaboration and built to merge with a complex set of data in the form of calculations that work out the financial figure that a user starts and ends with and estimates to work out the expected risk factor and its associated values.
The task.
To accompany a similar feature on the logged-in part of their website, Bestinvest asked Cogworks to deliver a tool that works seamlessly with their existing charting libraries.
We re-engineered the Grow My Money tool using their requirements as a polished component with exceptional user experience.
The technical stuff.
The Grow my Money tool is powered by Javascript, ReactJS, and Styled components (CSS in JS); it uses TypeScript, making the device high-quality, scalable and a dream to debug and test!
If you're the technical type with great attention to detail, you'll notice the smooth UI of the graphing tool's responsive code to create precise units of measurement.
The animation of the tool is powered by features offered by the charting library out-of-the-box.
During the build, our development team researched and trialled the best way to integrate Bestinvest's chosen chart library with the tool, putting their custom logic skills to the test.
The results.
The result is a responsive tool with a smooth user interface that uses BestInvest's technology (with no compromise on performance). Plus, it has excellent usability on touchscreen and mobile devices, which is no easy feat with complex charting libraries!
Need to make a complex set of data look good?
Chat with us today and discover how Data Visualisation could work for your users!
Innerworks and Cogworks are proud to partner with Community TechAid who aim to enable sustainable access to technology and skills needed to ensure digital inclusion for all. Any support you can give is hugely appreciated.