- March 2018 to June 2018
- UX, Wireframing, Prototyping, Branding
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.<
- Trust, Security, Rating, Technology
- Data, Cryptography, Blockchain, Money/Assets
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.
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.
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.
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.
Another security measure is a 2-factor authentication login procedure.
For the main navigation I decided to use tabs as we only had 3 main sections at the moment: Accounts, Contacts and Settings.
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.
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.
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.