Robert Sangalli | James Sangalli

Web Design, Freelance

ETH Allowance

What is ETH Allowance?

Accessing services from Ethereum smart contracts often involves having to “approve” the contracts in order to spend your tokens. Yet, if we approve lesser known contracts that have vulnerabilities (which can allow hackers to steal these assets), the tokens in your wallet can be at risk. This is why it is incredibly important to always manage your contract permissions through Metamask. Using the ETH Allowance tool, you can easily manage and revoke your Ethereum wallet’s permissions ensuring you total sovereignty over your Ethereum assets. This tool works by searching all your transactions on the Ethereum blockchain to find the approval transactions; from there you are then able to revoke each one or even visit their dapp (if available).

To try ETH Allowance for yourself:

My Role

Working with James (the creator of ETH Allowance), we wanted to collaborate ideas together in order to create a new, refreshing look for this web tool after some criticism of its basic appearance through online forums.

From a developers perspective, the tool works well and the overall appearance is not an issue. From a design perspective and the perspective from non-technical users, it needs a bit of tidy up.

Existing interface for ETH Allowance, created by James Sangalli and found here through Github

INITIAL IDEATION – MARK UPS

As this web tool only has one main page with no additional pages required, I decided to go for a rough sketch overlap as my low fidelity concept method so that I could mark out immediate improvements I wanted to make to the interface layout. From here I will skip the wire-framing process and move directly to Sketch (ios) & the Adobe Suite to create rendered mid-high fidelity mockups.

Using the Adobe Photoshop, I would design from scratch a banner graphic aligning an Ethereum logo to the left, the tool’s title & main quote centred and filled in with a space (dark contrast) background. The creation of custom buttons, tables, headers & footers would be created and experimented with in ongoing concepts below.

Initial Concept

This first design maps out proportions required to align information from the the 4x fields: Contract, Approved Address, Allowance & Action. The primary aim of this concept is to figure out the overall sizes for text & table cells as well as suitable typefaces/fonts and a fitting colour palette to tie it all together.

After a quick review, we can see that the concept has some visual problems. Font sizes for Ethereum addresses & the white on teal aren’t the best from a user perspective. Moving into the next concepts, these issues will be rectified through using different colour schemes & font size/placement combinations.

Design Iterations

Final Deliverable

Design Element Samples

Before & After Renders