The Helix Design System
for Lone Wolf Technologies
The Helix Design System is easily the largest labour of love of my career to date. This component library was custom built for Lone Wolf to help speed up new product builds, assist with product UI consolidation, and ensure a more polished end result. Despite being a North American industry leader, Lone Wolf Technologies was struggling with its products—20+ of them when I joined in 2015. Back then, product ideas came from the top down and they weren't vetted by users. And there was no UX team. So I founded one with a few fellow forward-thinkers and began pushing for user-research-led thinking coupled with cohesive design principles.
What inspired me to create a code-based component library back in 2016? Well, the real estate tech giant had an ever-growing collection of acquired products that looked and felt disjointed. (We're at 70+ as of today.) Many sorely needed a UX refresh or consolidation. But our biggest dilemma was the desktop-based accounting software, written in the deprecated Microsoft language: Visual FoxPro. This product is used by hundreds of thousands of real estate brokerages across the US and Canada and makes millions in profit every year. Yet it was heavily neglected UX-wise. And it needed to be brought online to meet our users' needs and to stand a chance against competitors. Having a component library that was usable by both design and development gave us a massive speed advantage for this colossal rebuild.
To complicate things further, Lone Wolf had no dedicated front-end engineers. Luckily, myself and several other UX team members were able to fill that void. My first version of the Design System was written in basic HTML and jQuery. The following year, a few others jumped on board. By 2017, I had started pitching and hosting speak-easy style meetings for those 'in the know', and pushing up our code components to BitBucket guerilla-style. I challenged the UX Designers to create their prototypes using the Design System. Our colleagues and users universally loved this new approach. Using a Design System solved many of Lone Wolf's process and collaboration problems. Because of this, the entire organization began buying-in to my revised product development process.
In 2018 we re-branded our library "Helix." Helix has since gone through three major refreshes. While there are many key things we preserved from version 1, such as accessibility, the latest iteration of the component library is much more mature. We serve our Design System in React and TypeScript now. The Design System appears on our company roadmap and the UX team has dedicated resources to maintain it. 8+ engineering teams reference it for their projects and we've built 5 fully functioning applications to date.
The Helix Design System has become the catalyst for platform unification across Lone Wolf's various products. You can see Helix in action in the video below:
Past Projects
for Lone Wolf Technologies
While I can't share the code prototypes that we produced recently, I can share the actual code prototypes we produced a few years back which didn't make it into development. This includes one of the first iterations of the Design System documentation that I published back in 2017.
UI Kit (Design System V.1)
A step back in time to version 1 of the Design System, before we moved to React.
2017 Documentation
Transaction Management
Modernizing and reimagining a real estate paperwork-management staple.
View The Code Prototype
Yes, creating a Design System improved our overall UX. But it also dramatically changed the way we planned, the way we worked together, and the way our customers perceived us.
Around 2018, Lone Wolf was bought by Vista Equity Partners and then eventually Stone Point Captital. During each acquision, there was much curiousity about what was going on in the UX department. Word soon got out about our Helix Design System and the way our product development lifecycle worked...
Public Speaking
