UniCredit acquisition landing pages and forms

UniCredit acquisition landing pages and forms

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.

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 development.

The context

In 2013, only 37% of users used their smartphones to go online, while 84% declared to have such a habit in 2017. […] Between 2013 and 2018, purchases via smartphone increased from barely 6% to over 26% of total online purchase in Italy.

Source: Statista Research Department 1 and 2

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. To do so, they contacted UI Farm, the London-based web agency I co-founded that specialised in device-agnostic responsive design. We focused on why their potential clients were less likely to open a bank account from a mobile device:

  • slow technology adoption in an ageing society;
  • lack of trust in new technology;
  • historical preference for in-person services, perceived as personalised and safer.

We devised a content strategy to build trust through the user interface.

Understanding the users

UniCredit know their customers well, thanks to their continuous research and usability tests. However, they still had questions our work aimed to answer:

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

Cross-referencing existing data with my research, I created customer journey maps for each persona.

Customer journey maps

To understand how straightforward it was to find the right information on the landing pages, I gave ten people a task and observed what they did. The maps follow the actions the personae 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.

Content strategy

Content precedes design. Even before starting to sketch, the focus is on content and its prioritisation. This is also related to performance, which I treat like a design element. After analysing the content of the existing landing pages, we proposed a solution to UniCredit.

Analysis of the current landing pages structure vs. Content strategy proposed
Analysis of the current landing pages structure vs. Content strategy proposed
Analysis of the current landing pages structure (first) vs. Content strategy proposed (second)

Wireframes

Thanks to UI Farm’s responsive framework, I prototyped the pages directly in the browser.

Details of the landing pages mobile wireframes
Details of the landing pages mobile wireframes
Details of the landing pages wireframes: 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.
  • The free number button initiates a phone call to the support team, thanks to the adaptive capabilities of the framework.
Details of the landing page wireframes: desktop
Details of the landing page wireframes: desktop
Details of the landing page wireframes: desktop
Details of the landing page wireframes: desktop

Clever sticky header

My colleagues and I felt that having the Calls to Action repeated at the end of each product feature wasn’t the best output. We found a solution that was technically feasible and elegant.

The solution, which UniCredit approved, was a dynamic sticky header: when the Calls to Action are already visible in the page, the sticky header switches to show the Free number button.

Dynamic sticky header on mobile
Dynamic sticky header on mobile
Dynamic sticky header: mobile

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 procedure.

Entry point

Users encounter an initial brief form — that works as a security verification — and will receive an email from UniCredit containing a link to continue with the request.

Form flow, entry point
Form flow, entry point

Form flow

Users click on the link received via email and start the request process.

Form flow
Form flow

Wireframes

We applied the same principles — conditionally loaded elements, ability to call the support from mobile. Of great importance is the the lock icon at the top right: together with the browser icon for secure connections, it reassures users this is a safe procedure.

Details of the forms wireframes, mobile
Details of the forms wireframes, mobile
Details of the forms wireframes: mobile

Final result

Having started the wireframing phase in the browser meant that, once the client was happy with the result, I could work on the visual design directly in HTML and CSS. Using SASS, I could rapidly create reusable elements — such as brand colours, typography, buttons and content modules — using variables, mixins and patterns. My colleagues could simultaneously work on the functionality.

UniCredit had live access to the prototype. They interacted with us in real time, commenting on the progress through our JIRA board. We delivered a landing page for each product, a generic template and a detailed style guide. At this stage, a third party started the testing phase.

Landing pages

Landing pages final design
Landing pages final design

Forms

Forms final design
Forms final design

Conclusions

The landing pages had been received well and boosted conversions. However, the number of people using the online forms didn’t increase significantly. While the landing pages redesign received the go-ahead, the forms didn’t. In fact, the shift toward mobile and online services happened gradually during the following years.

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.

Source: 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 reasons behind behaviours is paramount to avoid costly mistakes.

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

🔗 Read about UI Farm’s workflow for the multi-device Web

Contact

Get in touch to talk about your next project.