UniCredit landing pages and forms

UniCredit Bank wanted to reach a wider range of clients. UI Farm helped them increase the conversion rates of their mobile pages. UX case study by Silvia Maggi.

The problem

UniCredit, a leading European commercial bank headquartered in Italy, wants to leverage the increasing use of smartphones to reach a wider range of clients. Their acquisition landing pages and forms look outdated and not mobile friendly. An overhaul is essential for the bank to remain competitive.

The solution

Within a single codebase, we created custom experiences for smartphone, tablet and desktop to replace the existing pages and forms. The goal was to increase their trustworthiness and conversion rates.

My role

I led the project and worked on the UX and final designs. My colleagues at UI Farm provided valuable feedback, collaborating to devise the best content strategy. Their expertise completed the project with state-of-the-art frontend and backend development.

Sneak peek: the process in pictures

Continue reading to know the how and why, and see more.

The context

It’s 2013. In Italy, a small percentage of people uses smartphones to go online; even fewer to make purchases. UniCredit sees the potential of mobile and wants to invest to widen their customer base, reach younger people and innovate.

[…] in 2013, only 37 percent of users [aged 16 years and older] used their smartphones to go online, while 84 percent declared to have such a habit in 2017.

Statista Research Department

To do so, they contacted UI Farm, the London-based web agency I co-founded that specialised in device-agnostic responsive design. After extensive meetings with UniCredit, we understood why their potential clients were less likely to open a bank account from a mobile device:

  • Slow technology adoption in an aging society.
  • Lack of trust in new technology.
  • Historical preference for in-person services, which feel personalised and safer.

Over the period of consideration [2013 – 2018], purchases via smartphone increased from barely six percent to over 26 percent of total online purchase in Italy.

Statista Research Department

Together, we devised a content strategy to build trust through the user interface.

Meet the personas

UniCredit know their customers well, thank to their continuous usability and A/B tests. However, they still had questions our work aimed to answer:

  • To what extent the landing pages help our customers upgrade their products?
  • Is it easy to find information on how to switch banks?
  • Will people request our products online?

Based on existing data, and observations of a group of ten people I gave tasks to perform, I developed three personas:

  • Marco, 18, student.
    He never had a bank account and is looking for a solution to buy and receive money without opening one.
  • Elisa, 28, manager.
    She has an account with a competitor but would like to switch, if the process is straightforward.
  • Giulio, 45, employee.
    He is a UniCredit client whose curiosity about the internet banking is growing, despite online security being a concern.

The customer journey maps follow the actions the personas take to reach their goals. I chose them over user flows because they highlight thoughts and emotions, useful to identify a journey’s pain points.

Marco

Click on the image to see it full screen.

Elisa

Click on the image to see it full screen.

Giulio

Click on the image to see it full screen.

Content analysis

At UI Farm, content preceded design. Even before starting to sketch, the focus was on content and its prioritisation. This is also related to performance, which is treated like a design element.

Together, we analysed the content of the existing landing pages and proposed a solution to UniCredit.

UniCredit - content analysis
Analysis of the existing content

Notes

Point(s)Description
2The navigation is isolated and, with its low-contrast features, barely visible.
3, 4The visual, title, subtitle and call to actions are all images.
5The steps to complete the request are presented before the product feature are explained.
6First product feature’s within an open accordion.
7Each feature presents the product PDF and call to actions.
9The free number anyone can call to get help is below the legal message. With the exception of the campaign claim, the text is very low-contrast and small.

Content strategy

UniCredit - content strategy
Our content strategy proposal

Notes

Point(s)Description
2More prominent navigation. Aiming for higher contrast ratio between foreground and background for accessibility.
3, 4The product visual will be an image, while the rest will be HTML/CSS, ensuring that they will adapt to every screen. The page performance will improve too, with fewer HTTP requests and better use of bandwidth.
5On desktop, each product feature will be presented in full, without accordions.
6The process steps are visible below the product features.
7Same look & feel as the bigger ones, for consistency. These also represent the last way out, positioned strategically after all important information.
8The free phone number and product PDF will be more visible and readily available in this area.
9Elements needed either for legal or marketing reasons, but doesn’t directly serve users, is in the final footer with a better contrast ratio for accessibility.

Wireframes

After UniCredit signed off a modified proposal, I proceeded to prepare the wireframes. Thanks to UI Farm’s framework, I was able to rapidly prototype the pages directly in-browser.

Mobile

  • Each feature block is conditionally loaded. Their content is served only when users tap the accordion. The same goes for the legal message at the bottom of the page.
  • At UniCredit’s request, each block contains the Calls to Actions. The product PDF is visible in one place only, between the product features and the process steps.
  • Tapping the free number will initiate a phone call to the support team, thanks to the adaptive capabilities of our framework.

Click on the image to see it full screen.

Desktop

Click on the image to see it full screen.

My colleagues and I wanted the work for UniCredit to be something to be proud of for years to come.

Sticky header

My colleagues and I wanted the work for UniCredit to be something to be proud of for years to come. Thus, we felt that having the Call to Actions at the end of each product feature wasn’t going to reflect our best output.

We sat down together to find a solution that was technically feasible, elegant, and that would allow us to stay within budget and timeline.

The solution, which UniCredit approved, was a dynamic sticky header.

Mobile

Click on the image to see it full screen.

When the Call to Actions are visible in the page, the sticky header shows the Free number button instead.

Click on the image to see it full screen.

Tablet

Click on the image to see it full screen.

Desktop

Click on the image to see it full screen.

The setback

The client tasked us with creating a limited number of landing pages and forms. Those would then be tested and treated as templates for future use.

At this point, with the landing pages project almost finished, we found out that there were going to be technical limitations to our work. We weren’t going to implement them: another web agency hosted and managed the pages on a dated infrastructure.

After a somehow stressful back and forth, and compromises on both parts, we managed to overcome the technical issues and guarantee UniCredit the results we promised.

Acquisition forms

When users click on the Call to Action Request it online, they land on the UniCredit acquisition forms. From there, they are guided through a four-step straightforward procedure.

User flows

Starting point

On a landing page, click on Request it online, wait to receive an email from UniCredit.

Click on the image to see it full screen.

Form flow

Click on the link received via email and start the request process.

Click on the image to see it full screen.

Wireframes

We applied the same principles to the forms, except we couldn’t implement the sticky header.

Some elements on mobile were conditionally loaded, and users had the ability to contact the Free number for assistance. In this case, the process steps are the first element users are going to see after the header.

Of great importance is the the lock icon at the top right: together with the browser icon for secure connections, it will reassure users this is a safe procedure.

Click on the image to see it full screen.

Final result

Having started the wireframing phase in-browser meant that, once the client was happy with the result, I could work on the visual design directly in HTML/CSS.

Using SASS, I could rapidly wrap reusable elements — such as brand colours, typography, buttons — into variables and patterns. My colleagues could simultaneously work on the functionality of both pages and forms.

UniCredit had live access to the prototype and could interact with us, commenting on the progress as needed through our JIRA board. Soon, we were ready to deliver and wait for the client to start the testing phase.

Landing pages

Click on the images to see them full screen.

Forms

Click on the images to see them full screen.

Conclusions

Months later, UniCredit reported bittersweet news to us. The landing pages had been received well, but the number of people that used the online forms didn’t increase much: the experiment wasn’t successful.

While the landing pages redesign implementation received the go-ahead, the forms didn’t.

We couldn’t change people’s mind on mobile and online services: the shift happened during the following years, gradually.

[…] the number of users of banking services such as home and corporate banking steadily increased, growing from approximately 30.4 million in 2010 to nearly 58 million in 2019.

Statista Research Department

This project proved how important culture is when designing. Getting to know the context of use, how a population responds to changes and the cultural reasons behind behaviours is paramount to avoid costly mistakes.

Furthermore, without testing, UniCredit might have ended up with a redesign that didn’t make any difference for its users.

I consider this work a success, despite only half of it had the final approval. I’m glad UniCredit trusted us enough to bet on the result, as we all learned a lot along the way.

Years later, we’re still proud of our work.

Client review

UI Farm’s innovative workflow and unique skills has given us a very clear insight into our customers’ behaviour and preferences, which has considerably boosted our account application conversions. Thanks to UI Farm’s approach, we have been able to significantly improve the experience delivered to our customers and prospects, and make changes that may have seemed minor to us but have resulted in significant conversion lifts. UI Farm has truly changed our approach to Interaction Design.

Gabriele Rosati, Head of Interaction Design at UniCredit.

Further information

🔗 View the Acclimatize.me case study

Contact

✒️ Get in touch for comments, feedback or if you wish to work with me.

About

About Silvia Maggi - UX Designer
Silvia Maggi, UX Designer

I strive to create meaningful, user-centric experiences. A member of the Interaction Design Foundation, I’ve lived and worked in the UK, where I co-founded the web agency UI Farm and worked in many fields, including the energy sector.

🔍 Find out more

By Silvia Maggi

I'm a UX Designer based in Italy. I strive to create meaningful, user-centric experiences. On my blog, I write about about design, tech, their implications in our lives and the occasional photography work.