CREDITTRUST

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.

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.