Debito is a Danish Fintech startup working with online debt collection in cooperation with the largest collection agency in the Nordic countries, Lindorff. They want to make debt collection affordable, easy and bring the entire industry online.

topUI

The Challenge

Debito is a fast-growing company. They wanted to renew and redesign their web-application.
They asked me to work on different proposals of the login system and the web-app dashboard. A precise requirement was to keep the design close to the original one,  improving it and making the system nice to see and easy to use.

The Process

I wanted to proceed step by step. The first point was to understand the previous UI, the needs, and the requirements. The second step was to getting inspired by others design and solutions. The last step was to design my own UI, combining what I learned from the two previous steps.

The original UI

The first step was to analyze the old user interface. 
I took screenshots of each part of the login system, making mistakes on purpose, to see how the system react to errors.
I also accessed the web-app dashboard, saving screenshots and analyze all the elements.
During this step, I asked the company developers about specifics and information about the colors used and the position of each element.
This constant communication was vital to understand their needs and translated them into meaningful UI proposals.

oldLOG

Getting inspired

It is important to study what are the standards and how other designers actually challenge them.
I browsed several websites, from famous service (Dropbox, Airbnb) to less known ones, spending time observing solutions and details, learning from other designers.
I took screenshots and wrote notes for each one that hit me.
This benchmarking phase was extremely useful and fun, and I ended up with a collection of ideas and UI solutions.

vimeo
dropbox

Drafts and sketches on paper

After got inspired by different solution online, and took notes of interesting features or clever solutions, it was time to get my hand dirty.

Before starting to design in Sketch, I wanted to draw quickly on paper the idea I had in mind for the UI.
This helped me to quickly visualize the concept. I also added "to do notes" next to the sketches, useful during the digital design phase.

UI

The digital work

Based on the paper sketches, the ideas I have got in mind and the notes I took before, I began to design the different proposals on Sketch.
I designed and retouched the interfaces continuously during the process, to obtain an optimal result that is a good balance between the company requirements, the user need and the state of the art.
I used to add digital post-it notes next to each UI I was working on, to highlight parts that needed particular care, and to remember the styles and fonts.

Initially, I identified five phases: awareness, consideration, acquisition, service, and loyalty.
Debito service could take months to fully close a user case, so it was impossible for me to measure the customers' loyalty in time.
For this reason, I decided to not develop this phase and not include it in the digital version of the map.

Awareness - The user discovers the website and the service offered by the company.

Consideration - The user explores the website, read reviews about the service, learn how to use it and evaluate if it is the right solution to his/her issues.

Acquisition - The user is convinced and decide to use the service, preceding to register an account.

Service - This is the core product, the web app. While the website is made to inform the user about the service and to attract him/her, the core product is where the company offers its services and knowledge to the registered users.

Desktop

The Result

The login UI

These are four different proposals, that I presented to the developers.

definitivo_1
definitivo_2
definitivo_3
deifnitivo_5

Wrong Username/Password UI

The first two images are the two proposals I made,  on error management UI. In the last two I explored the password reset process.

wrongp_1
wrongP2
resetPA
resetPB

Take away


Each time I work with UI I learn something new.
On one hand, it is important to keep my mind open, getting ready for broke rules.
On the other hand, one should respect and know the standards.

In the case of Debito UI, the right equation was the result of three factors:

User requirements  +  User Needs  +  State of art

Pretty interesting, isn't it?

Would you like to know more about me?

Write me, add me on LinkedIn´╗┐, poke me. :))


I am always up for a chat, possibly while drinking a warm and delicious cup of tea
(that's right, I am an Italian guy who does not drink coffee).


┬ę2017 Daniele Internicola.