Brand Refresh

THE STORY

As a brand, Ruvixx had little visual consistency beyond their orange logo and sans serif fonts. My first day as their designer was spent poking around their platform and website to familiarize myself with their current interface elements.

The website featured a more modern feel with its use of bright colors and abstract geometric pattern, while the platform looked dated with its use of gray gradients. While both had issues with legibility, the style inconsistency is what I wanted to focus on first.

DESIGN GOALS

  • Find complimentary colors to use with their brand color (orange)

  • Find subtle ways to add the brand color into the interface and website

  • Create a style guide that users find delightful, while maintaining an enterprise presence

The Process

COLOR EXPLORATION

The main brand color for Ruvixx is orange, so I began putting together color compositions that would act as a good base color. I settled on dark colors to use for the background for the main navigation, side navigation, and some content area. For text heavy pages, I reserved a light gray or white background for legibility. I also created a polygonal vector pattern to overlay the dark backgrounds, as a nod to their original styling of their website. I found it helpful create some rules of usage for their orange brand color to help focus my efforts.

  • Rule #1: Orange will be reserved for hover or selection states for links or buttons, special interface notes, and labels.

  • Rule #2: Orange can be used as a secondary color for icons and imagery.

  • Rule #3: Orange will never be used for status notifications within the platform.

  • Rule #4: Orange will never take up more than 5% of the overall interface (with exception to dashboards).

ICONS

One could imagine how dry B2B language can be, so translating certain ideas and business concepts into a descriptive picture can be a challenge. To match the "ghost" buttons I defined earlier, I decided on creating my icons and pictures in a similar line-style in order to product an elegant and lightweight visual aesthetic for the interface.

For the global buttons that would be used across all of Ruvixx, I had to establish a style that could work for both light and dark backgrounds because I designed certain widgets to be dark and some to be light. Using the same colors from the icons, I used a combination of purple and orange to create a cohesive look for all the interface elements in Ruvixx.

LIGHT VS DARK

In keeping with modular design principles, I created a light and dark style that could be applied to all widgets. Since we weren't sure what future features may call for which style (dark widgets on light background or light widgets on dark backgrounds), I wanted to provide the engineering and product team with the ability to pick and choose which widgets would need which styling depending on the page background.

The challenge here was picking colors that could work on both the navy background and the light gray background. I found myself limited to brighter colors, which could be overwhelming for graphs with a lot of plots.

Impact

Overall, the final design has scaled better than I expected across the whole platform. Through all the navigation changes, feature introductions, and restructuring, the color scheme I defined at the beginning of the cycle has more or less stayed the same. The success of the visual design comes from how I’ve been utilizing contrasting colors to section out pieces of the interface from one another.
I wanted to minimize the time the user has to spend figuring out where the conventional pieces of the UI are located (such as navigation) so that the user can focus on the current task at hand. Since the actual processes are still complicated, it’s important to make other basic processes as simple and efficient as possible, and I believe that the deliberate sectioning with the colors helped achieve that.
 

Case Studies

A SHOWCASE OF MY WORK AT RUVIXX
Signals
Forecast Tool
Brand Refresh
  • LinkedIn - Black Circle

Connect with me on LinkedIn!

© 2019 Toni Chen. All rights reserved.