The Helix Design System
for Lone Wolf Technologies
The Design System for Lone Wolf is easily the largest labour of love of my career to date. Despite being an industry leader, Lone Wolf Technologies was struggling with its products—20+ of them when I joined in 2015. Product ideas came from the top down and there was no UX team. So I founded one with a few fellow forward-thinkers and we began pushing for user research-led product enhancements.
The real estate tech giant had an ever-growing collection of acquired products that looked and felt disjointed. Many of them needed a UX refresh. But our biggest dilemma was the desktop-based accounting software, written in the deprecated Microsoft language: Visual FoxPro. This product alone makes millions every year, yet it was heavily neglected UX-wise and needed to be brought online.
I was facing the collosal task of bringing all of these products together and rebuilding the burnt bridges between our Product and Engineering teams. To complicate things more, 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 started in 2015, written only in HTML and jQuery. The following year, a few others jumped on board. In 2016, I started pitching and hosting speak-easy style meetings for those 'in the know', and pushing up code to BitBucket guerilla-style.
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.
In 2018 we re-branded our library "Helix." You can see it in action, plus some live application previews, in the video below:
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.
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...