Caricamento: 001Punk Panda – piattaforma Swap, Stake and Farming - Photo 1
Ha un'idea?

Punk Panda – piattaforma Swap, Stake and Farming

Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 1
Panoramica

Questa app consente di scambiare e mettere in gioco token PPM e Farm PPM per token PPM-BNB LP alimentati da Pancake

Punk Panda è la prima app di messaggistica sicura al mondo che offre un’incentivazione economica attraverso criptovalute per l’utilizzo e la condivisione dell’app. Il token di utilità PPM sfrutta le principali tendenze online legate alle comunicazioni sicure e alla criptovaluta. Grazie alla collaborazione con Phenomenon Studio, ora puoi acquistare token PPM, fare staking e farming di PPM-BNB e ricevere ricompense!

Cliente

Punk Panda

Servizi
  • Discovery
  • Wireframing
  • Progettazione dell’interfaccia utente
  • Sviluppo
Tecnologie
  • Next.js
  • Laravel
  • PancakeSwap
Revisione
Leggi cosa dicono i nostri clienti
Nell'arco degli ultimi due anni, ho affidato a Phenomenon Studio numerosi progetti di design e sviluppo e devo ammettere che non ho ancora trovato un'agenzia migliore in termini di qualità progettuale, design e sviluppo. Sono rimasto estremamente soddisfatto della loro competenza e capacità.
Joshua Caleb
Responsabile delle idee presso Divi Labs   Veda su DesignRush
1M+

PunkPanda ha raggiunto 1.000.000 di utenti PandaApp!

80K+

Numero di utenti unici al giorno

$80K+

+PPM token il volume di trading in 24 ore

Esigenze aziendali

Richiesta del cliente

La ricchiesta del cliente desiderava un ambito ampio ed è iniziata con la fase di scoperta. Il progetto è poi proseguito come segue.

Il team di Punk Panda ha incaricato il nostro studio di progettare una grande piattaforma di scambio di criptovalute con ampia funzionalità per le operazioni con il token PPM. La sua azienda desiderava inoltre la riprogettazione e lo sviluppo del sito web, nonché il rebranding per il suo prodotto esistente.

Il nostro ruolo

Il ruolo del nostro team in questo progetto non era solo quello di implementare soluzioni. L’obiettivo principale era identificare queste soluzioni durante la ricerca UX, la concorrenza e l’analisi aziendale, come la scelta delle migliori tecnologie, integrazioni e persino il modo migliore per le commissioni interne per ulteriore monetizzazione della piattaforma

Progetto
Problemi e soluzioni
Problema
1

Integrazione con Pancake e design personalizzato. Pancake è un protocollo molto famoso ma lo svantaggio è fornire solo iframe che può essere inserito nel sito.

2

Pancake prende una commissione su ogni transazione. Il nostro cliente ha richiesto una commissione aggiuntiva per utente per effettuare transazioni attraverso il nostro sito web.

3

Le richieste API Pancake impediranno ai nostri grafici di funzionare perché dopo un certo tempo Pancake blocca le richieste dall'esterno di sua rete.

Soluzione
1

Un'altra API personalizzata ci ha permesso di realizzare un design personalizzato in linea con la logica di Pancake. Di conseguenza, abbiamo sviluppato moduli personalizzati per le operazioni di swap, stake e farm.

2

Grazie all'uso di uno smart contract aggiuntivo, abbiamo consentito al cliente di impostare una commissione extra oltre a quella di Pancake.

3

Abbiamo scelto di utilizzare un server proxy per ricevere i dati da Pancake senza interruzioni, permettendoci così di creare grafici personalizzati sul nostro sito web.

Fasi di ricerca

Processo di ricerca

Abbiamo condotto un’analisi SWOT approfondita sui principali concorrenti del settore del cliente. Attraverso questa analisi aziendale, abbiamo identificato il modo migliore per implementare le funzionalità desiderate e assicurarci che il prodotto fosse redditizio.

Fasi
  • Audit UX
  • Analisi aziendale
  • Mappa
  • Flusso utenti
Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 6
Fase 1
Verifica dell’esperienza utente

La ricerca sull’esperienza utente (UX) costituisce il punto di partenza fondamentale per ogni progetto. In questa fase, analizziamo attentamente i prodotti attuali, i concorrenti e il pubblico di destinazione dei nostri clienti. Successivamente, combiniamo tutti questi elementi per creare una mappa del sito e un elenco di funzionalità e miglioramenti UX che possono essere implementati.

Cosa abbiamo fatto

Come parte della nostra ricerca UX, abbiamo condotto un’analisi della concorrenza. Il focus del progetto era incentrato sulla creazione e il funzionamento di criptovalute. Il nostro team ha ottenuto una serie di risultati chiave, i quali sono stati comunicati al cliente.

Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 7
Fase 2
Analisi aziendale
  • Analisi dell’area tematica
  • Individuazione dei problemi attuali e delle loro soluzioni
  • Raccomandazioni e consigli sull’implementazione della soluzione
  • Elenco delle funzionalità prioritarie
Cosa abbiamo fatto

Durante l’analisi aziendale abbiamo scoperto un percorso aggiuntivo per la monetizzazione, come richiesto dal nostro cliente. Pertanto, abbiamo illustrato al cliente le caratteristiche delle soluzioni che abbiamo sviluppato, delineandone benefici e rischi.

  • Grazie all’implementazione di uno smart contract aggiuntivo, abbiamo consentito al cliente di impostare la propria commissione extra oltre a Pancake.
  • Nonostante i suoi limiti, la soluzione per implementare il design personalizzato di Pancake consisteva nell’aggiungere un’API personalizzata che ci consentisse di realizzare qualsiasi design personalizzato e allinearla alla logica di Pancake.
  • Successivamente, abbiamo ricevuto moduli personalizzati per le operazioni di swap, stake e farm.
  • Durante la nostra analisi, ci siamo resi conto che le richieste all’API di Pancake potrebbero causare il malfunzionamento dei nostri grafici, poiché dopo un certo periodo di tempo, Pancake blocca le richieste provenienti dall’esterno della sua rete.
  • Pertanto, abbiamo deciso di lavorare con un server proxy per ricevere dati da Pancake senza interruzioni. A tal scopo, abbiamo creato grafici personalizzati sulla nostra piattaforma.
Fase 3
Mappa

Sulla base dei dati forniti dal nostro cliente e dei risultati ottenuti durante la fase di ricerca, abbiamo creato una mappa di navigazione per l’app. Questa mappa ci ha aiutato a organizzare le informazioni, definire una roadmap per gli sviluppi futuri e delineare il lavoro necessario. Attraverso una serie di iterazioni e sessioni di esplorazione approfondita, siamo riusciti a chiarire la visione che avevamo in mente per l’app. Ciò ci ha permesso di elaborare i dettagli con il cliente, comprese ulteriori delucidazioni sui vincoli normativi finanziari nel Regno Unito. Di conseguenza, abbiamo identificato sette flussi principali su cui abbiamo continuato a lavorare.

Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 8
Fase 4
Flusso utente

Il flusso utente rappresenta visivamente la sequenza di azioni che un utente compie al fine di raggiungere il proprio obiettivo. Si tratta di una componente essenziale del processo di costruzione, in quanto ci permette di pianificare i passi futuri e concentrarci sulla realizzazione di un’interfaccia più efficace.

Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 9
Fasi di progettazione

Progetto

In questa fase, traduciamo i risultati della nostra analisi in un’interfaccia intuitiva che rispetta le regole di usabilità generalmente accettate, soddisfa le esigenze degli utenti e rende il loro percorso il più agevole possibile.

Fasi
  • Wireframe
  • Moodboard Design
  • Concept
  • UI Design
Fase 1
Wireframes

La creazione di wireframe e prototipi interattivi è una parte essenziale quando si lavora sulla struttura di un progetto. È anche fondamentale per testare e migliorare il percorso dell’utente prima di procedere con la progettazione definitiva del mockup.

Questa fase ci permette di comprendere la logica e la struttura del futuro servizio. Creiamo e approviamo prototipi per ciascun flusso individuale.

Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 10
Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 11
Fase 2
Moodboard e concetto di design

Moodboard e concetto di design
Per definire la direzione visiva e lo stile dell’interfaccia, il nostro team crea moodboard e collabora con il cliente. Ciò ci consente di identificare la soluzione più adatta nel minor tempo possibile.

Basandoci sulla ricerca e sulla direzione stabilita nei moodboard, creiamo il primo concept visivo del sito per dimostrare lo stile selezionato in condizioni reali, prima di procedere con la realizzazione del design completo dell’interfaccia utente.

Fase 3
UI Design

La progettazione dell’interfaccia utente è il momento in cui la magia inizia. Utilizziamo il moodboard e i concetti di design che abbiamo creato in precedenza per dare vita al progetto. Successivamente, procediamo con la creazione del design dell’interfaccia utente per l’intero progetto e sviluppiamo un kit dell’interfaccia utente o un sistema di progettazione da utilizzare dai nostri sviluppatori.

Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 14
Progetto
Funzionalità che abbiamo implementato
Azienda agricola

La PPM Token Farm è dedicata al token PPM-BNB LP. Attraverso l'interazione con il nostro contratto intelligente personalizzato, gli utenti possono fare stake sui LP per periodi di 90 giorni, 180 giorni e 1 anno al fine di ottenere ricompense. Gli LP staked vengono reindirizzati alla coppia PPM-BNB su PancakeSwap.

Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 15
Stake

Gli utenti che desiderano effettuare lo staking dei token PPM hanno la possibilità di puntare i loro token per periodi di 90 giorni, 180 giorni e 1 anno al fine di ottenere una ricompensa. Questa operazione avviene attraverso l'interazione con contratti intelligenti di picchettamento personalizzati.

Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 16
Funzionalità di scambio per PPM-BNB

La nostra applicazione offre la funzionalità di scambio per PPM-BNB tramite l'utilizzo della coppia BNB/PPM ospitata su PancakeSwap. L'applicazione interagisce direttamente con i contratti intelligenti di PancakeSwap per facilitare le operazioni di scambio.

Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 17
Swap

PancakeSwap è dotato di un sottografo dei dati in tempo reale. È stato configurato un server proxy per recuperare i dati del grafico direttamente dal sottografo PancakeSwap.

Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 18
Liquidità

La gestione della liquidità (aggiunta/rimozione) per la coppia PPM-BNB, alimentata da PancakeSwap, prevede l'interazione con il contratto intelligente PancakeSwap Router per l'aggiunta o la rimozione della liquidità.

Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 19
Dashboard

L'analisi della dashboard fornisce un resoconto dei premi e delle ultime transazioni relative allo swap, al farming e allo staking, al fine di offrire un'esperienza utente più comoda. Inoltre, consente di tenere traccia di tutte le operazioni effettuate.

Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 20
Tecnologie

Fase di sviluppo

Per questo progetto, è stato sviluppato un design personalizzato per la pagina di destinazione utilizzando Next.js per il front-end. Il design includeva animazioni complesse create utilizzando Framer Motion. Il pannello di amministrazione multilingue è stato sviluppato utilizzando Laravel.

Per le funzionalità di swap, stake, LP e farming, è stata integrata l’API Pancake.finance. L’autenticazione degli utenti viene gestita tramite Metamask, che consente loro di effettuare operazioni nella rete Binance Smart Chain utilizzando i protocolli BEP-20 e ERC-20. Sono stati sviluppati anche gli smart contract per il token personalizzato e per le operazioni.

Tuttavia, l’analisi del grafico della piattaforma Pancake non era possibile inizialmente. Per risolvere questo problema, abbiamo integrato un server proxy con Redis caching.

Stack
Tecnologie
Pancake

PancakeSwap è una piattaforma che si concentra sui token BEP20, che sono uno standard specifico sviluppato da Binance. Poiché il progetto del nostro cliente è basato su token BEP20, abbiamo scelto di utilizzare PancakeSwap come piattaforma di riferimento.

Next.js

Le prestazioni di Next.js sono eccellenti in termini di tempi di caricamento, offre una SEO ottimale, scalabilità e vantaggi per qualsiasi integrazione. Abbiamo quindi deciso che Next.js fosse la soluzione migliore.

Laravel

Lo sviluppo del pannello di amministrazione multilingue e la richiesta di sicurezza da parte del nostro cliente ci hanno portato a scegliere Laravel come soluzione.

Punk Panda – piattaforma Swap, Stake and Farming - Website Development - Photo 21
Integrazioni che abbiamo implementato
  1. L’integrazione di MetaMask

    permette al cliente di utilizzarlo come sistema di accesso e consente agli utenti di effettuare operazioni sulla rete Binance Smart Chain utilizzando i protocolli BEP-20 e ERC-721.

  2. Contratti intelligenti

    Gli smart contract sono stati sviluppati per integrare il token personalizzato e le relative operazioni.

  3. PancakeSwap sottografo dati in tempo reale

    È stato configurato un server proxy per recuperare i dati dei grafici direttamente dal sottografo PancakeSwap.

Lavori in corso
Lavoro continua su nuove funzionalità
Mercato NFT

Attualmente stiamo concentrando i nostri sforzi sul mercato NFT per questo progetto.

Collezioni NFT

Il nostro team sta attualmente impegnato nella creazione della collezione NFT dei personaggi per PunkPanda, lavorando con funzionalità personalizzate di Mint per gli NFT.

Ulteriori contratti intelligenti

Abbiamo pianificato di implementare ulteriori contratti intelligenti al fine di potenziare le funzionalità della piattaforma.

Pagine di offerta per il sito web

Lo sviluppo del sito web non si ferma qui. Stiamo attualmente lavorando su molte nuove pagine dedicate ai prodotti dei nostri clienti.

Risultati

Il team ha sviluppato un design di alta qualità e ha contribuito ad elevare il profilo del cliente nel mercato del trading di criptovalute.

Il team di sviluppo ha dato vita a tutte le complesse idee dei designer e ha implementato il sistema di picchettamento decentralizzato. Ora gli utenti hanno la possibilità di puntare direttamente i loro token PPM sulla pagina di destinazione utilizzando MetaMask e creare un pool di liquidità per i token PPM-BNB, in modo da poter ottenere ricompense dai loro investimenti.

La piattaforma ha attirato oltre 1 milione di utenti in meno di un anno, registrando un aumento del 29% dei visitatori unici al sito web. I clienti dispongono ora di una base solida e affidabile per sviluppare nuovi prodotti in linea con la loro roadmap.

Il nostro team è profondamente grato a Punk Panda per la fiducia riposta nei nostri servizi e siamo entusiasti di far parte di un progetto così ambizioso!

1M+

PunkPanda raggiunge 1.000.000 di utenti PandaApp!

80K+

Il numero di utenti unici al giorno

$80K+

PPM token per il volume di trading 24 ore su 24

I nostri casi
Più casi
Lavoriamo sia con piccole startup che con grandi aziende.
SkyFort – Sito web di Security Firewall - Website Development - Photo

Un nuovo firewall cloud che protegge i dati personali e potenzia la connessione web degli utenti

E-sito di e-commerce di sigarette - Website Development - Photo

Le sigarette elettroniche sono dispositivi elettronici moderni, con sapori incredibili, ognuno troverà il gusto e il design preferito.

Puoi caricare massimo 5 file
Alcuni dei tuoi file non sono stati caricati, perché la dimensione massima del file è di 5 mb