Portfolio | Marco Pasquato

IoPago is an app that has been developed recently to give its users zero interest loans for paying in stores, with a buy now pay later model similar to Klarna and Scalapay.

Problem statement and requirements

While doing maintenance of the existing app, it is required to add a new product: a credit card that let users divide payments into installments. This card won’t be free and some eligibility conditions have to be met by users.

Process

From ideation to implementation, in close collaboration with legal and dev teams

Exploration phase

Gathering and defining requirements

Customer Journey mapping

Design phase

Lo-fi
wireframing

Hi-fi
wireframing

Customer Journey mapping

Mapping all segments of users to identify improvements

First step was identifying different segments of users:

Prospect
users

People that have never been Busso’s clients and never downloaded IoPago

New
customers

People that are Busso’s clients, but don’t know about IoPago app and services

Eligible
customers

People that are Busso’s clients with qualified past payments

Temporary ineligible
customers

People that downloaded IoPago but never made a payment

Customer journey were then mapped for each segment with the to be experience in mind, including as is phases inherited from the existing app.

An example of one of the customer journeys mapped.

Mapping through segments revealed all the complexity for each type of user. Special importance was given to early stages of the CJ and how the already existing flow would integrate.

High level wireframes were embedded into the customer journeys to give tangible examples when sharing to all stakeholders (product owner, managers, developers) during extensive validation meetings, contextually finalizing the product’s specifications.

Lo-fi wireframing

User flows taking shape

Wireframes were jot down following all use case emerged from customer segments. All corner cases were covered, using a user flow-like representation that set out clearly conditions and error states.

Partial representation of the wireframes for the Awareness and Activation phases.

Cyclical reviews were made in order for the design to respect back and front end limitations as much as meeting compliance requirements.

Hi-fi wireframing

The final UI

One important step was differentiating the free-to-use buy now pay later service, which used a qr code system to pay in stores, from the new credit card product, since they had the same naming. We achieved it in the homepage in the first place, by using a carousel which let people switch from the qr code to the card, contextually changing functionalities.

What I learnt

Interacting with the whole team using an agile methodology was one of the key learning, as communicating regularly with developers. One important UX-related skill I learnt were tackling product complexity, creating clear product communication and overcome technical limitations.

IoPago

Table of contents

Overview

Process

Customer Journey mapping

Lo-fi wireframing

Hi-fi wireframing

What I learnt

Do you want to see more?