How I redesigned the website and mobile app as one connected Web3 experience — turning a fragmented wallet into a clearer system with visible security at its core.
Role
Product Designer
Timeline
4 weeks
Platforms
Web & mobile app
Scope
7 pages · 10 app areas
Status
Client projectDesigned and delivered for implementation. Post-launch analytics were not available to me.
Overview
Turning a wallet into one connected Web3 ecosystem
MINGO started as a wallet, but it had grown into a much larger product spanning Wallet, Tickets, NFT Collections, Market, Play, profiles, rewards and community features. The main challenge was no longer one screen or one flow — MINGO needed a clear system that could connect all of these services.
Over four weeks I redesigned the public website and the main mobile app flows. The work covered 7 website pages, 10 app areas and 8 main parts of the ecosystem. I also reviewed the old screens that were available: a wallet audit found 24 usability and trust issues, five of them critical because they could affect account privacy, wallet recovery or financial transactions.
The project began with a single screen. After the client approved the first direction, they shared more of the product and asked me to continue — so the work grew into a redesign of the wider MINGO ecosystem.
Product Designer — audit, product structure, flows, interaction and interface design, content, reusable components, prototypes and measurement planning
Timeline
4 weeks, from the first screen to the wider product redesign
Platforms
Responsive website and mobile app
Website work
Landing, About, Market, Play, Wallet, Launch and MINGO Tickets
App work
Onboarding, account access, verification, security, recovery, wallet, transfers, tickets, NFTs, Market, Play and profile
On the numbers: these show the size of the work and the problems I found. I did not receive performance data after launch, so I do not claim the redesign increased conversion or retention by any percentage.
Context · Why the project was needed
The product had grown, but the experience had not grown with it
MINGO was moving beyond a wallet. A user could manage assets, buy tickets, view NFTs, explore a market, play games and manage a profile — with rewards and community features still to come. That created a basic product question.
How should these services work together so that users understand MINGO as one product?
The question the website and app both had to answer the same way
The scope also kept growing during the project. I had to design the screens the client needed at that moment while creating patterns that could carry the next feature. If I had designed every request separately, the result would have looked like several different products.
The problems were visible. The old landing page tried to explain almost everything on one long page — company story, problem, solution, B2B and B2C services, technology, token, app features, team, roadmap, FAQs and several competing calls to action. The available wallet screens showed a different problem: important actions were possible, but users were not given enough help at risky moments — most visibly during login, wallet recovery and sending assets.
Project goal: help users understand where they are, what they can do next, and what will happen before they confirm an important action.
The engagement expanded from one screen into a redesign of the wider MINGO ecosystem.
Approach · Evidence & process
Working from real evidence — and being honest about its limits
I had one old landing page and nine old wallet states. I did not have old screens for every MINGO service, and I had no user interviews, support records or product-performance data. So I did not invent problems for screens I had never seen. I used the available information in four ways.
Type of information
How I used it
Old screen evidence
I described what was visible on the old website and wallet screens
UX review
I explained the possible usability or safety problem created by what I could see
Design requirement
For new areas, I explained what the experience needed to support
Test idea
I listed what should be checked with users or measured after launch
This kept the case study honest: the wallet findings are based on visible old screens, while the wider ecosystem work shows my design decisions for areas where no old screens existed.
I started by listing every website page and app flow the client shared, grouping them into public discovery, account access, security, wallet, tickets, digital assets, Play and Profile. Placing the flows on one large board revealed missing states and repeated patterns — account checks, loading, errors, confirmations and success messages appeared across the product. I then chose each method based on the problem I was solving.
Method
Where I used it
What it helped me decide
Page review
Old landing page
Content order, page structure, audience paths and calls to action
Usability rule review
Old wallet screens
Feedback, consistency, user control, error prevention and recovery
Step-by-step task review
Recovery and transaction flows
Whether users could find the next step and understand the result
Required steps, errors, loading, success and recovery states
Ecosystem mapping
Website and app
How services connect and which rules should be shared
Risk-based priority review
Full project
Which parts needed the most attention in four weeks
The audit brought the website review, wallet findings, shared product needs, priorities and next steps into one view.
Discovery · Reviewing the old experience
Auditing the website, then the wallet
The old landing page held a lot of useful content, but too many messages shared one long journey. From the screenshot I could clearly see five problems.
What I saw
Why it mattered
What I changed
Many products and audiences shared one page
Visitors had to work out which part of MINGO was for them
I gave the main products their own pages
Company, technology and consumer content had equal visual weight
The main message was harder to understand quickly
A clear first message, with details in focused sections
Important text sat in small, dense blocks
Users could miss key information
Shorter sections and clearer headings
Photos, icons, diagrams and app images used different styles
The site did not feel like one product family
One dark-green visual style and a consistent layout system
Several calls to action competed on the same page
The next step was not always clear
One main purpose and one main action per page
I changed the website from one long page into seven focused pages: Landing, About, Market, Play, Wallet, Launch and MINGO Tickets.
One long page with mixed audiences and competing calls to action
The wallet audit found 24 issues
I reviewed nine old wallet states using Nielsen's usability heuristics and a step-by-step task review. The level shows how serious a problem could be — not how often it happened, because I had no usage data.
5critical — could affect account privacy, wallet access or an irreversible financial action
9major — could cause serious confusion, repeated errors or loss of trust
10moderate — extra effort, inconsistency or accessibility problems
The old screen displayed all 12 recovery words behind a single button — “I wrote down my mnemonic phrase.” It never explained what the phrase controlled, why it must not be shared, or what happens if it is lost, and it did not check that the words were actually saved.
I turned recovery into a guided flow: explain the risk, confirm identity, reveal the phrase, give safe-storage advice, check selected words, then confirm completion.
The old message “User does not exist” could tell a stranger whether an email was registered, and gave the real user no next step.
I replaced it with neutral language and clear options — a failed login keeps safe entered details and offers a visible way to recover access.
The old flow had three useful steps, but key information was missing or shown too late. Users needed the active network, a valid address, their available balance, the fee and their remaining balance before confirming.
I restructured the transfer so each step answers one clear question — shown in full in the Transactions section below.
Balance, assets, Send, Receive, navigation, a QR button and a promotional card all competed for attention, and an empty wallet offered little help.
I placed balance and account information first, made Send and Receive the main actions, and guided first-time users toward a useful action. Promotional content moved to where users expect to explore other services.
Text like “hide XMC transfer,” “Dismiss” and “Cancel” did not say what would happen, and screens lacked clear loading, pending, success, failure and recovery messages.
I rewrote labels to describe the result — for example “Hide XMC from wallet view,” with actions “Keep visible” and “Hide asset.”
The audit grouped all 24 issues by screen, UX rule, seriousness and recommended change.
Treating words as part of the interaction
The old text often described the system or used a generic button label. I changed it to explain the result and help the user choose the next step.
Old text
New UX copy
Why I changed it
User does not exist
Could not sign in. Check your details or recover access.
Protects account privacy and gives a next step
Mnemonic Phrase
Save your recovery phrase
Tells the user what they need to do
I wrote down my mnemonic phrase
Check my backup
The next screen verifies the words instead of trusting a statement
Are you sure you want to hide XMC transfer?
Hide XMC from Wallet?
Clearly names the item and the result
Dismiss / Cancel
Hide XMC / Keep visible
Both actions describe what will happen
Send (final review)
Confirm and send
Makes the final commitment clear
Getting everything setup
Preparing your wallet…
Explains what the app is doing
One rule for transaction messages: they must answer two questions — did the money move, and what should I do next? A message like “Transfer failed. No funds were sent. Try again.” should only appear once the system has confirmed no funds moved.
Synthesis · What the audit revealed
Five needs shared across the whole ecosystem
The website review, wallet audit and ecosystem map pointed to the same five needs.
A simple view of the ecosystem. Users should not have to understand every service at once.
Security with clear explanations. A security step only helps when users understand why it is there.
Important information before confirmation. Recipient, network, fee, total and result of the action.
Clear states on every screen. Users should know when something is loading, being checked, pending, complete or failed.
Shared rules across services. Navigation, account access, security, buttons and feedback should behave the same way.
Problem statement: MINGO users needed a simple way to discover and use Wallet, Tickets, NFTs, Market and Play through one account and one clear product system — making Web3 actions easier to understand without hiding important safety information.
How could I connect MINGO's services, keep the product simple for new users, and add the right level of protection when identity or money was involved?
The main design question
Prioritization · Risk and impact
Setting priorities without usage data
I did not have data showing how often each problem happened, so I used four questions to prioritize: How serious could the mistake be? Could the user fix it? How many other screens depended on this decision? How important was the journey to MINGO's main value?
Higher user-trust riskHigher product impact
Recovery & transfersHighest trust risk and impact — mistakes could affect wallet access or money. Prioritized for review, confirmation and outcome states.
Order
Focus
Reason
1
Product map, navigation, account access, security, visual style, screen states
Every service needed these basic rules
2
Recovery, transfer details, address checks, fees, transaction results
Mistakes could affect wallet access or money
3
Tickets, NFTs, Market, Play and Profile
Different in purpose, but familiar in use
4
Website pages and calls to action
The site had to explain the same product found in the app
5
Accessibility, edge cases, testing and tracking
Preparing the design for testing and development
Shared product rules and high-risk wallet actions came before lower-risk improvements.
Approach · Design principles
Five rules I used throughout the project
A short timeline meant every preference could not become a new direction. Five shared rules kept the ecosystem coherent.
The website and onboarding first explain what MINGO offers; users then see the next action that matches their goal.
Account access, navigation, profile, security, buttons and feedback should not change when users move from Wallet to Tickets or Play.
Sensitive information stays hidden until needed; financial actions show recipient, network, balance, fee, total and result before confirmation.
Simple, reversible actions stay quick. Recovery, passcodes, transfers, purchases and listings receive stronger review and security checks.
Loading, pending, success and failure messages tell users what is happening and what they can do next.
Information architecture · Ecosystem model
One account, one system, many services
The wallet needed to support asset management while connecting users to Tickets, Market, Collections and Play. I treated it as the primary home base, with ecosystem products revealed as connected destinations rather than competing navigation. The new hierarchy separated wallet actions, ecosystem destinations, and account or security controls so users always understood where they were and where they could go next.
On the public side, I divided the old long page into seven clear destinations — each with one main message and one main action, reusing sections for features, previews, proof, downloads and footers so the site felt consistent without every page looking the same.
Page
Main purpose
Landing
Explain MINGO and help visitors choose a service
About
Share the company story, team and technology
Market
Explain how users discover and exchange digital assets
Play
Introduce games and available experiences
Wallet
Explain storage, portfolio, Send, Receive and transactions
Launch
Give launches and collections their own space
MINGO Tickets
Explain event discovery, ticket ownership and mobile entry
Wallet at the center; Tickets, Market, Play and Collections around it, with security as a shared layer.
Interaction design · Onboarding & security
Introducing an unfamiliar product one decision at a time
Onboarding answered three questions — what is MINGO, what can I do with it, and why create or access an account? After onboarding I separated sign-up, sign-in and recovery so users chose the right path before entering personal details, and the verification flow handled code entry, editing, resend, expiry, error and success without forcing a restart.
Step 01 · Value
Explain the product before requesting commitment
The opening experience introduces what the wallet enables before asking users to make technical setup decisions.
Lead with the user outcome
Keep one clear primary action
Avoid unexplained Web3 terminology
Passcode protection became a shared part of the app — creation, confirmation, mismatch, incorrect entry, retry, successful access, and fingerprint or face access where supported. The same pattern then protected wallet recovery, important settings, transfers and Market actions, so security felt expected rather than random. Recovery carried extra guidance because the cost of a mistake is high: users first learned what the phrase controlled, saw it with clear safety instructions, and confirmed selected words before the backup was marked complete.
One security journey: locked → authenticated → reviewed → completed.
Full app-flow board — to be added (mingo-app-flow-board.webp): onboarding, account access, security, Wallet, transactions, Tickets, NFTs, Play and Profile on one board.
Ten app areas using the same navigation, account, security and feedback rules.
Interaction design · Wallet & transactions
Separating prevention, commitment and reassurance
I arranged Wallet home around the user's main needs — see balance and account, receive or send, review assets and updates, and get help when the wallet is empty. Sending assets was restructured so the right information arrived in the right order, and each stage answered a different question at the highest-risk point in the wallet.
01 · Before
Prevent mistakes
Check the address for the selected network, then show the asset, available balance and what will remain.
02 · Confirm
Create a deliberate pause
Combine recipient, network, amount, fee and total, then approve with passcode, fingerprint or face.
03 · After
Remove uncertainty
Disable the button to prevent a double-send; show pending, success or failure with a safe next step.
Step
What the user needs to know
Recipient
Is the address valid for the selected network?
Details
Which asset am I sending, how much is available, and what will remain?
Review
Who receives it, what is the fee, what is the total, and can it be reversed?
Security
Am I ready to approve with my passcode, fingerprint or face check?
Result
Is it sending, pending, complete or failed — and what can I do next?
As the project grew, reusable patterns became necessary. I standardized navigation, buttons and action states, forms and help text, account and approval steps, screen states, transaction summaries, cards and the security language — plus colors, type, spacing, icons, contrast and touch targets. This let Wallet, Tickets, NFTs, Market and Play keep their own character while still feeling like MINGO, and gave developers a smaller set of components and states to build.
Recipient wallet address
Amount · 0.00 XMC
XMCMINGO
2,483.24
SuccessfulPendingFailed
Components shown in context — buttons, fields, cards and status states inside real screens.
Decisions that shaped the system
Gave more time to high-risk flows. Login, recovery and transactions received the most detail because mistakes there have serious results.
Added security without slowing every action. Extra checks appeared only for showing a recovery phrase, creating a passcode, sending assets, listing an item or completing a purchase.
Kept important Web3 information visible. I reduced difficult language while keeping network, address, fee, balance, total and asset status visible when they affected a decision.
Kept promotion away from the main wallet task. The wallet's first job is to manage assets, so promotional content moved aside while clear paths to the rest of the ecosystem stayed.
Let each service have its own character. Tickets and Play could carry stronger imagery and energy; Wallet and Market stayed focused on detail and trust — with the same controls and behavior underneath.
Outcome · Results & measurement
Clear results, honestly scoped
Results I can support with evidence
What the work delivered
Redesigned 2 connected platforms
7 website pages and 10 app areas
8 ecosystem areas mapped into one story
9 wallet states reviewed; 24 issues found (5 critical)
1 shared product direction
Client approval, and the project grew from one screen into the wider product
Results I should not claim
Without post-launch data
“Conversion increased by 30%”
“Support calls dropped by 20%”
“Retention improved after the redesign”
If the client shares a real number later, I would write it like this: “Client-reported result: [metric] changed from [old] to [new] during [period]. The figure was shared by the client; I did not have direct access to the analytics.” Honest, and still useful.
How I would measure success
I would test the basic journeys first, then Tickets, NFTs, Market and Play in separate sessions, using test accounts and sample assets so no participant risks real money or private information.
Area
User task
What success looks like
Website
Explain MINGO and find a product
Understands the offer and reaches the right page unaided
Account access
Sign up, sign in or choose recovery
Selects the correct path and completes it unaided
Security
Create a passcode and save a recovery phrase
Understands the risk and completes the safety check
Wallet
Receive and send an asset
Understands address, network, fee, total and result
Tickets
Find an event and open the right ticket
Understands event, ticket, venue and entry status
NFT & Market
Find an item and choose an action
Knows whether viewing, buying, selling, listing or transferring
Navigation
Move between services
Stays oriented and can find account and security settings
Suggested test targets (goals, not results): 0 critical errors during recovery and transfer · at least 7 of 8 users complete each main task unaided · median ease score ≥ 5/7 · at least 6 of 8 can explain recipient, network, fee and that a transfer cannot be undone · every important error has a clear recovery path before development.
Goal
Metric
Help visitors understand MINGO
Website-to-product conversion
Improve account setup
Onboarding completion
Help users reach value
Time to first useful action
Connect the ecosystem
Cross-service activation (a useful action in ≥ 2 services within 30 days)
Improve recovery setup
Recovery verification completion
Improve transfers
Send completion and duplicate-transfer attempts
Prevent mistakes
Correction before confirmation
Reduce support needs
Support requests per 1,000 active users
Support continued use
Day 7 and Day 30 retention
Protecting user data during measurement: events can record when a flow starts, a step completes, an error happens and whether the final action succeeds — but never recovery words, private keys, passwords, passcodes, verification codes or copied text. Addresses, balances, amounts and ticket details are collected only when truly needed and safe to store.
Metrics plan — to be added (mingo-metrics-plan.webp): a frame connecting product goals, user actions, tracked events and metrics.
The plan separates current project results from future usability and product measures.Visual consistency across wallet, tickets, collectibles and responsive web and mobile.
What I would do next
Test website understanding, account access, recovery and transfers first
Run separate tests for Tickets, Market, NFTs and Play
Review login, recovery, screenshots, data collection and transaction security with the technical team
Test contrast, keyboard use, focus order, error messages and touch targets against WCAG 2.2
Agree metric names and tracking rules before launch
Record a baseline for each metric, then compare the same user groups after launch
Review support requests and comments to understand why the numbers changed
Reflection · What I learned
Keeping the experience clear as the brief grew
The hardest part was not drawing more screens — it was keeping the experience clear while the brief grew from one screen into a full website and app.
Use old screens as evidence without making claims about screens I had never seen
Fix the product structure before focusing only on visual style
Create shared rules early when a product has several connected services
Give more attention to flows where mistakes can affect identity or money
Keep the product simple while still showing important safety information
Separate real project results from the metrics that still need to be tested
Users should always know where they are, what they can do next, and what will happen before they confirm an important action.