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 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.
  • Don’t go for the big reveal. Involving the team early and sharing our progress along the way contributed to our success.
  • Work with the engineers who will be implementing your vision throughout the design process. Even though we got the engineers involved early, we should have done it even earlier. Had we been running in parallel the entire time, we would have been able to mitigate issues that came up during the implementation phase.
  • It will take longer than you think. Make a reasonable estimate and then add 25-50% of the time you anticipate as a buffer.



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