CREDITTRUST
Secure and trustable credit reports on the blockchain
Introduction
Credittrust is a blockchain-based credit report service that provides trustable credit reports to Swiss private clients. They are highly rated because of three aspects:
High data security
Large data source
Instant verification
The MVP is a joint venture between Blockfactory (certifaction.io) and Intrum & CRIF. They provide the credit data and BlockFactory provides the technical solution and design.
🔍 Problem
Currently, it's very hard to verify and check the validity of a credit report. Anyone could forge it and it would be difficult to check.
✨ Solution
We made sure the Credit Report can be verified on authenticity by a drag-and-drop mechanism to validate the file's digital signature of the document on the Ethereum blockchain. This means that there's only one original document, and even the slightest change to it would alter its digital signature. Recipients would be able to instantly verify the Credit Report at any time.
This credit report has several uses such as applying for bank loans and providing proof of creditworthiness when applying for a rental apartment.
Tools
Adobe XD
Team
1 UX UI designer
1 Product manager
My Role
Branding
Visual design
UX
UI
Interaction design
Animations
Timeline
12+ weeks

Branding & Visual design
The branding of this project needed to be ageless because the target audience is so diverse. That’s why we chose illustrations over photos for the landing page. As an overall image, I decided that this application should have a fresh look that breathes innovation as this credit report is in every way an improvement over the competitors.

Logo
For the logo, we went for a blocked C shape with a light blue check mark. Blue is considered a professional color, but using it in a light tone helps to add youthfulness. The same rules apply to square and round shapes, square shapes are more professional, and rounded shapes are more playful (just look at the difference between the logos of Microsoft, Google, and Apple). The use of gradients also helps to give a more innovative impression. It removes some of the seriousness, which is exactly what we were striving for in this project. Additionally, to emphasize the link between the brand and the website (which uses a .ch domain) we added the .ch to the logo in a neutral color.
Visual and icons
We use a small descriptive illustration on the main landing page keeping the focus on the title, the highlights, and the price. Throughout the process, we use subtle line icons to give visual reinforcement to some elements while keeping the focus on the process.

Research, problems, and solutions
For this process, we initially wanted to capture and verify the email address at the start, as many processes do. The main reason for this is that we didn’t want to have sensitive information sent to the wrong email addresses. However, as this process is more comparable to e-commerce checkout than to account creation, we were committed to finding a way to remove this initial hurdle, remove email verification and lower the rate of wrongfully input email addresses.
How did we do this? By changing the file’s primary delivery method from email to download button. The vast majority of people will click the obvious download button after payment, covering the file delivery for over 90%. For the remaining 10% there is a secondary call to action allowing the delivery method to email. This button will make the user input their email address, but this time (after payment) the user will be a lot more committed to inputting their correct email address, with no mistakes.
The result is as follows: lower error rate on emails, lower initial hurdles for the user to complete, making the process easier, a higher delivery rate of documents and because of the lower hurdles: a higher amount of total sold documents and a higher completion rate. All thanks to not capturing the email of the client as a first step. For a lot of companies, this would be a requirement for re-marketing, email lists, and other user-unfriendly practices. However, this makes the brand unpopular and, by forcing their business logic on users, actually makes them sell less.

Capturing the identity
As a process flow, we got inspiration from Coinbase amongst others. It’s important to know that it’s not necessary to reinvent the wheel if others have spent many hours researching and designing similar processes. That being said, Coinbase must obviously collect much larger amounts of data on users to accept them. The scanning of the identity card however isn’t bad.
Two things need to be captured: a copy of the identity card and the address. We decided to capture the address first as it requires a lower amount of commitment from the user. Not only that but we decided to ask for the first- and last name before asking for the address because asking address and ID without a name might not feel comfortable to the user. This way the thresholds are low and incremental, and the user gets early success (cause it’s supposed to be easy to remember your name and address). By detaching the name and the address we lower the commitment level in each and reward with success and personalization. For address input, we use google address lookup which provides a very easy solution to complete these fields.
First many of the wireframes were focused on desktop, as people would be redirected from desktop-focused sites like Homegate.ch or Newhome.ch. However, the mobile aspect was always kept in mind. We have to follow the expectation that many people will still complete this process on-the-go on mobile and it should be possible to be completed easily and instantly.
In order of appearance:
An easy-to-follow progress bar featuring the step you are at and the total amount of steps, with a clear visual indication of steps.
Left-aligned text for easy readability
Using name capture to build trust, give a sense of win, and add a personal feeling
Systematically appearing fields for easy decision making
Good visual and verbal guidance on instructions for the more difficult tasks like scanning id
Acquiring the document
After successful identification, document creation, and payment, the user can acquire the document through a download button. Alternatively, the user also has the possibility to choose the second option of sending a download link via email. This method covers the issue of faulty email capture we discussed in the early stages of this project. Because the user paid for the product, the commitment to correctly enter his data is now much higher, reducing the likelihood of bad input data.

UI design & Feedback to the user
As you could read above, I created the entire flow of this application to be as user-friendly as possible. The UI needs to follow suit. By using the brand color consistently on icons and buttons, the user gets reassured and more confident while completing a process.
Because the document is being registered on the blockchain, I needed to create different loading screens to show the current status of the document registration process. The different status messages indicate what the system is doing, and give the user an impression of progress. This is a psychological principle that makes the loading time seem to go by quicker.

Prototyping
To illustrate the micro-interactions and loading screens I envisioned for the project, I created a desktop and mobile prototype. This way it was very easy for the business stakeholders as well as developers to see what the screen flows and interactions look like. I included the following interaction patterns:
Button pressed feedback
Fields unfold on page change
Progress bar animation on each step
Custom "loading animations" and descriptions
Icon animations when taking actions
Below you can see the mobile prototype.
Next steps
Overall, in terms of flow, UX, and UI design, I consider this one of my successful projects as a 1 man design team. I specifically loved that I could define the Brand, design the Logo, and do all the steps to complete this project into a nice and beautiful UI.
Learnings
I refined my knowledge of prototyping, timing interactions, and giving the user valuable feedback. I also learned how to design flows in which blockchain signing is included. This will undoubtedly become more relevant in the future. I was also able to practice my branding, of which I already have some good experience from personal projects.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.