Zapp

Zapp Mobile

Keeping a payment moving across devices.

My role
Freelance Lead UX/UI Designer
Engagement
May 2014 — Sep 2014
Platform
Fintech / Mobile
Focus
Payment explanation and cross-device handoff
01 / Problem

Explain a new payment method and the handoff it requires.

I led UX and UI for Zapp’s mobile payment products, including a purchase that needed to continue in a banking app on another device.

Explain how a payment continues across devices.The purchase and the banking app are brought into focus as parts of one cross-device journey.
Explain how a payment continues across devices.
02 / What exists today

The purchase can begin on a device without the required bank app.

The original R1 overlay addresses that specific state. A separate introduction explains paying from the phone through the bank account underneath it.

The purchase can start somewhere the required banking app is not.A purchase device, a banking app on another device and the handoff instructions appear separately.
The purchase can start somewhere the required banking app is not.
03 / What’s wrong

Changing devices can break the person’s understanding of the next step.

The handoff needs to explain why the journey moves, where to continue and which code to carry. The source designs establish this situation; they do not include measured abandonment or completion rates.

A device change must not leave the next step behind.The cross-device gap separates the destination, action and code a person needs to continue.
A device change must not leave the next step behind.
04 / What I explored

Explain the reason, then give the steps and the code together.

The original work uses one proposition and a Next action for the introduction, followed by numbered instructions for the cross-device handoff. Earlier alternatives are not included in the surviving archive.

Keep the reason, instructions and code in the same handoff.Three explanatory studies emphasize why the device changes, the numbered actions and the code to carry.
Keep the reason, instructions and code in the same handoff.
05 / Low-fi architecture

Connect the introduction to a clearly explained handoff.

This reconstruction follows the original mobile introduction and R1 instructions. It does not invent payment completion, validation or transaction-history screens.

System flowHow the pieces connect
Inputs
  • A new payment concept
  • No banking app on this device
The interaction
  1. 01Explain the payment method
  2. 02Open the banking app elsewhere
  3. 03Select Zapp and enter the code
Outputs
  • A clear next step
  • A cross-device handoff

The instructions and code remain together while the person continues on another device.

06 / Wireframes

Keep the instruction available while the device changes.

The two reconstructed frames cover introduction and handoff. The displayed code is illustrative.

Wireframe sequenceExplore the sequence
01 / 02

Make the product proposition readable

ZAPP
A new way to pay
Pay on your mobile
Directly from your bank account
Next
01The wireframe preserves the original screen’s product, explanation, and progression hierarchy.

Reconstructed from the original Zapp introduction and LinkedIn R1 handoff presentation; the example code is illustrative.

07 / Solution

Give the next device a clear role in the same journey.

The R1 instructions explain how to open the banking app, select Zapp and enter the displayed code. The original images below retain the source context; the utility-app image is a separate proof of concept.

08 / Research

The handoff design is documented; its success rate is not.

No participant study accompanies these recovered mockups. A useful evaluation would test whether people understand the device change and can carry the instruction and code across it.

Understanding the handoff is the evaluation still to do.Open questions ask whether a person understands the device change and can carry the instruction and code across it.
Understanding the handoff is the evaluation still to do.
09 / Outcome

A visible design response to a cross-device payment problem.

The original artifacts establish the introduction and handoff work. They do not establish a completed-payment outcome or a measured change in conversion.

The work makes a cross-device payment step understandable.The documented introduction and device-handoff artifacts are connected without inventing a payment-completion result.
The work makes a cross-device payment step understandable.

Want to talk through the design decisions?

1ONICA FM

Choose a perspective. Access is approved personally.

Public mode is open to everyone. Other perspectives open by invitation.

Level 010 XP

100 XP to the next level

Your progress stays in this browser.