PRISM Design System

One of the most complex challenges is bringing the maturity of UX within the business so that many stakeholders know why we can provide within the organisation. It is also hard for people to understand the processes needed for specific steps within the project. The problem became apparent when our business development team would bring us into a project and promise a timeline to a partner without knowing what we had to do to achieve the results needed for the project delivery. After having this repeated problem, I decided we needed a way to map out our process and communicate this across the company_

Requirement

Scalable Design System

Goal

Reduction in UI Debt

Deliverables

In-house design system

Year

2019

Build a system

One challenge was building the design system and components that could easily be white-labelled with the design tools we had in place. I spent months investigating tools that can help brand our white-label components easily for any partner we bring to iptiQ. Having the means to follow our strict workflow processes was very challenging, but in doing so, we have built a hybrid system that reduced design work by 96%_

We had to document this system so the developers could understand how they built it. We had to learn to create that documentation that the devs could digest to help reduce technical debt in development

A key to building a design system is reusing components and aligning them across the platform. We had to ensure that if an element is used in another application, the behaviour is still the same across and deferred from its initial documentation

We had to devise the best place to keep our design systems. We have to look into many products that offer this solution and are also accessible for the devs to access when they need information about components. This allows for a reduction of work hours having to align with devs on components

We must look into a system where the devs can integrate their design system tool, storybook. This tool is standard for devs and is a core component in building a system within the development structure. Integrating the storybook into our design tool will keep devs updated on enhancements and changes

Even Design Systems Need Personas

Just because we were building a system that was to be used internally, it doesn't mean you don't research the tool and how people are to use it. I am strict with this because the designers have to ensure that their documentation can be digested by the various people who will use the DS. I asked the team to research the key people that will use the tool across the whole company, and this then allowed them to refine the best strategy on how we share this tool across the teams_

Follow the atomic design

We had to follow the atomic design structure as it would follow the structure of how the designs will be branded using Figma plugins to change over the brand of our designs to match partners. We used a plugin named 'Themer' to achieve the needed functionality_

Fully editable system

We found that by having our design system, we were not tied to external design libraries and the updates that occur with them. There is also a reduction in hacking to fit the design system to our requirements, and it has now given us the flexibility to build, change and edit components anytime_

We can now enhance components and follow a straightforward iteration process to improve our features. This flexibility allows the team to A/B test their ideas to validate them before we push them to production

We learned in this project how to document our components clearly for our devs so they have all the information needed to develop them. They also iterated with us on the best way and critical information vital to them, allowing for clear communication through our system

Introducing our design system reduced technical debt on our components and designs. This was due to how we structured our design system to allow for iterations and have the developers aligned on the MVP of features

The UX owns the design library and uses this structure within its designs and principles. This means they will also use the components they have to design and not create custom components for any projects