Helix Design System

When Lone Wolf Tech acquired W+R Studios back in 2021, it brought its vision to be the unified platform for the real estate industry. A small obstacle - a disjointed product lineup that would force the user to learn multiple patterns and design languages. Helix Design System is a set of components that enable colleagues at Lone Wolf to leverage a cohesive design language – slowly but surely, making Lone Wolf products boringly easier to use.

To improve the user experience, we decided to start with the redesign The Helix Design System, an internal library that was not aligned with the design standards of major industry players like Zillow, Redfin, and Realtor.com. As part of the redesign process, we established clear guidelines for space increments, typography, and color to create a strong foundation. Since we were also designing the brand in parallel and the final color hadn't been determined, we decided to scale back vibrant colors and make black the primary color, with shades of cool gray for accents. This posed an important question for our design team: would a color blind person be able to notice and differentiate between different design states using this color palette? This ensured that our design system was accessible to all users from the start.

While designing components, color was used as a visual cue to help important elements stand out. One example is when an element is focused, it is surrounded by a two pixel colored border to draw the user's attention. This helps users quickly identify and interact with crucial form elements.