Colony Gas Station
Interacting with blockchain technology
Problem
In order to make use of Colony’s peer-to-peer blockchain technology, our users must sign a transactions and pay a fee known as “gas”. We wanted to design an intuitive but robust way to sign these transactions because this interaction is critical to using this complex technology.
My Role
• Led our team’s design process.
• Create user personas to ground our solution.
• Construct three prototypes to test designs.
• Facilitate internal testing and feedback.
• Assisted with high fidelity design assets for developer handoffs.
Project Team
• Collin, co-founder and product owner.
• Karol, co-designer.
• Chris, lead developer.
Understanding technical requirements
Early in the design process, we collaborated with our lead developer, Chris. This helped us define our problem, understand the technical requirements, and map key interactions.
Gas is a fee for submitting transactions to the Ethereum network.
Gas is paid in ETH in units of GWEI.
Total gas = gas limit * gas price.
Higher gas will make a transaction faster.
There is an upper limit to the speed of a transaction (you can overpay).
Too low of a fee will result in a failed transaction.
Prices fluctuate based on the congestion of a network.
Defining our key users
I then wanted to make sure our team understood our key users. I created the user personas below based on past research. These personas helped us make key decisions and product trade offs.
Photo by Christina Morillo from Pexels
Jessica Powers
36 y/o - solidity developer
Jessica started programming when she was in high school. She loves the power of technology and believes that blockchain will reshape our world. Currently, she works as a solidity developer for an Ethereum startup called MakerDAO. She uses Colony to create and pay out tasks for other developers helping her with her open source projects.
• Power user.
• Wants control over transaction cost and speed.
• Confident and invested in blockchain technology.
Photo by Clem Onojeghuo from Pexels
Paul Ford
28 y/o - community engagement
Paul recetly joined the blockchain startup, Giveth. He loves how they are using the technology to organizing philanthropic contributions. He works as a community lead trying to get more people to work on Giveth’s open source problems. He’s excited to use Colony but doesn’t quite understand how it works. Oh and he’s really busy!
• Enthusiastic and motivated about blockchain.
• Has sent money using blockchain but transactions are still a little scary.
• Not technical.
• Short on time.
Ideating to understand the solution space
Now that our team had a good foundation to understand the problem, I wanted us to start ideating to understand the solution space. I facilitated ideation sessions using how-might-we’s which generated ideas, sketches, and low fidelity wireframes.
This ideation session ultimately led to three design architectures and various user interactions that we wanted to test in user interviews.
Three different design architecture location for the Colony Gas Station.
Prototyping to validate concept and choose direction
To test these ideas and optimize the usability, I created three clickable prototypes in figma. I used these to facilitate internal usability tests and gather qualitative data.
This test helped us choose the design architecture and validate user interactions. Ultimately, we chose to use the pop-over design.
Final designs
After our user tests, we were able to craft our final designs. We used the information we learned during user tests, as well as internal critiques to design the final solution.
Pop-over design is positioned in context with the wallet navigation so users know how to return to their transactions.
Transactions are grouped together within a user action. This gives our users more context around similar transactions.
Human-readable transactions help our users trust our application.
Power users can adjust the cost and speed of a transaction without complicated inputs.
We provide an estimated time based on network congestion to manage user expectations.
Results
Our gas station solution has become a vital part of our application, allowing our users to effectively interact with Colony’s blockchain technology. The interaction was developed and shipped with the launch of our application. The current iteration has covered all edge cases and has not required a redesign, saving the company time and resources.
Lessons
• Take the time to understand and define your problem.
• Collaborate early with developers and throughout the design process.
• Use prototyping to answer disagreements on design direction.
Next Steps
• Usability tests on live product with users.
• Create a way for novice users to learn about blockchain transactions.