top of page
coverquale.png

My Role

UX Designer, Information Architecture, Interaction Designer

Tools

Pen & Paper, FigJam, Figma

Deliverables

UX and UI Design for the whole website

The Problem

This Italian Company had a low performing website which was lacking of clarity of Information Architecture and appeal. This represented a huge issue, since the service offered is related to finance, savings and payment tools available in the Country. Users weren't comfortable in trusting their website to gather the sensitive informations they were looking for, and they would leave searching for other platforms. (source: user feedback and Analytics provided from the Company)

The process

Stakeholder Interview;

Analyze problems in an existing website;

Validate my assumption as a pain-point;

Back my hypothesis with data;

Communicate my design process;

Implement design solution that meets user needs.

The Solution

I adopted the Design Thinking approach to get initial direction in this project, after which I used this process to iterate as I discovered new insights. The result is a smooth and professional looking website where any user can find what they're looking for at a glance, giving the same importance to the business' objectives, which are to obtain more conversion measurable through the clicks on affiliate links, and to become the go-to-resource in Italy for financial comparison services.
We added a new "test your profile" function to increase personalisation and involvement.

We added a personal dashboard to increase retention with financial tips and suggestions.

a3123d128745071.615c979b090e2.gif

Research & Analysis

MISSION:

The intent of this company is to offer as in-depth an overview as possible of the banking solutions currently available (both in terms of services and products).
They conduct analyzes and reviews expressing completely impartial opinions, according to a principle of absolute transparency and respect towards their users.

 

GOAL:

Configure themselves as a point of reference among banking services comparison platforms, offering an analysis service conducted by experts in the sector.

 

SERVICES:

For the following financial tools: 

credit & debit cards, bank accounts, Investments, Business bank accounts

the Company offers:

Comparisons

Leaderboards 

Reviews 

Blog (Tips, News)

Returns simulation

 

MARKET:

Italy

Problem Statement: How might we improve the IA to enhance usability and therefore reach the satisfaction of our users and become their go-to-source for their financial choices?

Value proposition: 

Fast, Personal, Free, Secure, Importance and Authority of the team behind the project, Innovative method of evaluation

bd765c128745071.615c979b09ca7.png

Evaluation & heuristics of the old website

At first glance of the Homepage, I notice the absence of a call-to-action. The only clues that help to understand what the platform does is the name itself and the slogan "choosing a banking product has never been so simple", on which I would focus more attention (in fact, there is an ambiguity in the slogans on the same page : “Make the right move”, “Live in the freedom”, “All you need, free and transparent”). I believed that this does not sufficiently enhance the value proposition or unique selling point of the platform. (match between system and real world heuristics)
A "big absent" is the focus on a presentation of the service and the methodology offered, which I would expect from a financial service to understand if I can trust for the management of such a delicate topic as money. Only in the footer you can find the links "About us". But even here there is a lack of information on the company behind it.
The individual pages visited, for example the rankings and the various "discover the offer" do not lead where one would expect. (eg "Find out more" on the credit card pages takes you directly to the company's website, and that's fine, but a user would like to know where it goes by clicking a button - heuristics visibility of user status). The information on the aforementioned individual pages contain too much information in no particular order: if I open the "best credit cards" page I would expect a ranking, perhaps "filterable" by parameters of interest, the possibility of reading the reviews from here or even just understanding why of that order in the ranking; I wouldn't expect to read here "what is a credit card for".
Some links are broken (eg homepage, “Find the bank product” card - “Take the test” is broken, it shows on the homepage (not even a 404…).
The main navigation is inconsistent (why are we talking about "Accounts", "Cards", "Investing", "Instruments"? How is "Investing" related to the other elements? What does "Instruments" mean, "Accounts" are not too "Cards"? - heuristics consistency of user status). The pull-down menus that appear with the mouseover are, if possible, even more confusing.

From this analysis, several usability problems emerge which are related to the organisation of the IA present on the site, which undermines the comprehensibility of the offer itself. If you don't read the “About Us” page it's really hard to understand how the scores and reviews work. I believed that the biggest problem that derives from this "disorganisation" is that the trust, which is fundamental in this context, is lacking: it is enough to note that the competitors instead focus everything on this aspect. The theme is: if I don't trust the platform, I don't trust the information it gives me. For this reason it must be the first aspect to work on.

Schermata 2022-01-16 alle 16.06.20.png

Personas: Young Intern, Professional, Manager/Business Owner

a33413128745071.615c979b0a719.png

Based on these Personas, I came up with the idea of adding a test as a main tool to guide the users, to both produce coherent results with what they might be looking for and also to give the impression of a true personalised service (which is one of the USP of the Company).

New Sitemap

275386128745071.615c979b097bd.png

Sketch & Wireframing

a04f78128745071.615c979b0a134.png
Schermata 2022-01-16 alle 16.14.57.png

The yellow post-its are my notes for the developers :)

Design System

Schermata 2022-01-16 alle 16.16.07.png

UI

The UI was done in collaboration with other 2 UI Designers in the team.

Schermata 2022-01-16 alle 16.16.16.png

Final Tests

We tested our prototype with a dozen people that matched our personas while it was still a wireframe and obtained satisfying results.

The tasks we asked to perform (in accordance with the business objectives) are the following:

"You want to understand which account is best for your needs, what are your steps to find out?"
"You are interested in opening a new bank account free of charge, where can you find this information?"
"Where would you look to find out which deposit account has the highest yield?"
"Do you want to read the reviews of other users on the X bank account, where would you browse?"
"Where would you click to compare the banks"

Next Steps

As of today, the developers are working on building the website after my handover. So we are expecting to further test once it's live to, eventually, iterate some more.

The Problem
The Solution
Analysis
Sitemap & Sketches
UI Design
bottom of page