Finding stores through augmented reality in a fintech app.

A design challenge to improve the experience of an existing mobile app with high-fidelity designs.

The goal: research, find areas to improve, and propose design solutions that make the app easier to use and more satisfying.

1. 01

   Research

2. 02

   Ideate

3. 03

   Design

4. 04

   Test

Klarna is a Swedish fintech company offering online payments, direct payments and post-purchase payments. It’s a prominent player in buy-now-pay-later, with over 90 million users globally.

Survey

When I asked which fintech apps people use, Klarna came up often. I surveyed Klarna users and read Trustpilot and app store reviews to understand their preferences and pain points.

Persona · Ellie

The research pointed to a clear need: improve the map feature. Fixing it is a real chance to raise satisfaction and keep people engaged.

Klarna’s main competitors are Afterpay, Clearpay and PayPal. Most offer the same things — instalments, payment tracking, budgeting — so Klarna needs to differentiate. Meanwhile AR is becoming a valuable way to engage users (Google Maps, Snapchat, Instagram), and reviews kept asking for innovative, valuable features.

Revolut

Clearpay

I used storyboarding to imagine scenarios where AR could give more than directions — real-time information like promotions in nearby stores and alerts about exclusive discounts.

I started by studying Klarna’s existing screens so the new designs would match its branding and experience. Low-fidelity wireframes set the layout grid, frame ratio, spacing, alignment and element placement.

Wireframe 1

Wireframe 2

Reference screens

AR view

3D asset

Icon component

I recreated the final designs, including new icons where needed, focused on the map feature screens.

• AR tools

  Researched AR tools for real-time functionality and chose Weavely and its plugin for suitability and efficiency.

• 3D assets

  Created 3D assets in Figma with layer blur and inner shadow. Weavely didn’t support those effects, so I recreated the 3D look manually.

• Design system

  Compiled a documentation page covering every component used.

I finished by testing the interactive prototype to make sure it met the objectives and worked as intended.

Summary: reference gathering → low-fidelity wireframes → high-fidelity AR map screens, with a documentation page explaining the components and rationale.