Safeguarding crypto assets.

Since the crypto-blockchain thing started, I always wanted to work on a blockchain related project, Trustology, which is part of Consensys family, gave me such opportunity not long ago.

From the initial branding and office interior design to user experience design and prototyping, one of the most complete challenges of my career in just a 3 month sprint.

  • March 2018 to June 2018
  • UX, Wireframing, Prototyping, Branding
  • Trustology
  • www.trustology.io

A startup with an idea.

When Trustology contacted me they were in need of a design team, or at least a designer that could be comfortable working in all aspects of design for a new brand/product.

This meant starting from the very basics and building up not only a brand image but also a compelling app that could fill a hole in the crypto world.

So the first task I decided to tackle was to come up with a detailed design plan that would guide us for the following months, this plan included from brand conceptualisation process to UX, wireframing and prototyping, oh, and even included bits about interior design as they requested if I could help them choosing office furniture and decorations too!

Brand design process, UX research, user and stakeholder meetings, wireframing and information architecture workshops, prototyping and revisions, visual desing, etc... everything was planned and reviewed with the company leaders and estimated accordingly, so I jumped right in!

This realistic and detailed plan touched all necessary points to bring a new brand image and product to life.

So what is Trustology?

With the crypto currencies boom, people became more aware of the risks of holding on these new assets, and no solution so far offered a complete package that would substitute traditional custodian services and advanced banking posibilities.

The idea is to build a secure solution that would allow the creation of smart contracts through the app.

Creative logo explorations

Using some concepts and words as starting point I sketched a few ideas and concepts that would help as a conversation started within the team and stakeholders in order to find the right idea.<

Brand attributes moodboard.

We defined a few brand attributes we would be happy to inspire the brand design process.

Attributes list:

  • Trust, Security, Rating, Technology
  • Data, Cryptography, Blockchain, Money/Assets

Exploring shapes and concepts.

From some of the previous sketches, I developed some ideas a bit further.

I also spent some time playing around with the letter 'T'.

This sort of exercides are very useful when coming up with a new logo or brand.

Colour moodboard.

Every brand has a main colour linked to their design ecosystem, this moodboard helped us to choose among a few options.

Iconography moodboard.

Iconography is very important in any brand identity, but specially if your main product is user interface based, I wanted to keep iconography simple but effective.

Illustration moodboard.

For illustration style, I decided to go for a fresh and modern look.

Logo moodboard.

This board's goal is to help us visualise the future brand design within a similar styled logos.

Typography moodboard.

The decision about going for a bold sans serif typography was almost instant, it works well with user interfaces and the different weights allowed me to be more playful and modern in other sort of visual communications as pamphlets, marketing material, etc...

UI design moodboard.

When it comes to user interface design, we kept it modern and within the current trends and standars.

Office moodboard.

I'm not an interior designer, but when they asked me to help them setting up the office, including the meeting room, chilling lounge area and creative corner.

I thought about creating a creative/demo corner made of a high top table with stools and a couple of white boards plus a big television, the idea is to be able to work in smaller teams and pitch ideas over the big screen to clients or colleagues.

First revision, logo proposals and concepts.

After a few meetings and discussions around the moodboards and with new ideas, I started designing some concepts and try to come up with more polished solutions.

We played with different ideas, includin the elliptic curve, the devil's curve, the idea of nodes, some security-related concepts and so on.

The chosen one.

We ended up deciding to use the hexagonal version of the logo, it's structure would allow us to be more playful and dynamic with the brand without constraining creativity.

Colour applications.

Here is the different logo applications in colour, greyscale and black and white.

Brand identity manual (extract).

I designed different options for the coloured and black and white versions of the logo.

Stationery design.

I designed different options for the coloured and black and white versions of the logo.

Stationery mockups.

Some explorations and designs for a variety of stationery items and media formats.

Stationery mockups.

Some explorations and designs for a variety of stationery items and media formats.

User Experience design.

The main big piece of work of this project was to design in record time an iOS wallet and crypto custody app that we could start testing out internally thanks to the whole Consensys family.

I took the decision at this point to start creating a component library that was simple enough in order to quickly being used in the creation of wireframes and prototypes but with an element of style and design that would serve better the planning that the company have made for rolling out the first versions of the app.

Onboarding user flow diagram.

The first user flow we started working on was the user onboarding experience.

This would include from login and registration, to activating 2-step verification, security procedures and creation of first custody accounts.

Wireframes with style.

Working in pararell as the development team in such early stage, I made a set of components that wouldn't feel too wireframey so they could be potentially be used in the early versions of the app.

Using Sketch libraries was essential for this operation, so in further stages of the project we could simply revisit in a component-by-component basis and update the visual style easily.

Animating and prototyping ideas

I have to admit, the best part of my job is to bring ideas to life with a prototyping tool, in this project I used Principle as allows me to quickly mockup ideas and ensemble together different files into one big prototype.

This allowed us to pitch and test ideas with clients and other colleagues, it was also super useful for the dev team as they would have the demo installed on their phone to play at their will.

Vision prototype

I made this prototype as a vision concept before any wireframes or UX was designer, for the team it was imperative to have a view of where we were heading.

Dark mode

Some people within the company wanted to see how a 'dark UI' would feel so I made this small variant of the prototype to demonstrate it.

We decided to go for a more light user interface and leave the dark mode for future releases, maybe as an option within the settings.

Onboarding + Signup

We tried to keep the signup process as simple as possible, asking only for an email and a full name, further details could be added at a later moment.

Signup security procedure

A very important process we had to include during the signup flow is the different security measures for account recovery such as a video recording saying some specific words.

Once the user has registered, a special code would be emailed to their email account, this code is used to finally end the signup process.

2-factor authentication

Another security measure is a 2-factor authentication login procedure.

Main navigation

For the main navigation I decided to use tabs as we only had 3 main sections at the moment: Accounts, Contacts and Settings.

Refresh accounts

Standard refresh interaction demo.

QR account number display

We wanted to include an easy way to share your Ethereum account with someone without compromising privacy so with a single tap, account balance is hidden to show the QR address that can be scanned using another phone.

Transaction step by step

I wanted to try different approaches to making a transaction, this example is a step by step process allowing the user to focus on one thing at a time.

Transaction form

The other variant we tried was to have a single form to process the transaction.

An eagle view of some of the files produced.

Here are some screenshots from a Sketch file used to prototype a clickable prototype and another file for a Principle project containing the high fidelity prototype and micro-interactions.

I always try to keep my files as tidy as possible and on Principle I've learned (the hard way) that the cleaner and perfectionist you are from the moment you create a new file, the better.

And that's a wrap!

There are a lot more details I could talk about but I hope this gave you an idea of what I did during my time with the guys at Trustology.

For me it was a great experience and a full 360 project all for myself and I learned a thing or two about blockchain technology and how startup companies operate at early stages.

So how is this going to end?

If you are in the crypto market and you are looking for a way to secure your assets don't hesitate in pay them a visit, me personally I look forward to see how the brand continue to evolve and the new changes that their design team will be implementing in the future.