SmartBank app screens

Banking App for Startups/SMEs — SmartBank

Product Design • UX Research • Fintech • Mobile

SMARTBANK · 2021–2022 · LEAD / SENIOR PRODUCT DESIGNER

SMEs make up 70% of the Brazilian economy, yet their owners were served by bank accounts copied straight from the personal-banking model. SmartBank set out to change that: a mobile-first banking experience designed around the real needs of people running a business.

The Context

SMEs make up 70% of the Brazilian economy and employ nearly half of the country's population. Even so, the big banks offered business accounts that were essentially copies of personal accounts — ignoring the fact that business owners have completely different needs from an individual customer.

SME owners have an endless list of tasks to manage every day. They need to issue boletos, make transfers, track sales reports, manage a corporate credit card and use Pix — all on the move, often from their phone. The existing banking experience simply wasn't designed for that pace.

Summary

The big banks offered business accounts that were just copies of personal accounts — with no regard for the real needs of someone running a business. SME owners needed tools for boleto, Pix, transfers, sales reports and credit card management — all in a mobile app that respected the fast pace of an entrepreneur's day-to-day.

The Challenge

SmartBank hired the team to build a relevant, mobile-first banking experience for SME owners. My role was Lead / Senior Product Designer: bringing in findings from earlier research with business owners, running new field research, and translating the insights into product design.

The first deliverable was the design of the Boleto flow for mobile — one of the most critical features for Brazilian SMEs and one of the most friction-heavy in existing banking experiences.

My Role

Lead / Senior Product Designer. Responsible for UX Research with SME owners, designing the main flows, prototyping and usability testing.

My Approach

The process combined deep field research with fast cycles of design and validation. The methodology included mixed research techniques like ethnography, shadowing and interviews — with both end users and stakeholders — before any design decision was made.

Structure

The project was structured in three phases:

Research and immersion: ethnography, shadowing and interviews with SME owners and stakeholders.

Ideation and task flows: defining the 6 core flows, starting with Boleto for mobile.

Prototyping and validation: Figma prototypes, a Service Design Blueprint and usability testing with real SME owners.

Phase 1 — UX research

We observed SME owners in their real work environment. We followed how they managed payments, issued boletos, made transfers and checked their balance — financial tasks that happen in a range of contexts and almost never in a controlled office setting.

Before any wireframe, I went into the field. Ethnographic research and shadowing with SME owners showed how they actually managed the business's money: which device they used, at which points of the day, in what context.

Interviews with stakeholders and end users

Interviews with business owners revealed consistent shared needs: mobile Boleto, Pix, Wire Transfer, an easy-to-read statement, a sales report and corporate credit card control. These were the gaps the big banks weren't solving.

Interviews with stakeholders and end users revealed six features that concentrated most of the needs — the gaps the big banks weren't solving for business owners.

Main Gaps

  • Boleto for mobile — simplified issuing and payment
  • Pix — instant payment (essential in post-2020 Brazil)
  • Wire Transfer — bank transfers
  • Statement — a quick read on cash flow
  • Sales Report — an integrated sales report
  • Credit Card — issuing and managing a corporate card

KEY INSIGHT

SME owners didn't need a personal account with a business label. They needed a banking app built for the pace of running a business: fast, mobile-first and focused on the six tasks they repeat every day.

Phase 2 — Ideation and task flows

With the findings in hand, the team ran ideation sessions to define how each feature would be experienced. Task flows were created for the 6 main flows — making sure the app's architecture supported the users' mobile-first context.

Task Flows

Each core feature got its own task flow. The Pix flow covered first access, key registration, portability and claim requests, limits, notifications and error states.

Designing Boleto for mobile — the first critical feature

Boleto was the starting point — and the most complex feature. Many banking apps turn the boleto into a slow, field-heavy, bureaucratic process. We redesigned the flow for mobile: scan the barcode, review the details, and pay in under 30 seconds.

UI flow of boleto issuing (wireframe): onboarding, main issuing path, payer registration, contacts and logo flows

With Boleto defined, the same approach shaped the remaining features — Pix, Wire Transfer, Statement, Sales Report and Credit Card — all designed for quick access and use on the move.

Task flows and features designed

  • Welcome walkthrough and first login
  • Business sign-up for owners and partners
  • New device validation (selfie + quiz)
  • Home dashboard with balance
  • My account: personal and company data
  • Access and Authorization Passwords
  • SmartBank token
  • Close account
  • Bank transfers (TED)
  • Scheduled and recurring transfers
  • Transaction limits
  • Statement with filters and details
  • Export statement to PDF
  • Bill and boleto payment
  • Deposit via boleto
  • Boleto issuing with brand and contacts
  • Sales report and boleto details
  • Boleto receivables advance
  • Card receivables advance
  • Pix key registration and management
  • Pix key portability and claims
  • Pix pay and transfer
  • Pix charge and receive (QR code)
  • Pix limits
  • Pix statement, scheduling and refunds
  • Card issuing and activation
  • Card transactions and denied purchases
  • Card center: password, block, cancel
  • Virtual card and verification code
  • Travel notice and ATM locator
  • Court-ordered balance block
  • Help and call-center handoff

Phase 3 — UI Design

Figma prototypes were built for every feature. A Service Design Blueprint documented the behind-the-scenes flows — both what the user sees and what happens in the backend for each operation.

Design System

Built from the SmartBank UI kit and the complete Pix flow: the kit’s palette as primitives, 40 semantic tokens, a type scale and 17 components with their states.

Design system — Color1 / 5

UI Design

High-fidelity screens for the core features: dashboard, account opening, boleto issuing, card issuing, statement, sales report, boleto advance, automatic reconciliation and payments — plus the complete Boleto flow.

SMARTBANK · ONBOARDING

Welcome walkthrough and first login

A short walkthrough introduces the account, followed by first login, access password recovery and error handling.

Welcome walkthrough and first login — screen 1
Welcome walkthrough and first login — screen 2
Welcome walkthrough and first login — screen 3
Welcome walkthrough and first login — screen 4
Welcome walkthrough and first login — screen 5
1 / 32

Results

The project delivered a banking experience built from scratch for SME owners — not an adaptation of a personal account. The 6 core features were designed with a focus on mobile context and use on the move.

The design was validated with real users through usability testing, and every flow was documented end to end — from task flows and high-fidelity prototypes to a full Service Design Blueprint.

6 featuresdesigned and prototypedBoleto, Pix, Wire Transfer, Statement, Sales Report and Card management
Blueprintfull service blueprintFront-stage and back-stage flows documented for every feature
70% of the economyaddressable marketSMEs underserved by the big banks — an opportunity validated in research

My Work