UI/UX CASE STUDY · CLOUDP2P
Designer
Stephen Elufisan & Dominic
Year
2023
Type
Fintech · Crypto · P2P · Payments
Role
Brand Designer & Product Designer
Platform
Mobile + Web
Tool
Figma
This case study documents the end-to-end UX design process behind CloudP2P a global payment platform built to move money fast using blockchain infrastructure. The product combines a mobile and web experience, allowing users to buy, sell, swap, and manage cryptocurrencies in one place.
I worked on this project in 2023, contributing across brand design, product design, interaction design, and system thinking shaping how users experience crypto in a way that feels simple, safe, and usable.
Overview
CloudP2P is a borderless crypto payment platform that combines a P2P trading marketplace, crypto exchange, multi-asset wallet, referral engine, and security layer into a single cohesive product.
The platform is positioned as a personal crypto guardian something that guides users through complex actions, protects them during transactions, and removes anxiety from financial decisions.
What We'll Cover
Project Context
Crypto adoption is growing rapidly, yet the user experience of most platforms remains inaccessible to everyday users. CloudP2P was designed to close this gap delivering a platform where anyone can buy, sell, and trade crypto without needing to be a technical expert. This wasn't just about screens it was about making a complex financial system feel trustworthy.
Crypto is powerful, but the experience is still broken for most people.
From early exploration of the space, a pattern emerged across user behaviour, competitor platforms, and stakeholder conversations. The core issues were consistent:
Core Problem Statement
The User's Problem
Crypto users especially newcomers feel overwhelmed, anxious, and unsupported at the moments that matter most. The technology works, but the experience doesn't.
The Market Problem
Existing platforms fragment the crypto experience across multiple tools, assume technical fluency, and treat trust as a backend concern not a design responsibility.
The gap wasn't technology it was usability and confidence. Users don't just need functionality they need reassurance."
Instead of building another feature-heavy crypto app, we had a chance to rethink the experience from the ground up designing around how people actually feel when managing money, not just what they need to do.
Reduce Cognitive Load
Strip every flow to its essential steps. If a user has to think hard about what to do next, the design has already failed.
Design for First-Timers
Build every flow assuming the user is new to crypto. Power users can move fast beginners should never feel lost.
Make Trust Visible
Trust shouldn't live only in the backend. Every screen especially during P2P trades should visually communicate safety.
One Unified System
Wallet, trading, exchange, savings, and referral should feel like one product not five tools stitched together.
The Central Design Tension
Crypto Is
Design Must Feel
CloudP2P as a personal crypto guardian.
Not just another trading tool. A system that actively supports the user guiding them through complexity protecting them at high-risk moments, and making financial confidence feel achievable.
Guides
Clear, step-by-step flows that eliminate confusion and build confidence through every interaction.
Protects
Visible escrow, clear confirmations, and security feedback that reassures users during high-stakes moments.
Removes Anxiety
Reducing fear at critical moments especially when sending money, confirming trades, or transacting with strangers.
Every design decision on CloudP2P was filtered through three core principles. These weren't aspirational values they were active constraints that shaped what made it into the product and what was cut.
Clarity Over Cleverness
Crypto products often try to do too much surfacing data, charts, and options that impress but rarely help. I focused on making things obvious instead of impressive.
In Practice
Design for Trust
Every screen had to answer one question: "Does this feel safe?" Trust isn't just a backend feature it's a design responsibility.
🔒 Security as UX
PIN setup, escrow states, and confirmations are designed into the experience not bolted on.
✅ Visible Confirmation
Clear pre-action confirmations and post-action feedback reduce ambiguity at critical decision points.
🤝 P2P Transparency
Escrow status, transaction states, and counterparty details are always visible and understandable.
📊 Honest Data
Pricing, fees, and conversion rates are shown upfront no surprises at checkout or confirmation.
Reduce Anxiety in Key Moments
These are the three highest-anxiety interactions in any crypto product. The design had to actively support users through them.
Sending Money
Amount, recipient, and fee clearly displayed before confirmation. Multi-step validation reduces accidental sends.
Confirming Transactions
Summary screens before final action. Users see exactly what they're committing to no ambiguity at the last step.
Trading with Strangers (P2P)
Escrow visualised as a clear 3-state progress system. Users always know where their money is and what happens next.
Five Systems. One Experience.
CloudP2P is built from five interconnected systems. My role involved ensuring these felt like a single cohesive product not separate tools stitched together.
Wallet
Multi-asset infrastructure
Trading
P2P marketplace
Exchange
Swap system
Referral
Growth engine
Security
Trust layer
The authentication flow covers every entry point into the platform account creation, sign in, PIN setup, password recovery, OTP verification, and security questions. Each screen is designed around one action, one decision, zero confusion.
📱 Email ↔ Phone Toggle
Consistent amber switch link lets users move between email and phone registration on every auth screen without losing context.
🔐 PIN After Fields
Security is introduced at the end of registration not at the start. This reduces upfront anxiety while still protecting the account.
⏱️ OTP Countdown Timer
A visible countdown removes uncertainty about code expiry users know exactly how long to wait before requesting a new code.
Authentication Screens — Mobile
Get Started, Sign In & Forgot Password Authentication 10 screens covering the full auth journey
Registration Flow
Recovery Flow
Onboarding sets the tone for the entire product. The goal was to orient users quickly, communicate the platform's value clearly, and get them to their first meaningful action — without overwhelming them at the gate.
Onboarding & Authentication
Onboarding sequence introducing the platform before account creation begins.
New & Existing User Dashboard
Dashboard states for new users (empty state guidance) and returning users (active portfolio view).
Dashboard Design Decisions
New User State
Empty states are treated as onboarding moments — not blank screens. Clear CTAs guide first actions: add funds, explore the market, or browse offers.
Returning User State
Portfolio balance, recent transactions, and quick-access actions surface the information returning users need most — without visual clutter.
Quick Actions
Buy, sell, swap, and send are always one tap away from the dashboard. Reducing navigation depth reduces time-to-action significantly.
Market at a Glance
Top coins, live prices, and percentage changes are visible without opening a separate screen — keeping users informed without overwhelming them.
Typography
Base: 16px · Scale: 1.25 (Major Third)
Bold / Black — Hero & Section Headlines
Bold — Screen Titles & Card Headers
Semibold — Balance Amounts & Feature Labels
Regular — Body Copy & Descriptions
Regular — Timestamps, Labels & Metadata
Colour Palette
Brand
Primary Amber
#E8A83E
Dark Amber
#C48A28
Primary Blue
#1500CD
Mid Blue
#4550D3
Light Blue
#9FA4E8
Navy
#0D0F2B
Navy Mid
#1A1C35
Foreground
#F0EDE6
Colour Roles
Amber — Attention
Blue — Action
Navy — Canvas
UI Components
Buttons
Transaction States
Asset Tags
Price Display
Buy Price
\$43,250.00 USD
Sell Price
\$42,890.00 USD
The mobile app is the primary interface for most CloudP2P users. Every flow P2P trading, wallet management, coin markets, and profile is built around clarity, speed, and trust.
Feature — P2P Trading
P2P trading is the most trust-sensitive flow in the product. The design makes the escrow process visible, transaction states clear, and counterparty information transparent reducing fear at the highest-risk moments.
Escrow Protection
Funds held securely until both parties confirm the trade
Clear Trade States
Pending → Secured → Completed always visible
Counterparty Info
Verified seller/buyer details visible throughout the trade
P2P trading screens buy offers, sell offers, escrow flow, and trade confirmation states
Feature — User Wallet
Multi-asset wallet showing portfolio balance, individual coin holdings, and quick-access send/receive actions. Asset values update in real time with clear fiat conversion.
Feature — Single Asset Wallet
Individual asset view with transaction history, receive QR code, and send flow. Designed to give users full visibility and control over a single coin without navigating away.
Feature — Coin Market
Live market data for all supported assets. Price, 24hr change, market cap, and sparkline charts surfaced at a glance designed for quick decisions, not analysis paralysis.
Feature — User Profile
Account management, KYC verification status, security settings, referral code, and notification preferences all in one organised, scannable profile view.
The web application extends the mobile experience to larger screens giving power users more context, faster navigation, and deeper visibility across their portfolio, trades, and account management. Every web screen maintains the same design language as mobile: dark navy canvas, amber accents, and one primary action per view.
Feature 01 — Dashboard
The web dashboard surfaces portfolio balance, live asset prices, recent transaction history, and quick-access trading actions in a single scannable view. The left sidebar provides persistent navigation across all platform sections ensuring users are never more than one click from any key feature.
Feature 02 & 03 — P2P Buy & Sell
The P2P marketplace lets users browse live buy and sell offers from verified traders. Filtering by price, payment method, and amount removes the noise surfacing only the offers that match what the user actually needs.
P2P Buy — Offer Listings
P2P Sell — Offer Listings
Smart Filtering
Filter by asset, price range, payment method, and trader reputation
Verified Traders
KYC-verified badges and trade history visible on every offer card
In-Trade Chat
Direct communication between buyer and seller during active trades
Feature 04 & 05 — Instant Buy & Instant Sell
For users who don't want to browse offers or negotiate instant buy and sell provides a direct, platform-fulfilled transaction at a clear, upfront price. Minimal steps, maximum clarity.
Instant Buy
Enter amount, select asset, confirm price three steps to completion.
Instant Sell
Amount shown in both crypto and fiat before confirmation no surprises.
Design Decision
Instant and P2P are treated as two distinct modes not hidden behind tabs. Users choose their path upfront reducing confusion about which type of transaction they're entering. Clarity of intent before commitment.
Feature 06 — Wallet (Web)
The web wallet view shows the full portfolio with individual asset breakdowns, transaction history, and deposit/withdrawal actions. Richer than mobile optimised for users managing larger positions on desktop.
Feature 07 — Create Offer
Vendors and active traders can post their own P2P offers with custom pricing, limits, and payment methods. The form is structured to minimise errors showing a live preview of the offer before it goes live.
Web App — Feature Summary
Dashboard
Portfolio & market overview
P2P Trading
Buy, sell & create offers
Instant Trade
Fast buy & sell at fixed price
Wallet
Full portfolio management
Beyond the screens, here is the design thinking behind each major feature what problems they solve, what decisions were made, and why.
Buy, Sell & Swap — Simplified
The trading experience is designed to feel lightweight and direct. Users shouldn't have to think hard to move their money.
🛒
Buy
Select asset, enter amount, confirm price — done.
💰
Sell
Choose asset, set amount, receive fiat instantly.
💱
Swap
Convert between assets at transparent live rates.
Borderless Transactions
Global transfers should feel as simple as local ones. The design hides complexity while maintaining full transparency on what's happening with the money.
Design Approach
Crypto Exchange Experience
Swapping assets is common, but often confusing. The exchange flow focuses on making conversion predictable, transparent, and fast.
📐 Predictable Flows
Every swap follows the same pattern: select assets, enter amount, review rate, confirm. No surprises.
🔢 Exact Output Preview
Users see exactly what they will receive in crypto and fiat equivalent before confirming.
⚡ Fast Execution
Swap completes in seconds. Progress feedback keeps users informed during processing.
📊 Live Rate Display
Conversion rate updates in real time as the user types no stale prices at confirmation.
Referral System
From a product perspective, referral drives growth. From a design perspective, it had to feel like a natural part of the product not a separate marketing mechanic bolted on.
Savings Narrative
Positioning crypto as a store of value required a different communication style — one that felt relatable, not financial.
Security is Only Effective if Users Understand It
Instead of treating security as a backend feature, it was designed as part of the experience visible, reassuring, and understandable at every critical step.
PIN Protection
6-digit PIN set during registration. Required for sensitive actions.
OTP Verification
Time-bound OTP for account recovery and sensitive changes.
Security Questions
Three-question identity verification layer for password recovery.
Escrow System
P2P funds locked in escrow until both parties confirm.
The result is a platform where users can buy, sell, and swap crypto without confusion, trade securely with others using escrow, move money globally without friction, and manage everything in one place. More importantly, it turns crypto into something that feels usable not intimidating.
What the Platform Delivers
Truly Borderless Payments
Users can send and receive crypto globally with the same simplicity as a local transfer no friction, no confusion about what happens next.
Trusted P2P Trading
Escrow-backed peer-to-peer trading with visible state management users always know where their funds are and what happens if something goes wrong.
Fast, Confident Trading
Buy, sell, and swap flows reduced to their essential steps experienced users move fast, new users never feel lost.
One Unified Platform
Wallet, trading, exchange, referral, and security all feel like one cohesive product not five tools stitched together under one logo.
"Crypto doesn't need to feel like a technical product. With the right design, it can feel like a financial tool you rely on every day. "
2
Platforms
Mobile + Web
5
Core Systems
Wallet · P2P · Exchange · Referral · Security
154+
Screen Flows
Mobile & web combined
3
Principles
Clarity · Trust · Reduce Anxiety
This project shifted how I think about product design. In fintech especially crypto trust matters more than features. trust matters more than features. A platform can have every capability in the world, but if users don't feel safe using it, none of it matters. Every screen on CloudP2P had to earn trust before it earned engagement.
Simplicity is harder than complexity. It's easier to add another field, another option, another screen. The real work was in deciding what to remove what the user genuinely needed versus what the product wanted to show them. That tension defined most of the design decisions on this project.
Working across both mobile and web reinforced the importance of system thinking over screen thinking. Each screen is just one node in a larger network. The design only works if the whole system feels coherent from onboarding through to a completed P2P trade. That end-to-end thinking is what I brought to every decision on CloudP2P.
Key Learnings
💡 About Fintech Design
🧠 About Product Thinking
If I Were to Continue
✅ Immediate Priorities
📅 Longer Term