Have an idea?

PNSwap – token exchange platform

PNSwap – token exchange platform - Website Development - Photo 1
Overview

A unique platform to exchange, buy and sell tokens

Users can stake their PNS tokens directly on the platform using MetaMask and create a liquidity pool of PNS-BNB tokens to farm to get rewards from their investments.

Client PNSwap
Services
  • Discovery
  • Wireframing
  • UI design
Technologies
  • Next.js
  • Laravel
  • PancakeSwap
Business need

Client request

The client’s request included the design of a crypto exchange platform with broad functionality for working with PNS tokens, the creation of a corporate website, and development.

Our role

The role of our team in the project was to create a design that would fully satisfy the most important things: convenient platform navigation with a lot of actions, simplification of the token exchange process, and the ability to view income statistics.

While working on the solution, we had to consider the specifics of the market with a large number of competitors and a high entry barrier.

PNSwap – token exchange platform - Website Development - Photo 4
Project
Problems & solutions
Problem
1

Pancake takes a commission on each transaction. Our client required an additional commission for the user to make transactions through our website.

2

Integration with Pancake and custom design. Pancake is a very popular protocol, but its disadvantages are that it only provides an iframe that can be inserted into the website.

Solution
1

Thanks to the additional smart contract, we enabled the client to set their own additional commission on top of Pancake.

2

A custom API that allowed us to do any custom design in alignment with Pancake's logic. As a result, we created custom forms for swap, bet, and farm.

Research stages

Research process

After starting work on the project, we conducted a SWOT analysis. It was used to analyze the field competition to implement the features and stand out from the competition properly.

Stages
  • UX audit
  • Business analysis
  • Map
UX audit

An essential part of the work was the study of PNSwap’s competitors among companies offering a similar range of services. After analyzing the main points, approaches, and solutions, we were able to highlight the advantages and disadvantages of each competitor, as well as think of a unique approach that would allow the company to stand out from the competition.

Business Analysis

During the BA, we offered the client another way to monetize the platform, describing the benefits and risks. Our team created a list of priority features. We analyzed the business. We identified problems that the client might encounter in the future and provided recommendations and advice on how to solve them.

Map

After understanding the project’s goals and researching UX, we designed the platform’s architecture based on competitors, research, and the client’s wishes.

PNSwap – token exchange platform - Website Development - Photo 6
Design stages

Design

As a tech startup, our goal was to build and maintain meaningful leads in this industry. It was also important to create a design that stood out from the competition. We were tasked with an exciting brief to create an immersive experience reflecting slope solutions’ innovative nature.

Stages
  • Wireframe
  • Moodboard
  • Design Concept
  • UI Design
Stage 1

Wireframes

To understand the page structure and the necessary blocks and sections, we created a highly detailed prototype of each screen.

PNSwap – token exchange platform - Website Development - Photo 7
PNSwap – token exchange platform - Website Development - Photo 8
Stage 2
Moodboard & Design Concept

Before creating the UI design of the platform, we made a moodboard on the visual style and color palette. Our design should make the user feel like they are using today’s latest technology (modern and forward-thinking).

Stage 3
UI Design

After approving the prototypes and the moodboard, we moved on to the next stage – designing the user interface. Design components were added to the UI kit for developers to use. In addition to the platform’s web version, we also developed a design for mobile browsers and tablets.

Interactions

We develop clickable prototypes for all of our projects, and this one is no exception. During testing, there are unfinished blocks that we immediately eliminate before the development step. This immediately tests the usability and clarity of the application.

Project
Features we implemented
Corporate website

Corporate website before entering the platform. The site displays popular tokens and recommendations for buying and trading tokens. Directly on the website, you can see details about the main areas with which the user can work on the platform.

PNSwap – token exchange platform - Website Development - Photo 13
Swap / Stake / Farm pages

Swap functionality for PNS-BNB Powered by PancakeSwap BNB/PNS pair hosted on PancakeSwap. The application interacts with PancakeSwap smart contracts to perform swap operations.PNS token staking users can stake PNS tokens for 90d, 180d, and 1y and receive a reward. Interact with custom staking smart contracts.PNS token farm for PNS-BNB LP tokens. Interacts with the custom smart contract to stake LPs for 90 days, 180 days, and 1 year and receive rewards. LPs are redirected back to the PNS-BNB pair hosted on PancakeSwap.

PNSwap – token exchange platform - Website Development - Photo 14
Dashboard

The dashboard has a graph that shows the user's income and losses in real-time, as well as asset information and customizable widgets. This page is flexible so that the user can customize it.

PNSwap – token exchange platform - Website Development - Photo 15
Stake in Pool

The Stake in Pool gives participants additional flexibility. It is because a fraction of the coins must be locked up for a certain period and usually has a withdrawal or exit time set by the protocol. In addition, a significant minimum balance is required to add coins to the staking pool, which is a form of security.The staking pool also requires a minimum amount to join and does not limit the amount of money you can withdraw. Therefore, joining a staking pool instead of staking alone can be an ideal option for beginners.

PNSwap – token exchange platform - Website Development - Photo 16
PNSwap – token exchange platform - Website Development - Photo 17
Integrations
Integrations we have implemented
  1. PancakeSwap subgraph real-time data

    Proxy server set up to retrieve chart data from PancakeSwap subgraph.

  2. MetaMask Integration

    MetaMask acts as login and allows users to perform operations in Binance Smart Chain Network with BEP-20 and ERC-72 protocols.

  3. Smart Contracts

    The smart contracts integrate the custom token and operations with it.

Functional
Work continues on new functionality
Additional Smart Contracts

We plan to add more smart contracts to enhance the platform's functionality.

Offer pages for the platform

The development doesn't stop here. We are preparing many new pages dedicated to customer products.

Mobile application

It is also planned to develop a mobile application.

PNSwap – token exchange platform - Website Development - Photo 18
Conclusion
Results

We have launched an updated interface for the PNSwap platform. In this project, we applied bold and memorable visual solutions and increased brand awareness. Navigation and work with the exchange, sale and purchase of tokens have been simplified. It allowed us to attract many new users interested in the company’s services.

Our team is very grateful to PNSwap for their trust in our services, and we are happy to be an important part of such an ambitious product!

$1.2M

Attracted investments at the stage of early prototypes

500K+

Expected number of users

Our cases
More cases
We work with both small startups and large corporations.
Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo

This application allows Swap and Stake PPM and Farm PPM Token for PPM-BNB LP tokens powered by Pancake.

Frozeverse – Metaverse VR game - Website Development - Photo

Frozeverse is a sandbox game based on the Metaverse and VR, with the game assets included as NFTs.

You can upload maximum 5 files
Some of your file not loaded, because maximum file size - 5 mb