Hi, I am Charan

Experienced UX Designer with software development and business expertise

Cybrilla's
Data Visualization

Holistic Design

Project Overview

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

White-labelled apps

We traditionally provided APIs to fintech clients but saw an opportunity to serve successful financial firms without in-house development teams. To meet this need, we created white-label apps that clients could easily brand and deploy. Initially, onboarding was simple—clients provided their colors, and we adjusted titles and buttons. However, the introduction of data visualizations introduced new challenges.

DATA VISUALIZATION

Our clients served both finance professionals and retail investors, making clear and intuitive financial data visualizations essential.
Data represented visually
Data represented visually
The choice of graph depends on the data being represented. I used a donut chart to display different investment types, as its segment lengths provide a clearer sense of proportions than simple pie-charts.
A donut graph
A donut graph
To show changes in investments over time, I used stacked column graphs. Placing columns side by side highlighted both theproportions of each investment type in a given period and how they evolved over time.
A column graph
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, in dark mode
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.
The colour sequence
The 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.
The bright pallette in light modeThe bright pallette in dark mode
The screens using the bright pallette
The muted pallette in light modeThe muted pallette in dark mode
The screens using the muted pallette
The neutral pallette in light modeThe neutral pallette in dark mode
The screens using the neutral pallette