A design system and rapid prototyping framework for Careerbuilder
Front-end development | Illustration | Training
My role at Careerbuilder was a little unusual. I was working there as a UX/Front-end resource in a team of 2. UX was new to the corporate applications team and there were over a dozen product teams working on products without front-end resources on staff. Developers were in charge of the UI elements of their features, and there was an unruly legacy system composed mostly of endless tabs.
There was a LOT of work to do. It was almost overwhelming, so the first thing our tiny UX team decided to do was create a simple yet robust front-end design system. We called it Kabu, and it took two months of front-loaded effort to create the code, documentation, and test all our UI components. We did a lot of homework, selecting the best conventions for our product needs. Our first version of Kabu came with the basics needed for our developers to have a prototyping toolkit that could be used without deep front-end knowledge. As new components were needed, we added them to our design system.
Since Kabu had all our visual design baked in to the framework, we were able to focus exclusively on lo-fidelity wireframes when beginning the long process of updating all our legacy systems. This saved us tremendous amounts of time and allowed us to really iterate super quickly in Balsamiq/Invision, often testing multiple times with users during the buildout of a new feature. We never had to do redlines or fear that things would be lost in translation when moving from the wireframes to our Kabu-prototypes because even things like animations were defined in our design system. I believe strongly that for cohesive product suits a component-driven design system like Kabu is a remarkably useful investment with huge ROI.