Rally Visual Refresh


Enterprise, UX, Visual

Modernizing the Rally UI

Problem to Solve

Once upon a time, the Rally interface used to look like this:

OLD_UI

The monochrome blue tabs and corporate looking interface of the Rally product reminded me of a website from the late 90’s. In 2013, customers had different expectations of what a modern UI should look like. Our marketing group had just launched an effort to update the corporate branding, and our goal was to carry the brand identity consistently across the product. The voice of the new brand projected the confidence, boldness and innovative thought leadership that Rally was known for.

Constraints

Updating the Rally UI was not as simple as reworking style sheets. There were more UI frameworks in use within the product than I could count, and it was not in scope to modernize them all. We had to selectively make improvements that would make the biggest impact on the experience of the product. Major functional changes also were not in scope. Adding a new coat of paint was not going to drastically change the interaction model, flow, or structure of the product.

An initial goal was to visually harmonize the core Rally product with two other applications we had acquired to create a family of branded products. I led the collaboration on the design direction, which extended across the globe to Finland and North Carolina.

Approach

A palette of bright and bold colors had been defined by marketing, which set the tone for the new look. Rally’s enterprise application helps large software companies manage the lifecycle of their development in an agile way. If things are going sideways, status indicators should prompt the customer to investigate. For that reason we chose to design a very neutral and minimal interface that would highlight status and progress appropriately. Color carries meaning, and it should be used sparingly and for a purpose.

colorPalette

The next step was to curate a style tile for inspiration. What does a neutral UI look like? How do the various styles fit together into a cohesive whole? We experimented with a set of visual treatments and iconography until we found a direction that resonated. Ultimately, many of these elements were modified to be even more minimal as the look and feel emerged iteratively. I also built an html style guide defining the various components for developers to reference while they wrote code.

StyleTile

Our customers value information density to an extreme. They want to see all the things and as many of them as they can. To achieve this, we designed a header that made efficient use of space. The proportions of elements on the page and related typography were defined in an annotated wireframe.

blueprint

Web fonts were selected and purchased, including a pictofont that we later customized to render all of our icons beautifully on retina and high res screens. The design was rolled out within Rally to “eat our own dog food” as we iteratively enhanced many of the default screens and apps in the platform. Today, Rally looks more like this:

Learnings

One fine day, we rolled out the changes to our customers. And people, well they just hate change. We collected a lot of feedback from customers that were upset beyond belief. They had the impression that they’d have to relearn everything and it took them forever to understand our product in the first place. The haters hated, but the real learning here for me was to be more diligent in preparing customers for change. If we had warned them in advance, or built anticipation for the new design, the changes may have been more immediately embraced by more of our customer base.

Credits

Wendy Constantine, ux design lead

Many thanks to the collaborative design efforts of:
— Adrienne Klum, ux designer
— Ashly Cassidy, front-end developer
— Grant Miller, designer (marketing)
— David Issa, ux designer