The client’s request required a broad scope, and it began with the Discovery phase. The project then continued as follows. 

The Punk Panda team tasked us with designing a large crypto exchange platform with broad functionality for operations with PPM tokens. The company also wanted website redesign and development, and rebranding for its existing product.

Our role

The role of our team on this project was not only to implement solutions. The main goal was to identify these solutions during the UX research, competitor, and business analysis, such as choosing the best technologies, integrations, and even the better way for internal fees for additional monetization of the platform.

We analyzed the best competitors in the client’s field using a SWOT analysis. We conducted business analysis to find the best way to implement features and ensure that the product was profitable. 

UX research is the launchpad for every project. We analyze our clients’ current products, competitors, and target audience at this stage. We then combine all these strands to create a site map and a list of UX features and improvements that can be actioned.

What we did 

We conducted competitor analysis as a part of our UX research. The focus of the project was the creation and operation of a cryptocurrency. Our team came across a number of key findings which we passed on to the client.

• Analysis of the subject area
• Identification of current problems and their solutions
• Recommendations and advice on solution implementation
• Prioritized feature list

What we did

During BA, we discovered an additional route for monetization, as our client requested. So, we explained the characteristics of the solutions we put together to our client, outlining their benefits and risks.

• Thanks to the additional smart contract, we enabled the client to set their own extra commission on top of Pancake.
• Despite its limitations, the solution for implementing custom design to Pancake was to add a custom API that allowed us to make any custom design and align it with Pancake’s logic.
• As a result, we received custom forms for swap, stake, and farm.
• After conducting our analysis, we realized that Pancake API requests would prevent our graphs from working because after a certain time the Pancake blocks requests from outside its network.
• We decided to work with a proxy server to receive data from a pancake without interruption. To do this, we created custom graphs on our platform.

Based on the data from our client and the results obtained during the research stage, we created a navigation map for the app. It helped us organize the information, devise a roadmap for future developments, and scope out the work. Through a series of iterations and deep-dive exploration sessions, we clarified the vision we had in mind for the app. This allowed us to work through the details with the client, including additional clarification about UK financial regulatory constraints. As a result, we arrived at seven main flows, and we continued to work on these.

The user flow is a visual representation of the sequence of actions the user performs to achieve their goal. It is a necessary part of the process for building future steps and carrying out more work on the interface itself.

At this stage, we turn the results from our analysis into a user-friendly interface that complies with generally accepted usability rules, solves users’ needs, and makes their journey as smooth as possible.

Creating wireframes and clickable prototypes is integral when working on the design structure. It is also key to testing and improving the user journey before you proceed to the final mockup design.

This stage helps us understand the logic and structure of the future service. We create and approve prototypes for every single flow.

To determine the visual direction and style of the interface, our team creates moodboards and coordinates them with the client. This means that you can choose the most suitable solution at the earliest stage possible.

Based on the research and the direction chosen in the moodboards, we create the first visual concept of the site to demonstrate the chosen style in real conditions before we produce the finished UI design.

It is here that the magic begins. We use the moodboard and design concepts we have already produced to start bringing the project to life. We then create the UI design for the whole project and make a UI kit or design system for our developers.

For this project, a custom landing page design was developed using Next.js for Front-end. The design was complicated, with animations created using Framer Motion. The multi-language Admin panel was developed on Laravel.

The Pancake.finance API was integrated for swap, stake, LP, and farming functionality. Metamask serves as a login and allows users to make operations in the Binance Smart Chain Network with BEP-20 and ERC-72 protocols. The smart contracts for the custom token and for operations with it were developed.

The graph from the Pancake platform couldn’t be parsed. To solve this, we integrated the proxy server with Redis caching.