UniCredit acquisition landing pages and forms

UniCredit wanted to reach a wider range of clients. I helped them increase the conversion rates of their mobile pages.

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 are not mobile friendly. An overhaul is essential for the bank to remain competitive.

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

It’s 2013. A small percentage of Italians use smartphones for online services or purchases1. UniCredit see the potential of mobile and wants to widen their customer base by reaching a younger audience. 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.

Observational research

To understand how straightforward it was to find the information they needed on the landing pages, we observed ten people performing a task.

Recruiting: we screened people reached through our network of clients and collaborators to make sure we tested at least 10 users. Target users: people under 30 who don’t have a bank account yet, or wish to switch banks. Task: starting from an ad on Google, find the information needed to switch banks or to open an account with UniCredit.

I distilled the research insights into customer journey maps. 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 content, annotations on a screenshot
The proposed content, annotations of a sketch of a page
Analysis of the current landing pages structure (first) vs. Content strategy proposed (second)

Wireframes

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

A screenshot of the page contained in a phone, a writing that says 'Content available on tap: conditional loading'
A screenshot of the page contained in a phone, a writing that says 'The support team is one tap away: reassurance'
Details of the landing pages wireframes: mobile
  • Each feature block is conditionally loaded: their content is served upon tapping 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 adaptive capabilities of the framework.
A screenshot showing desktop wireframes with annotations
Details of the landing page wireframes: desktop
A screenshot showing desktop wireframes with annotations
Details of the landing page wireframes: desktop

Interactive header

My colleagues and I felt that having the Calls to Actions repeated at the end of each product feature wasn’t the best output. Instead, we went for a dynamic solution: an interactive header where the Calls to Actions switched to the Free number button if the former were already visible in the screen.

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 — serving as a security verification — and will receive an email from UniCredit with a link to continue with the request.

The flow diagram of the first part of interaction with the forms
Form flow, entry point

Form flow

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

The flow diagram of the second part of interaction with the forms
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.

A screenshot of the page contained in a phone, a writing that says 'Input fields are the right size to tap'
A screenshot of the page contained in a phone, a writing that says 'The lock icon,combined with clear content and fast loading, reassures users'
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 a 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

Screenshots of the landing pages on different devices
Landing pages final design

Forms

Screenshots of the forms on different devices
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 years3.

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.


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

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

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

✍🏻 Hire me →

Reply via email, send webmentions or interact on Mastodon.