Prototyping a new Burner at Devcon with Maker & Rimble

rimble
5 min readOct 31, 2019

For Devcon5, Rimble teamed up with Maker, the Burner Collective and David Mihal’s Burner Factory to develop a new prototype interface with an improved UX for Burner Wallet 2 in just two weeks.

The signs of our ecosystem’s youth can be seen in the many fundamental questions still in search of an answer: What’s crypto’s killer app? How can we achieve mainstream adoption? What can we do to do help onboard people into the “web3 world”?

In spite of this, we’ve seen use cases like #defi, and projects such as Maker and the Burner Wallet emerge as partial answers.

What’s Rimble?

Rimble is a team of designers, researchers, and developers encouraging standardization for blockchain projects by conducting research on the best UX practices for web3. The team creates and supports the rimble-ui component library that helps developers build their front-ends faster.

Designing A New Burner

Austin’s original Burner Wallet project has been credited with providing a fast, intuitive and fun entry point into crypto. It has been used successfully at multiple ETHGlobal hackathons, the Ethereal Summit, and numerous other events around the world. David’s Burner Factory builds on Austin’s success. It’s an interface for you to deploy and manage multiple wallets and uses a new version of the Burner Wallet with a modular plugin architecture. Now, developers can build small plugins to expand its functionality, rather than fork the entire project.

A modular architecture needs a modular interface to maintain consistency as developers build on top of it. Teaming up with Maker, we used Rimble’s component library to build a new prototype interface and improved UX in two weeks. Devcon participants were able to load up xDai on these wallets and use the money to purchase swag, with all proceeds donated to UNICEF and Castro Limon.

What’s new?

For the Devcon prototype, the Home screen focuses on the core Send & Request use case: displaying your balances and transaction activity. Different interface elements for alternative use cases can also be accommodated.

Sending

How can we make the Send flow simpler and less confusing for the user? The new modal adds more spacing and a clearer information architecture by re-ordering the necessary inputs. The “Amount” input is emphasized, and supported with conversational helper text.

This is an example of how multiple Rimble components can be used to create larger interface patterns. This Send modal incorporates our Flex, Box, Input, Icon, Card, Button, & Text components.

Requesting

The Request modal was kept largely the same, with conversational helper text added to explain the functionality & purpose behind the modal. It’s a good example of Rimble’s support for rendering QR codes and ETH Addresses

We also designed a new — soon to be released—”Custom Request” flow. It enables users to generate a QR code with the requestor’s address, their requested amount and the reason (i.e. a message) for the request. When scanned, this will load a pre-populated Send modal. The intention is to make it easier for merchants to make faster in-person requests while mitigating the possibility of user error. Expect to see this in the next release.

What’s Next?

With Devcon5 successfully behind us, the next step is create a set of standardized interface patterns on top of Rimble that any developer can use when building their plugins for the new Burner. The goal is to maintain consistency with the interface and user experience for any Burner configuration with any set of plugins and features loaded onto it. Additionally, you can expect to see:

  • Bug fixes & smoothing out inconsistencies in the new interface. There are a few we couldn’t get to before our Devcon experiment and they’ll be addressed shortly.
  • Improved UX. There are numerous areas we didn’t have the time to improve upon and we’ll be tackling them intermittently as we move towards the next release.
  • New “Custom Request” flow that will generate a custom QR code or custom payment link.
  • Better plugin support for displaying, organizing and accessing custom plugins
  • A draft set of design guidelines to help plugins maintain interface and UX consistency.

👀 Want to try it out?

Just visit https://devcon.burnerfactory.com and look out for some small bugs 🐛

🐦 Stay up to date

Follow rimble and David Mihal for updates.

✨ Project Team

David Mihal (Architecture, Back-End, Front-End)

Amy Jung via Burner Collective (PM)

Carl Fairclough via Burner Collective (Design & Front-End)

Alexander Singh via Rimble(Design & Front-End)

👏 Special Thanks

Richard Brown & David Utrobin at MakerDAO

Austin Griffith for the original Burner Wallet.

The rest of the rimble team for making it so easy to build a functional front-end.

--

--

rimble

An open-source library of React components and guides for helping you make user-friendly dApps. Our magical formula mixes research, content, design and code ✨