HomeAbout MeMy PortfolioMy Articles
Data Visualisation

This project demonstrates how my entrepreneurial and software development experience helps me anticipate the business' needs and provide designs that can be easily implemented.

While-labelled apps

Our company traditionally offered APIs to fintech clients, but we identified a significant opportunity with successful financial companies lacking in-house software development teams. To address this market, we created "white-labelled" apps that clients could easily brand and deploy. Previously, onboarding was straightforward—clients provided their colours, and we adjusted the colours of titles and buttons accordingly. However, the introduction of data visualizations complicated this process.

Data visualization

Our clients' customers could be anybody. Therefore, a graphical way to visualize financial data was absolutely necessary.

A mobile screen showing graphs
Data represented visually

The kind of graph that one chooses is dependent on the data that is to be represented. I used a donut graph to represent the different kinds of investments. By focussing the attention on the segment lengths rather than on the area of the segment, the donut graph gives the user a better idea of the proportions.

A donut graph
A donut graph

For showing changes in investments over time, I used stacked column graphs. Placing the columns side by side not only conveyed the proportions of each investment type within each period but also allowed users to see how these proportions evolved.

A column graphs
A column graph

Of course, we had to detail what these graphs would look like in dark mode. The colours were adjusted to suit the dark backgrounds, and are therefore similar but not the same.

A mobile screen showing graphs
A mobile screen showing graphs, in dark mode

Anticipating Business Needs

As our company set ambitious targets to scale from onboarding a few clients a year to hundreds, I recognized that our existing, manual approach to brand customization could quickly become a bottleneck. My entrepreneurial experience taught me to look beyond the immediate design tasks and consider broader operational impacts. I understood that to support this level of growth, our processes needed to be efficient and scalable. Instead of focusing solely on the visual aspects, I foresaw the potential delays and strain on resources that our small team would face without a streamlined solution. This perspective allowed me to develop a proactive strategy with preset colour palettes, balancing the need for brand customization with operational efficiency, and ensuring that design wouldn't slow down company growth.

Designing for scalability

To avoid the inefficiency of customizing colours for each client individually—an approach that would have quickly overwhelmed our small team—and the drawbacks of a single, generic colour scheme, I developed a balanced strategy to develop three colour palettes: bright, muted, and neutral. This approach balanced customization and efficiency, providing clients with colour themes that matched their brand while minimizing manual design work. The preset palettes streamlined the onboarding process, ensured visual consistency, and offered clients a tailored look that preserved brand integrity. By using this scalable solution, we supported our company's rapid growth goals, delivering quality and speed without compromising our design team's resources.

Three colour palettes in light mode
Three colour palettes in light mode
Three colour palettes in dark mode
Three colour palettes in dark mode

Addressing implementation needs

With my software development experience, I was mindful of implementation details. For example, if a developer selected colours randomly from a palette, we could end up with adjacent segments in a graph sharing the same colour, which would reduce visual clarity. Additionally, users naturally pick up on patterns over time—such as recognizing that the largest segment is usually a specific colour. A random colour selection approach would disrupt these familiar cues, making the visualizations less intuitive. We also needed a way to handle cases where a graph required more colours than were available in the palette.

A colour sequence
A colour sequence

To address this, I devised a sequenced colour approach. By setting a defined order for colours, we could cycle through the palette from start to finish, simply repeating if more colours were needed. This method ensured that adjacent segments would never be the same colour, and it reinforced consistency, allowing users to discern patterns within the graphs over time. This approach was not only user-friendly but also easy to implement programmatically, eliminating the need for ongoing design intervention.

Conclusion

Although my task was to design the visualizations, my proactive approach ensured that our small team wouldn't become a bottleneck. Leveraging my entrepreneurial and software development experience, I developed solutions that scaled, supporting both rapid onboarding and consistent user experience.

A colour sequenceA colour sequence
Using the bright palette
A colour sequenceA colour sequence
Using the muted palette
A colour sequenceA colour sequence
Using the neutral palette
Copyright © 2024 Raja Charan Grandige. All rights reserved.