Moving Faster by Starting Over

On learning the true cost of design debt and reimagining RelateIQ’s visual style

Hitting the Limits of Our Visual Style

Relateiq.com homepage. June 2013

The Threat of Design Debt: Why We Needed a Redesign

Formulating a Plan

The entire project took four months from idea to implementation, but the bulk of the design work was done in two offsites and an intensive two-week sprint.

Color: A Company-Wide Exercise

The top color contenders were complementary, bold, clean, and energizing. We used this mandate as a checklist for new colors to introduce to our palette.

Establishing a Shared Experience

Balancing Individual Creativity with Collaboration

The UI kit provided a high-level view of how all the elements would work together. It enabled us to consider the overall visual system without getting bogged down in the literal implementation of the various options.

Identifying the Optimal Path to User Delight

Turning to the Dark Side

Bringing It to Life

Working with Front-End Devs

When assigning names to colors we used the following formula: the baseline was each color was followed by the number 0,
darker colors in that family were followed by a negative number (-1, -2) and lighter colors were followed by positive values (1, 2…)
Our Developer’s Style Guide includes sections on everything from type styles
to form elements—documenting all the button and menu styles in the app.

Launching the Finished Product

The home screen of our web app before and after.

Director of Design @goabstract

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store