Kallidus design system creation
Company
Kallidus are a B2B SaaS provider in the HR and Learning & Development space, that aim to unleash the potential in people through the use of their recruitment, learning and performance software.
My role
UX designer
The team
I worked closely with the UI designer, and the front end developers to kick-off this project. Since this is an ongoing live project I continue to collaborate with the UX design team and front end developers to maintain and grow the design system.
My responsibilities
Provide the UX input to all design system components and frameworks, including documenting the rationale behind them.
The challenge
Having joined Kallidus as their second, and sole UX designer, when looking at the suite of products it was clear they had been designed and built at different times, by different people. This had led to inconsistent design solutions to common user needs across the suite of products.
Variation of notification messaging across the Kallidus suite
The business was keen to increase revenue by selling more than one product to each new customer. We understood that our sales team were having problems selling multiple products to one customer because the products did not look and feel consistent. In addition, this inconsistency was causing problems for end users of the systems that had to traverse across these products.
“Consistency improves the user’s productivity by leading to higher throughput and fewer errors because the user can predict what the system will do in any given situation and because the user can rely on a few rules to govern use of the system. The smaller number of errors and shorter learning time gain lead to improved user satisfaction" - Jakob Nielsen - Coordinating user interfaces for consistency
The project goals
To move towards a standardised design system and facilitate consistent solutions to common problems to ensure a unified, cohesive experience for our users.
As a by-product, it will also lead us to be more efficient in our design and development work, since we can focus on crafting an exceptional user experience rather than focusing on the styling of a singular component such as a radio button or date picker.
It will also enable us to more easily sell more than one products to prospective customers.
The long term goal is to have a live design system that can house all components in live code, that could be easily used across the Kallidus product suite by developers.
A short term goal is to document in design assets the components and design frameworks we want to use across our Kallidus suite.
Approach
- Understand the scope of our current systems
- Identify and categorise the patterns currently used across our 5 products using Brad Frosts’ Atomic Design template
- Establish consistent naming conventions for our patterns across the suite
- Create an online UI inventory (of the as-is) to build a sense of shared language
- Prioritise our focus for consolidation
- Conduct a heuristic cross-product evaluation to determine usability priorities
- Present the outcomes within a cross-functional session to help decide priorities
- Implementation
- Feed potential design system components into development design through pre-requisite PBIs
- Develop the pattern library as candidate components are signed-off and added to the design system in Zeroheight (Zeroheight is a CMS tool that allows you to publish a design system)
- Incorporate a digital playbook into the design system
- A growing number of organisations include strategies and approaches to digital delivery within their design system. We decided to do this by including how design and development work in cross-functional teams.
Business vision, product visions and design principles
Alongside the design system work we felt it was important to understand the business vision, product visions and create some design principles. This was so that we could validate that the components and frameworks that we were designing were aligned to this overarching strategy.
Sustainable approach to growing the design system
The upfront work on the design system as outlined above gave us a critical mass of assets in Zeroheight to provide momentum moving forward.
Through collaborative discussions with the developers, we decided to continue to capture the design system through design assets, and not currently move it into live code. This is because there is no consistent coding language between the products in the suite, and so there would be no benefit to doing this at this time.
We continue to refine and grow what is contained in Zeroheight through our ongoing project work.
As each of the UX design team are working on their current projects, if they need to utilise a component which is not yet documented in Zeroheight, we take the opportunity to do this. At this point, it is necessary for the UX and UI designers to investigate and understand everywhere within the suite of products where that component is used, and decide how we want to move forward with it. These decisions are discussed as a wider UX design team in our weekly design system workshops and actions are captured for updating Zeroheight. We gather feedback from the developers, and if everyone is happy we roll it out across the suite.
“A design system isn’t a project. It’s a product serving other products.” - Nathan Curtis
Conclusion
We have seen a high adoption for our documented design system, with developers seeking out information from it in advance of getting in touch with us, thus free-ing up more of our time for other work.
We have also seen an increase in collaboration with the front-end developers as a result of it, since it has raised the profile of these design decisions and fuelled an ongoing conversation.
Our products are starting to look and feel more like a suite of products, which we are continuing to usability test through perception tests.
Aligning the design across our products has become much easier due to being able to adopt these standardised components, and with product acquisitions being likely in the future, this will continue to bear fruit.
The Kallidus Recruit hiring manager portal has adopted our design system, bringing it in line with the Kallidus suite