Easing the communication gap between designers and developers, by setting standards for design.
Ledarna is a trade union for managers, specializing in advice and care. They provide courses and activities for managers on their website.
With stakeholders having no expectations, it created a difficult challenge on what I should create. They had a five year old style guide as a reference, but it had not been looked over for a good while. With Ledarna also having a high staff turnover, having developers on timed contracts had created an un cohesive code structure and class naming.
My idea was to start by looking at the style guide and see if we could create something usable and easy to update. Focusing on the developers and designers to have something as a reference when creating design work.
Proccess and Outcome
I started out by looking at the components and layouts, comparing them to the website and seeing what’s being used and not. This helped me gain a better understanding on what types of components and tokens that were most common. My next step was to talk with the developers and look for challenges and unexplored opportunities.
- After breaking down the style guide, two key parts were connected to each other, it also explained why certain things took time to develop.
No structure - with the style guide not up to date, made it difficult to inventory web assets and written code. And since the style guide was not used when building design and code, it had a lot of different colours and fonts within the system.
Some success we had with the project:
- Developers taking lead in syncing code with components in Figma, and the product owner having ownership in development moving forward.
- Matching code - Developers implementing Jira tickets into their daily work, focusing on cleaning up written code to better match with the Design system components.
- With a unified and a single-source of truth in place, the design system. Let’s us create better collaboration between designers, developers and stakeholders.
- 20% faster shipment from design to code.
- Opt-out cookie module.
- Increased course booking by 15% with a more functional calender
