Raindance

Some of my work at Raindance, an economic system by CGI. A lot of new design has not been released yet and cannot be shared here for confidentiality reasons.

I have been working at Raindance for 4 years and a majority of the work has been about finding a way to make the system more consistent. Raindance is a large system with many different modules that have been developed over a long period of time and in different ways. That has made it very difficult to change the entire design over one night, so I have worked on making small improvements in the current interface, the design for new modules and interfaces, and created a style guide for those new designs.

Raindance users are mainly in the public sector (schools, hospitals etc.). When doing research, I have been able to have some contact with our users, but working closely with support staff, SME’s and product owners has helped me understanding the users to some extent as well.

WCAG

About 2 years ago I was notified that we needed to try and meet the WCAG standards. A difficult task to correct quickly in a system like Raindance with so many pages and different modules. However, an issue that was fairly easy to correct was the color in the user interface. The colors did not meet the contrast requirements for WCAG and we also had some shade differences of the primary color. I made a suggestion for new colors based on the current shade. For example, making the contrast higher and making white text visible enough on top of the new color. This had been an issue in a lot of places with the previous color. Some pages also used a dark gray instead of black as text color, so that was also corrected to make everything look the same, as well as for some of the white text that was not completely white.

The color change proved to be very appreciated by one of our users with a visual impairment, and his job tasks were therefore easier to perform. My coworkers could also see the big difference in contrast and higher visibility that the color change had made.

A New Style Guide

For the new modules developed we needed to think about making the UI/UX consistent from the start and Angular Material design was chosen as the new developer platform. Based on Material design (2nd edition), I made a style guide for our new look and with our new colors.

We found that we needed to tweak some components to fit our user needs better. Data tables for example, a component that is widely used in Raindance. It needs to be able to do a little more than the standard component in Angular Material. So a component library were we could reuse the same components in the code and with our styles was started by one of our developers. This would also result in that we could make sure that the system remained consistent in its UI.

Raindance have been using striped rows in the data tables for a long time, and this is something the users has gotten used to. So when speaking to our users and SME’s we found that the users still wanted to have this as a lot of the data tables contain a lot of data and it would make it easier to find the right information.

The filtering function has also been quite complex to make it easier for users with a large amount of data to only see relevant information. We still wanted this to be possible with the new component, but put the filtering function outside of the data table for easier access. Previously the filtering had been integrated as a right click on the column header. A hidden interaction that was hard to locate.

The work with the style guide and the component library will be an ongoing process in order to keep it up to date, if we find that we need to tweak some of the components or create new ones. It will take some time before Raindance new look will have been utilized in the entire system, but Angular Material is slowly being implemented in more and more places.