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 purchases¹. 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.

Wireframes

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

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

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.

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.

Form flow

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

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.

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

Forms

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

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.

---