Design October 11, 2019

How implementing design systems can help retailers focus on customer experience

Thomas Smolders

Resident Writer

In the first six months of 2019, Belgians spent no less than 5.69 billion euros on e-commerce, an increase of 7 percent compared to the same period last year. Both the number of online payments and the amount spent are increasing for the fifth year in a row, according to a report by BeCommerce.

There are various factors that can make retail businesses successful online. A smooth user experience is definitely one of them, just like being able to ship new features regularly. To achieve this, good collaboration between designers and developers is needed, so no information is lost. Working on a large project is a bit like when you used to have to pass on a sentence to your neighbor in class - by the time the end of the chain was reached, the sentence had changed completely.

To be able to adapt quickly and stay consistent in the design of all their digital applications, most companies use a design system. It’s a well-documented, overarching set of rules and agreements on how to create products and communications by using components. The single source of truth, you might say.

At In The Pocket, we created our own design system called Hubble. This is how the creation of a product used to look like at In The Pocket:

Hubble

In the past, we would communicate and iterate between design and development towards delivering an end product. Initially this works fine, but at some point you’ll notice that this flow is no longer feasible. When your teams grow or your e-commerce platforms get bigger, for instance. Or when there are multiple digital products and you shift from building apps to building platforms.

We experienced this too and had to come up with something that would fix it, because we would have miscommunications or design changes ending up in the code badly by developers misunderstanding designers. That’s why we invented Hubble.

Design-systems-process

Hubble is our ecosystem of tools which we use effectively to get the design data out of our design applications and put them straight into the code and always have the latest design data reflected in our code base automatically. Thanks to the tools we built, changes in Figma or other design programs are immediately implemented in the digital products. Just like we have processes for agile organisations or for development, we wanted to have a process for design and above you see the pillars that we defined that we should model our design system too.

To us, it’s more future-proof to build new products using this design system and it should reduce the cost of constant maintenance. For our existing products that already have Hubble integrated, we saw an efficiency and quality gain in the software we shipped by 15%. Issues were solved faster, we had less tickets on our Kanban board, less design reviews and a better collaboration. We now have more time to focus on the bigger challenge in front of us like architecture, UX, user delight...

If you’d like to know more about design systems and how they can improve your business, we’re here to help! Download our whitepaper on design systems or contact us.