Rimble: A Design System for a Decentralized Ecosystem

Check out the latest iteration of Rimble.

My role: Head of Design

Dates: July 2018 to December 2019

Ethereum UX is bad y’all

Across the ecosystem in 2017 and 2018 decentralized applications (dApps) were being built at a blinding speed. Unfortunately, the user experience was very poor—everything from confusing language to dead end flows made dApps accessible to only extremely motivated people. Most teams did not have a designer, but relying on Material and other existing component libraries was no help—they didn’t have the patterns required to interact or transact on a blockchain. Worse, accessibility (the Section 508 kind) was not even an afterthought…disappointing when the draw of blockchain centers on inclusivity and a second chance at an equitable internet.

Users were confronted with a range of challenges, never knowing what to expect. Most products saw a drop off as soon as the user was asked to interact with a wallet for this first time—their curiosity faded in the face of so much cognitive load. New users didn’t understand the concept of gas, or whether or not their transactions went through. 

It wasn’t enough to improve dApps only at Consensys, UX needed to work across the ecosystem. A rising tide lifts all ships—the success of any team was a win for Ethereum and a chance to learn what was and wasn’t working. Use cases needed to be validated on the merit of the problem it solved, not whether or not someone could figure out how to use the dApp.

At every conference where I was speaking, I would get asked “what’s the best transaction pattern”? Talks and writing were only getting me so far. I was reaching a small number of designers, not the developers who were rapidly building these products—it was time to put truly useful tools out there. 

 

Beyond talk

Getting buy-in

I pitched the idea of reusable components to our company’s founder: if we needed to experiment quickly, developers would build faster and better if they had quality components for common patterns. We would save money by knowing sooner what was worth continuing to fund. The value of the idea or ascertaining product market fit wouldn’t be hampered by users having to learn new UX patterns (like signing transactions) every time they used a new decentralized application (similar to if the login pattern of username + password was different for every app). We were actively building barriers to adoption and stopping people from gaining any value from the products. This was in addition to the jargon heavy and poor design many decentralized apps had because due to lack of design resources. He agreed this was worth funding, and I set about hiring a team.

Screen-Shot-2020-01-04-at-7.26.35-AM

Expanding a team

I kicked off the design system with a design thinking workshop in the summer of 2018. We were calling it a design system, though we knew it would lack some of the same purposes of conventional design systems: there was no brand consistency to enforce across Consensys or the ecosystem of independent products, so we knew up front the ability to theme would be necessary. We started with a lead product designer, a front-end/design hybrid, a design producer, and a researcher at 25% availability. Over the next 6 months I added a product manager, engineers, a content design lead, and a dedicated researcher.

StakeholderPresentation_Page_02

To align our newer teammates, we mapped stakeholders—both inside and outside Consensys. Then we focused on our main persona: the ethereum developer with no design experience. Could we make it easy for this person to develop a dApp that had better UX and accessibility than what they would do alone?

StakeholderPresentation_Page_19
StakeholderPresentation_Page_12

Our initial workshop produced a lot of questions about our potential users, so we began developing a research plan, developing internal partnerships, and then making decisions from the data gathered. Because our target users changed rapidly to keep up with the pace of Ethereum, I embedded a researcher full time on the team. She was able to remotely interview and build research plans for the teams to take to hackathons and conferences.

Screen-Shot-2020-01-04-at-7.15.37-AM
Screen-Shot-2020-01-04-at-7.18.05-AM
Screen-Shot-2020-01-04-at-7.16.22-AM
Screen-Shot-2020-01-04-at-7.18.17-AM

Developing a vision

The team decided on the name Rimble, a portmanteau of “repeatable” and “nimble” (also because it had literally no competition for the name on Google). The northstar for the team was “Make it easier to build dApps with outstanding user experience” because we knew components alone wouldn’t finish the job of making UX better in blockchain—we would need to provide guidance and inspiration.

We wrote the initial design principles to focus decision making and let others know our purpose.

Flexible

Your tech stack and workflow are yours to decide. We impose as few constraints as possible. Design systems and emerging technologies don’t necessarily go hand in hand. We must build a system that can handle rapid change without disruption. We must also watch the Ethereum roadmap and community to best understand how to change with it.

Research Driven

We are constantly talking to dApp designers, developers, and users to understand common challenges and effective UI patterns. We are tireless in our efforts to understand what our users need, and ruthless in our efforts to rid our system of anything that they don’t. 

Human 

Blockchain is confusing. We must invest in being understandable. This applies to everything, from our documentation and boilerplate content to internal communication and presentations.”

Early audits and testing

We started auditing existing dApps, both internally and externally, to get a rough idea of the components to focus on. Our findings aligned with what research was already telling us: we would have higher impact on the quality of dApps if we focused on web3 components first.

web3-meeting-7_20_Page_07
web3-meeting-7_20_Page_10
web3-meeting-7_20_Page_09
web3-meeting-7_20_Page_08

We made a baseline of elements to compose into more complex patterns, and asked designers to experiment with them on real projects—what major things had been left out? What was easier?

web3-meeting-7_20_Page_18
web3-meeting-7_20_Page_19

Content Design

I had been stealth recruiting a talented lead content designer over the preceding year, and finally lured him onto the Rimble team. Initially I asked him to really dig in on the language we were using to tell users what was happening. He partnered with researchers to test language and what terms were tripping new users up. The team settled on the Metamask interaction and transaction patterns as the first pain points to tackle, as well as guidance on content design. I am particularly proud of this hire—over time he's gone above and beyond infecting Consensys Design with a content first mentality and teaching designers conversational design.

Screen-Shot-2020-01-04-at-8.05.36-AM

Into the wild

At Devcon 4 in October of 2018, I helped create the first ever UX track at the largest Ethereum conference. We used the opportunity to introduce open source Rimble to the Ethereum community. We tracked its use and popularity—github starts, npm downloads, forks, and just people from projects using Rimble thanking the team on Twitter. This allowed us to focus where we were having the most impact, like hackathons.

Screen-Shot-2020-01-04-at-6.11.53-AM
Screen Shot 2019-05-10 at 2.11.55 PM
IMG-20181031-WA0008

The team partnered with prominent developers in the space to showcase the utility of Rimble, such as the Burner Wallet.

The burner wallet is a temporary Ethereum account that allows you to transact in any browser using xDai. xDai can be converted to both DAI and ETH and sent to Ethereum addresses.

Use case

User is attending an event and wants to purchase goods (food/drink) using crypto. They can head on over to a vendor, scan their QR code and use their crypto to pay for their goods.

They may also want to send/receive payments with friends. In which case they follow the same process or they can manually request funds or send funds using a link.

At the end of the event, the user sends any remaining funds to a secure wallet and deletes the burner wallet.

Rolling with the punches priorities

In 2019, Consensys underwent some significant changes and began consolidating internal projects into product suites. I saw this an an opportunity to refocus Rimble on more traditional design system goals. We broadened our main users to include designers, and published a Figma kit. In addition, we are developing a design language for our decentralized finance products and aligning them more closely with a developing brand architecture. 

I've learned that both in a decentralized design practice and in an emerging technology ecosystem, making things for people to use does more to raise the bar for quality than talk, meetings, conferences, or articles. I am still so incredibly proud of this team: undertaking a design system in probably the world’s most ambiguous and changing environment—they are brilliant and inspiring.

 

Screen-Shot-2020-01-04-at-9.46.47-AM

Find me on â­‘Medium, â­‘Twitter, and â­‘LinkedIn

→ Work

→ About

© 2020 Sarah Baker Mills