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 Icon - fi_4628635USA
Services
Web app design Web app development
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
Pancake takes a commission on each transaction. Our client required an additional commission for the user to make transactions through our website.
Thanks to the additional smart contract, we enabled the client to set their own additional commission on top of Pancake.
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.
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
PNSwap – token exchange platform - Website Development - Photo 13
PNSwap – token exchange platform - Website Development - Photo 14
PNSwap – token exchange platform - Website Development - Photo 15
PNSwap – token exchange platform - Website Development - Photo 16
PNSwap – token exchange platform - Website Development - Photo 17
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 18
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 19
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 20
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 21
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 22
Conclusion
Results
$1.2M

Attracted investments at the stage of early prototypes

500K+

Expected number of users

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!

Our cases
More cases

#Web app design #Web app development

JoCreate – Application for creating NFT collections
JoCreate LLC Icon - fi_4628635USA

A service that allows you to create NFT collections in a few clicks

#Web app design #Web app development

Punk Panda – Swap, Stake, and Farming platform
Punk Panda Icon - fi_4628635USA

Punk Panda is the world’s first secure messaging app that PAYS YOU crypto for using & sharing the app.

Contact us

Have a project in mind?
Let's chat

Your Name

Enter your name *

Your Email

Enter your email *

Message

Tell us about your project

You can upload maximum 5 files
Some of your file not loaded, because maximum file size - 5 mb
Your budget for this project?

By clicking this button you accept Terms of Service and
Privacy Policy

Icon - launch
Thanks for taking time to reachout!
Stay connected with us by subscribing to our LinkedIn account. By following, you’l be the first to hear about our latest updates, news, and exciting development. We look forward to sharing our journey with you!
Icon - launch
Thanks for taking time to reachout!
We’d love to hear more about your project! Feel free to schedule a call using the link provided. This will help us better understand your vision and ensure we’re aligned on all the details.
Have a project to
discuss?
Image - ksenia
Kseniia Shalia
Account Executive
Have a partnership in
mind?
Image - polina
Polina Chebanova
Co-Founder & CPO