Discover the new CUCollaborate SEG Analyzer Tool through a behind-the-scenes look. Learn about the genesis of the app as well as how credit unions can utilize it to its fullest potential.
What is SEG Analyzer?
The purpose of the SEG Analyzer Tool is to allow federal multiple common bond credit unions to benchmark their SEG addition activity against their peers. It also visualizes growth measures from call report data.
How It's Made
I built this app using my favorite programming language, R. I used a package called Shiny, which makes it easy to build interactive web apps straight from R. I also used a package called ggplotly, which allowed me to make interactive graphs powered by the Plotly library. Styling was done using in-line HTML and a custom CSS stylesheet.
If you’re interested in seeing more about how this tool was built, I did a live stream on CUCollaborate’s Twitch page while I was still in the building process. I went through the basic infrastructure of the app and then live-coded all the graphs while listening to feedback from the audience.
There were a few key design choices made during the development of this app, the first of which was the color palette. Because color is the key to understanding all of the charts, I had to choose a palette that was colorblind-friendly in order to ensure that even those with color deficiencies could find this tool useful. I started with a few shades of blue, because blue tends to be a very colorblind-friendly hue, and then selected colors that were nearby on the color wheel like green and purple. To evaluate my color choices, I ran them through a tool called Viz Palette which simulates different types of colorblindness on your color palette and gives feedback about colors that may be too similar.
Another design choice I had to make was how to style the plots. I opted for a more minimalistic, dashboard aesthetic in order to prevent the page from looking too “busy”. Instead of putting a legend on each chart, I opted to generate a text legend above each section which shows the names of each credit union in their corresponding color. In an effort to make the charts as informative as possible, I made them interactive with tooltips that show each value when you hover over a point or bar. There are also other features of Plotly like zoom and pan which allow the user to interact more with the graphs.
To learn how to get the most out of this tool, watch the demo video below.