Trezor.io

Mobile App Design, Stock Folio Content

Trezor Wallet for IOS

SatoshiLabs is a tech company out of Prague in the Czech Republic, founded by Marek & Pavol in 2013.
Their first Hardware Wallet, the Trezor One was the first Cryptocurrency Hardware Wallet in the market and with the recent release of their 2nd and more advanced hardware wallet: the Trezor Model T. SatoshiLabs are considered the “Hardware Wallet” leaders in the Cryptocurrency Industry today. Trezor (One & T) is a Hardware Wallet device that is a small single-purpose computer. It is designed to protect your private keys from possible online and offline risks. To do this, Trezor keeps the private keys away from the Internet and confirms the transactions in-device. That way, you can always check the screen for the right address, amount and transaction fee before sending your bitcoins. In layman’s terms, you can connect Trezor to an infected computer and still be able to have 100% control over the funds in your device.

To find out more about how a Trezor device works or to purchase one directly, visit:
Trezor.io or click on the image below to be directed to Trezor’s Homepage.

As a user of Cryptocurrencies and an early user of the Trezor one (purchased in 2013), I have come to see the evolution of the Trezor wallet and its user interface design for web browsers over the years. Overall, the interface layout design is very minimal & basic. Not that there is anything wrong with that, it’s just a purely functional design. However, as Cryptocurrencies have become more recognised and used by non-tech oriented people, using devices such as hardware wallets through web browsers or mobile devices for the first time can be an overwhelming challenge. In saying this, I have nothing negative to point out about the Trezor’s interface but the over simplicity aspect has caused confusion for some beginners I know whom were new to this technology.  In noticing this, I was inspired to create a new interface aimed for mobile devices to make the user experience for using the Trezor more intuitive and less overwhelming. I had to look at the interface I had become very used to and see how I could modernise it’s simplicity into an easy to navigate intuitive experience for first timers & non-tech minded users. 

To get the creative juices flowing, I began looking at ways I could simplify interactional paths within the Trezor’s exisiting Interface to create flows that would navigate even the most novice of users to their expected location.

Creating this Wire Frame concept above, allowed me to quickly put my ideas into a workable form to which I could make iterations throughout the development process that would eventually lead to the rendered mock up further below. The biggest challenge of all was being able to cleanly configure all the features/buttons from the existing web interface to fit proportionally within a significantly smaller screen size of an Apple IOS device (iPhone 11 Pro Max, in this example). To achieve this, I can up with ways to group these features, using drop down menu’s, expandable tabs and interactive groupsets that could be easily navigated to through the main landing page after logging in.

Below: After a robust Wireframe concept has been confirmed, detail can be added. Colours, Gradient backgrounds, icons/symbols & vectors can be incorporated to the wireframe to build a rendered high-fidelity mockup. Because the Trezor already has an existing User Interface Design, I was able to use elements from it to maintain some of Trezor’s recognisable identity features whilst also adding in my creative flare. Transferable parts of Trezor’s UI identity include: the font styles, typefaces, direct marketing quotes & bold vector icons/logos.

Below: A sample Style Guide below covers some of the key elements used in this App’s design. The Fonts & Type Faces (from the Helvetica Neue family), The theme colour palette as well as key Vectors & Logo’s used from the existing Interface. *All other icons not included in the Style Guide were created in the Sketch program.

Below: A showcase sample of the Trezor for IOS App Final Design. Slides below illustrate the user interface through steps such as: Connecting your device and logging in, to checking your Trezor Portfolio and making a Cryptocurrency Transaction.

The inspiration behind this design was to construct a simple yet intuitive app for Cryptocurrency novices whom are looking to get started and involved with the Trezor Hardware wallet. The goal was to simplify the steps needed for a user to complete a desired task such as setting up new wallet or making a transaction. In using simple colour psychology & clean geometries to group together interaction elements, the interface creates clear pathways for novice users to safely use cryptocurrencies.