MINGO · Web3 product ecosystem

Designing the MINGO ecosystem

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.
MINGO redesigned web and mobile product screens

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.

AuditSynthesizeDefinePrioritizeDesignReviewDeliver
7website pages designed or restructured from one long landing page
10app areas connected through shared navigation, account, security and interface rules
24wallet issues documented — 5 critical, 9 major, 10 moderate
ClientMINGO
My roleProduct Designer — audit, product structure, flows, interaction and interface design, content, reusable components, prototypes and measurement planning
Timeline4 weeks, from the first screen to the wider product redesign
PlatformsResponsive website and mobile app
Website workLanding, About, Market, Play, Wallet, Launch and MINGO Tickets
App workOnboarding, 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 informationHow I used it
Old screen evidenceI described what was visible on the old website and wallet screens
UX reviewI explained the possible usability or safety problem created by what I could see
Design requirementFor new areas, I explained what the experience needed to support
Test ideaI 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.

MethodWhere I used itWhat it helped me decide
Page reviewOld landing pageContent order, page structure, audience paths and calls to action
Usability rule reviewOld wallet screensFeedback, consistency, user control, error prevention and recovery
Step-by-step task reviewRecovery and transaction flowsWhether users could find the next step and understand the result
Task and state reviewLogin, verification, passcode, transactions, ticket accessRequired steps, errors, loading, success and recovery states
Ecosystem mappingWebsite and appHow services connect and which rules should be shared
Risk-based priority reviewFull projectWhich 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 sawWhy it matteredWhat I changed
Many products and audiences shared one pageVisitors had to work out which part of MINGO was for themI gave the main products their own pages
Company, technology and consumer content had equal visual weightThe main message was harder to understand quicklyA clear first message, with details in focused sections
Important text sat in small, dense blocksUsers could miss key informationShorter sections and clearer headings
Photos, icons, diagrams and app images used different stylesThe site did not feel like one product familyOne dark-green visual style and a consistent layout system
Several calls to action competed on the same pageThe next step was not always clearOne 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
Existing MINGO website

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 textNew UX copyWhy I changed it
User does not existCould not sign in. Check your details or recover access.Protects account privacy and gives a next step
Mnemonic PhraseSave your recovery phraseTells the user what they need to do
I wrote down my mnemonic phraseCheck my backupThe 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 / CancelHide XMC / Keep visibleBoth actions describe what will happen
Send (final review)Confirm and sendMakes the final commitment clear
Getting everything setupPreparing 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.

  1. A simple view of the ecosystem. Users should not have to understand every service at once.
  2. Security with clear explanations. A security step only helps when users understand why it is there.
  3. Important information before confirmation. Recipient, network, fee, total and result of the action.
  4. Clear states on every screen. Users should know when something is loading, being checked, pending, complete or failed.
  5. 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.
OrderFocusReason
1Product map, navigation, account access, security, visual style, screen statesEvery service needed these basic rules
2Recovery, transfer details, address checks, fees, transaction resultsMistakes could affect wallet access or money
3Tickets, NFTs, Market, Play and ProfileDifferent in purpose, but familiar in use
4Website pages and calls to actionThe site had to explain the same product found in the app
5Accessibility, edge cases, testing and trackingPreparing 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.

PageMain purpose
LandingExplain MINGO and help visitors choose a service
AboutShare the company story, team and technology
MarketExplain how users discover and exchange digital assets
PlayIntroduce games and available experiences
WalletExplain storage, portfolio, Send, Receive and transactions
LaunchGive launches and collections their own space
MINGO TicketsExplain 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.

Onboarding value proposition

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.

StepWhat the user needs to know
RecipientIs the address valid for the selected network?
DetailsWhich asset am I sending, how much is available, and what will remain?
ReviewWho receives it, what is the fee, what is the total, and can it be reversed?
SecurityAm I ready to approve with my passcode, fingerprint or face check?
ResultIs it sending, pending, complete or failed — and what can I do next?
One complete send flow: input → review → confirm → pending/success.

Design system · One product language

One predictable system across web and mobile

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.

AreaUser taskWhat success looks like
WebsiteExplain MINGO and find a productUnderstands the offer and reaches the right page unaided
Account accessSign up, sign in or choose recoverySelects the correct path and completes it unaided
SecurityCreate a passcode and save a recovery phraseUnderstands the risk and completes the safety check
WalletReceive and send an assetUnderstands address, network, fee, total and result
TicketsFind an event and open the right ticketUnderstands event, ticket, venue and entry status
NFT & MarketFind an item and choose an actionKnows whether viewing, buying, selling, listing or transferring
NavigationMove between servicesStays 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.
GoalMetric
Help visitors understand MINGOWebsite-to-product conversion
Improve account setupOnboarding completion
Help users reach valueTime to first useful action
Connect the ecosystemCross-service activation (a useful action in ≥ 2 services within 30 days)
Improve recovery setupRecovery verification completion
Improve transfersSend completion and duplicate-transfer attempts
Prevent mistakesCorrection before confirmation
Reduce support needsSupport requests per 1,000 active users
Support continued useDay 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

  1. Test website understanding, account access, recovery and transfers first
  2. Run separate tests for Tickets, Market, NFTs and Play
  3. Review login, recovery, screenshots, data collection and transaction security with the technical team
  4. Test contrast, keyboard use, focus order, error messages and touch targets against WCAG 2.2
  5. Agree metric names and tracking rules before launch
  6. Record a baseline for each metric, then compare the same user groups after launch
  7. 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.
The main lesson of the project

Available for new projects

Let's build a product that earns its users' trust

One conversation is enough to know if we're a fit. Bring a real problem — no decks needed.

imaasimsharif@gmail.com