Design System? Why?

Building the Case for Our Blockchain Design System.
| 5 Minute Read

Spending time on UI for a new product — let alone a blockchain product — is almost taboo. Out-of-the-box design frameworks are everywhere. On top of that, blockchain is in its infancy and changing rapidly.

Despite those facts, we’re building a design system. It’s because we want to share what we’ve learned, help the industry mature, and build faster.

We started with a design methodology we call Pizza–our stripped down version of Atomic Design. In this post, we’re sharing our new UI design, updates to our methodology, and discussing the context that got us here. Next we’ll publish our SCSS framework, Anthology. Finally, we’ll build a repo of Vue components. Scroll to the bottom for the links or read on to understand our decision making process.

Context Rules Everything Around Me

To make sure we’re making the right choice, we’ve spent a lot of time asking questions. A good design system will know what problem it’s solving for users, the company, and the stakeholders of the project. Before leaping into development we did a thorough QA process. For brevity, we’ve condensed that down to 4 questions to share today:

#1. Why not use an existing library?
#2. Everyone wants simple but what is simple?
#3. How can we meet high expectations working on a fringe technology?
#4. How do we communicate behaviors specific to blockchain?

Below is a run through of our thinking.

Question #1: Why Not Use an Existing Library?

As a business investment, a design system is high value if:

  • You want to be more than one product;
  • You know you will iterate a lot.

If the system is tailored to your needs, it works for any product you may build, saving time and energy. A well-defined system makes quick work of global changes reducing tons of production and design time. It puts developers and designers on the same page by providing a shared lexicon. But why build your own?

Up to this point, our app was built using Bulma and we’ve found it requires too much reconfiguring to make it a scalable solution. A third party library adds more variables: updates, support, and breaking changes. With so much complexity in the blockchain space the last thing we need is another dependency. Another datapoint is Relay is built with Vue.js as opposed to React.js which has more pre-built options. We decided the time spent dealing with these issues may as well be spent building our own system.

Answer: Let’s create our own system but not reinvent the wheel. We’re pulling some of the core aspects from Google Material and adapting to our Vue platform.

Global iteration of fonts takes planning upfront but saves tons of production time.

Question #2: Everyone Wants Simple but What Is Simple?

Over the last three months, we have done 60+ user interviews and gathered as many insights as we can. The results have shown us the definition of “simple” is wildly different based on who we ask.

On One Side:

“I have no idea what I’m looking at? Have you thought about a simple interface? I just want to click one thing. Why so many numbers?”

But on the Other Side:

“It seems like the focus is 100% on being sexy and not on being useful. There is so much wasted white space and not a lot of info. I want to see everything all at once. I can hardly see the chart and I want units everywhere.”

The degree of trading experience a user has is the dividing line here. 60% of people want to get in on blockchain because they’ve heard the hype. They are confused when they see a robust trading interface. 40% want all the features of a traditional financial product wrapped in a decentralized package. This survey mirrors our research and highlights the conundrum of the statement “make it simple”. At the moment, we don’t serve either case all that well. It will take time to figure out exactly what use-cases are best served.

Answer: The way forward here involves a tough decision as to whom we are targeting with our current product. Attempting to strip out data feels like moving backward and ultimately inexperienced traders contribute less liquidity — the crucial component to building the ecosystem right now. We need to posture the Relay UI toward technical traders, while creating new products for the other 60%. A design system will help us build both and iterate quicker to find the best solutions.

“Simple” is a matter of function.

Question #3: How Can We Meet High Expectations Working on a Fringe Technology?

The previous question uncovered another insight: regardless of how a user defines “simple” their expectations are high.

Often blockchain is compared with the early days of the internet. Yes, blockchain is facing similar hurdles, but unlike the early days of the internet we now have years of trained digital behaviors. Not to mention well-crafted marketing sites, beautiful digital content, and over-promises flooding search results. The expectations set by all this can’t be ignored even if the tech isn’t mature enough to meet them.

Answer: We’re going to be limited to what the tech is capable of but it doesn’t change expectations. Well crafted artifacts are crucial to instill trust and create enjoyable experiences. Design will play a larger role in the maturing of blockchain than it did with the Internet. A great system will help place design as a core attribute of our company.

Question #4: How Do We Communicate Behaviors Specific to This Technology?

The power behind blockchain is that it offers radical agency over your data and assets. The problem is: that is terrifying. Some people just want convenience. This quote sums it up well:

“Optionality is the key to this technology — John Choi

Our vision for blockchain-specific user patterns appear analogous to that of a car. Inside the cab I have a set of actions I use to operate the vehicle. Those processes rely on conventions: turn signal on the left of the steering column, gas is the right pedal (for some of us). If I want, however, I can pop the hood and get at the inner workings: change the oil and spark plugs. This dichotomy of abstraction and ownership is the key to usability in this space.

Answer: As we move forward with this system we’re taking an “under the hood if I want” approach to thinking about UI/UX. Abstract blockchain-specific data as much as possible to get to a familiar, convenient experience. But always provide access to advanced data if it’s desired. Consistent components will let us implement this thinking faster and provide consistency crucial for fostering new behaviors.

The Outcome

While the ground we’re on is shaky we know that a good design system will help us move faster regardless of what comes next. As we discover winning design patterns we can tweak our core set of components to implement global changes rather continually reinventing things. From a brand perspective it provides consistency and a shared language across stakeholders. If executed correctly it provides a valuable tool for the community and the ecosystem.

We walked through our rationale, now it’s time for you to let us know what you think. This is a work in progress but feedback “early and often” is the name of the game. Grab the file below and give it a test run. Leave comments on our InVision and for you design nerds, yes, we are moving to Figma. We’ll discuss our SCSS framework next. Stay tuned.

Radar UI Lite (Sketch File Download):

Radar Pizza Overview (InVision Link):

Feel Free to Reach Out. Thanks For Reading!