Selling a Design System

Introduction

Its not  easy to connect the benefits of a design system directly to revenue.
Normally, for Sports Interaction’s betting product we could launch a new feature, then measure interaction and betting. If it was a hit then our customers would convert more.  If it was a miss they wouldn’t. - A straightforward result. But a design system was an internal efficiency. The customer would see it eventually in the quality and relevance of our product but initially it was difficult to connect those dots.

Below I will break down the methods I used to get all stakeholders on board with the initial effort to make a design system, reap its rewards and to keep backing it.

Background

We were growing. Avid gaming was acquired by Entain in 2022 and with this came a plan to grow.

Adding people to a team doesn’t always mean that we would get more work done faster, however. As teams scaled, we also had to use other factors for productivity. A good design system was one of those factors.

Some stuff was going wrong. We had a lot of UI bugs, inconsistencies of lesser-used interfaces, and in our haste to get things fixed, we had employed one-off quick solutions in places. Testing was difficult. Making any universal changes was tedious. This would only be compounded when we added more people with more ideas and more ways of working.

Designers had been using a version of this for many years. It was easy to make standard mock-ups but the value was diminished when it got to the real product when code was written multiple times to describe the same thing

Why a Design System was the Answer

A design system was the clear answer. Clear to me anyway. We would automate consistency - write once, use often. Keep our thinking brains for strategic work and let the standardised system take care of the small stuff.

A design system is a collection of reusable components guided by clear standards that can be assembled together to build any number of applications. It is a living library that runs off the same code as the live site. Components are designed once, coded once, and used often.

To me it seemed like a no-brainer but it would be a mistake to assume my colleagues agreed. Everything is, afterall a hypothesis until it proves its worth. This idea would only get a chance to prove it’s worth if it could promise value to all parts of the business. Marketers were interested in hearing that their colleagues in dev would see efficiency but as far as they could see it wouldn’t relate directly to them. The MD only wanted to hear about efficiency if it allowed the business to compete and grow in the market.

There was a sales job to do.

For success, it could not be an either/or choice. The solution had to tick all the boxes

Knowing my Audience

I determined that I had two types of stakeholders, those that were Internally focused and those that were externally focused.  With internal focus, we had the CTO looking to make work more reliable and efficient for the team of developers. We had designers wanting consistency amongst a growing team who wanted to focus their brainpower on bigger picture problem-solving.  

In contrast, we had marketing and business development teams who were always thinking of direct value to the customer and how little dev and design resources they had available to them.

To successfully implement this endeavour I had to get all sides onboard.

Internally-Focused Selling Points

There are three big selling points for internally motivated teams. These are:

  • Efficiency

  • Consistency

  • Scalability

The efficiency selling point

A design system allows for rapid prototyping using a library of standardised and tested components. We have working software in front of a user quicker because our design, dev and testing phases are greatly reduced. Team members can focus their energy on bigger user problems rather than expending valuable time on fixing small interface elements.

Designers can build solutions using a well-tested set of components. Those of us pulling in work from our backlog know there is a stable pattern library. Developers can focus on the problem they’re trying to solve right now. The smaller pieces of the interface problem have already been solved, tried and tested. In short, we can get working, valuable software in front of customers faster.

The efficiency of each of these parts raises our total efficiency.

 

The consistency selling point

The danger of breaking consistency is reduced or eliminated as designers or developers don’t have to go way back in the user journey to make sure they’re not using two elements to mean the same thing.

Another consistency occurs when we have new employees coming on board. An individual can see all the usable library straight away and doesn’t need any insider knowledge to get going and delivering work consistent with the team. A design system reduces the time it takes a new hire to become a productive contributer.

The scalability selling point.

We had ambitious teams and the goal was always to build more, try out more stuff (we were embracing agile) and offer more targeted features to customers. Anything that facilitated this was welcome.

The Initial Cost Caveat.

All of these come with an initial cost however and when the CTO asked, “Is this going to be a big black hole swallowing dev time?” The truth was that while the teams were building the system they were not going to be as productive on the rest of the work. I needed to get into the weeds of projecting long-term efficiency a bit deeper.

I spent some time working out the cost for our organisation. Doing this led to breaking the project into manageable parts that would show value early on rather than waiting for the full thing to be done. For instance, it would take three team members three months to reach a point where the system will start to save each person on design and front-end teams approximately 2 hours per week. On top of this, the productivity benefits would continue indefinitely even if we only do one part of the project.

In practical terms the first piece we chose to work on was buttons. They were everywhere, in every prototype and in every visit to our product. They came up in bugs more than they should and they were used a little inconsistently in lesser-used interfaces because people just forgot about them.

If we only created a system of buttons we could already show value.

Externally Focused Selling Points

Efficiency is great when talking to a product team’s makers. For those selling the product experience, they understood on an abstract level that efficiency was good for the business, but this was not a good enough selling point for marketers. Their eyes were always laser-focused on conversions. What they needed to hear was that customers, or potential customers could trust us, our brand, and our product, then spend money with us.

The big external selling points were these:

  • Trust

  • Usability

  • Adaptability

 

The Trust Selling Point

With inconsistent experiences, a user will subconsciously loose trust in our brand. Every single interaction with something of ours either builds up or breaks down a person’s opinion of us. If tiny things are broken the user will get on with their task but it is a death of trust by a thousand cuts. The Sports Interaction brand was built on trust and luckily, everyone was eager to keep it that way.

We needed a trust insurance-policy. We knew that we would encounter times where we asked a lot of our customers, stretching the trust in the relationship almost to breaking point. One of these times was when we needed half of our customers to create new accounts in order to meet compliance in Ontario. They stuck with us. We can attribute some of that at least to the fact that they found the experience of interacting with us a trustworthy one.

The Usability Selling Point

Usability comes with repetition. We wanted our customers thinking about where they were going to watch a football game and what bets they were going to place. We did not wat them having to think about how to do this. Repetition and consistency allow for mental shortcuts in the experience. Customers do less thinking and have the product we want them to have – one that adds to the enjoyment of a game. If they have this then they are engaged and happy. Happy customers keep coming back.

Framing this in a truly marketing sense – Helping our users to accomplish their goals is helping them to convert. If something is easy to do they will do it more.

The Adaptability Selling Point

Some years before in Avid Gaming we had done some good work in transitioning the organisation to and Agile mindset. Product and marketing people were used to releasing a minimum viable product to test a hypothesis. We liked being right, building on a good idea. We didn’t like being wrong quite as much, but we did like what we learned from it. Our customers sometimes surprised us. We already had a competitive advantage in being more agile than competitors, but a design system would allow us even more agility. Time-to-live when using existing, reliable components could be remarkably short. We could therefore learn early what worked or didn’t work. We could also jump on a good idea in a short space of time or respond to the changing market swiftly.

This one turned out to be the strongest selling point for marketing colleagues.

How it Worked Out

The idea was sold. Creating a design system was on the roadmap with the backing of all required stakeholders. The value to the business was clear and the expectation was set.

We Started with Buttons

Buttons were a small thing that was repeated hundreds of times throughout the application.

Starting with buttons would be the least thing we would fix to learn the most about the effectiveness of the plan.

The hypothesis was something like this:
When we have standard button components we will see a 30% reduction in bugs relating to buttons. We will see customers moving more efficiently through the product by observation. We will see a reduction in design time and we will have fewer (possibly no) conversations between design and development about the creation of  buttons.

Crucially, the risk was low. The success hypothesis was described, and the endeavour was broken into smaller parts that would prove their worth providing empirical evidence for moving forward.

The buttons task took a while given that it was the first. Agreements were made amongst designers and developers about naming conventions and setup. It was a success and the hypothesis was proven correct.

Planning the next stages involved a much shorter selling phase.

Testing Under Pressure

For the wider group, the value most strongly became apparent when we came under pressure.

In 2022 we had a situation where we had to make a complete version of our betting product to fit with Ontario licencing laws in a very short time. There were no spare minutes available to think about the corner radius of a button or how form fields should look in their empty state. Our head was on the chopping block if we failed to meet our deadline. We used all our available time on solving problems to get our customers through the new hoops and keeping them with us.

We achieved this and hit our deadline while creating no new interface elements. It was all already done in the design system.

Conclusion

Knowing which internal and external selling points to elaborate on is significant. It must make sense for all parts of the business.

A design system cannot be inflicted on a group of teams or stakeholders. It will only work if they have played a part in its success and see it as an investment in long-term benefits for the business. While we invest time and effort on a design system we are choosing to leave something else in the backlog.

The investment was based on a hypothesis of efficiency and quality. It was a leap of faith that would be tested. By breaking the work down into initial parts that could prove their value early, the leap of faith became a series of small jumps.

Like every good work process, it began with the people collaborating on a shared vision of quality but framed for their particular remit.

Previous
Previous

Same-Game-Parlays (Designing with Data)

Next
Next

Visual ID for Sports Interaction