André Lopes

Topper, a Web3 On-Ramp Payment Widget

topper-main-mockup

Client

Uphold

Year

2022 - Ongoing

Project type

B2B/B2B2C Product

Industry

Fintech, Web3, Cryptocurrencies

My responsabilities

My role in this project was as the main designer, collaborating with another designer. I was responsible for everything from the discovery workshops, task-flows, user journey maps, wireframes, prototypes, and testing, to the visual design and the design system creation.

Team

Nelson Alves (Head of Design), André Lopes (Product Designer), Joel Enes (Product Designer), Rita Vaz (Product Manager), Ricardo Santos (Delivery Manager), André Cruz (Backend Lead), André Gonçalves (Frontend Lead), Jack Murdock (Backend Engineer), André Geraldes (Frontend Engineer), Joana Martins (QA)

Work done at

Untile

Tools

Who's Uphold?

Uphold is a multi-asset digital money platform offering financial services to a global market. Uphold's unique ‘Anything-to-Anything’ trading experience enables customers to trade directly between asset classes with embedded payments facilitating a future where everyone has access to financial services.

Serving 180+ countries, across 200+ currencies (traditional and crypto) and commodities with frictionless foreign exchange and cross-border remittance for members around the world. Since its launch in 2015, Uphold has powered more than US$4+ billion in transactions.

What did they want to do?

Uphold’s custodial wallet, a B2C product, is already providing great results. Their enterprise team wanted to build an on-ramp payment platform that would allow new customers to buy cryptocurrencies with ease, using as leverage the already well-implemented wallet and exchange platform that they already had.

This was meant to be a completely new product inside their brand, so we we didn’t have the need to follow a certain structure of styleguide for this new project.

How was it done?

We started out with a simple idea of what the goal was and a lot of work was still ahead.

First, we needed to understand the problem that Uphold was trying to solve and at this point we knew nothing about it. The more we dove into this project, the clearer the path became.

The design process was not linear at all and was cyclical instead. We would many times return to research after we defined or ideated and found out that it would be either too challenging for an MVP or either not feasible due to legal or compliance regulations.

So we started with workshops with the key stakeholders and discovery sessions with the team, in order to start asking questions.

What can we do?

What can’t we do?

What type of payment methods will we have?

How are we going to deal with KYC?

How are the fees going to be calculated?

How is the authentication process going to be?

And many, many more.

While getting the basic understanding of the project, it was also necessary to research what competitors were doing.

We also took the chance to do some interviews to gather insights about what would crypto buyers and small business owners value the most on an on-ramp platform.

Without this user research, we would be basing all of our work on assumptions and this allowed us to walk on a more stable ground.

After this initial research, some clear flow patterns started to become evident. At the beginning, these seemed pretty straightforward.

This brought us to the initial task flows, where we started to map out all our assumptions as quickly as possible so that we could iterate upon them.

As we started to explore more, by having daily discussions with the technical leads and product manager, the flow started to increase its complexity.

A very big challenge was getting the approval of the legal and compliance team, that were making sure that everything we did, was safe for the users and for Uphold, as well as considering potential illegal and money-laundering activities.

Once we all felt comfortable with all of these more than 20 iterations on this first flow, we then had all the necessary conditions to evolve into lo-fi wireframes.

At this moment, we could then start to think about edge cases, error scenarios, unpredictable errors, server errors, transaction failures, and so on.

This was the perfect moment to start testing using lo-fi prototypes and get a full overview of the overall purchase experience.

From the beginning until this point, this process took around 3 months until we felt comfortable to move on to the next stage.

After a few months of this initial iterative process, and after ending up discarding some features in order to speed up the go-to-market time, we then were all set to move to the next step: the Look & Feel.

Before moving to this step, some research was needed to understand this new product’s values. This whole new look needed to transmit these values without telling the user about them.

After a few months of this initial iterative process, and after ending up discarding some features in order to speed up the go-to-market time, we then were all set to move to the next step: the Look & Feel.

Having the Look & Feel ready, we started to plan out and build the Design System. Here are some examples:

We started building this Design System using the Atomic Design principles by Brad Frost, which lets us create everything from foundations that build smaller parts that build components, and so on.

Also, this required constant validation with the Front End team to ensure consistency not only in components, but that also that smaller and micro-interactions and animations were being taken into account as well.

What was unexpected?

Like in any other project, challenges are a part of the process and this one was no different. As we iterated during the exploration phase, we found some challenges.

Being an on-ramp platform, meant increased security. Because everyone can transfer fiat to crypto, and to prevent money laundering schemes, there was a need of an increased security, not only for the customers but for the company as well.

The solution was integrating a KYC flow that complied with all the regulations. To not add the less friction to the experience as possible, we defined different levels of KYC as the user will transact higher amounts.

Jurisdictions are different between geographical zones or countries. Dealing with a country’s jurisdiction requires a long process of meeting up with the legal team, let alone the 4 different regulatory and political zones worldwide.

This meant having not only one flow, but have them adapt to different settings according to the different jurisdictions. We added several lanes of the same flow that would be specifically tailored to the users' jurisdictions.

We couldn’t use the wallet’s user profiles so that they could sign in with an already existing account. Besides the technical challenges at the time that this was being developed, Uphold also didn’t want to use this new platform as a gateway to gather new customers to the wallet app.

The solution was to create a new passwordless sign-up flow that also included a 2FA using the phone number.

What was the result?

The result was a clean, immersive UI that translated security, trustworthiness and versatility. This was the MVP that was being made to reach the market as soon as possible to meet the needs of partners.

We were able to deliver a fully compliant payment widget that allowed partners to serve their customers with a solution with a card acceptance rate well above the market average with some really competitive fees.

As we now gather daily insights on the experience, either from analytics or from partners and even users, we’re constantly improving this product's value by adding features that were either left behind, or are needing some re-thinking.

In its first four months of existence, Topper has been increasing on average 30% their transaction volume, month after month.

Next project - Cotec / Universidade Nova