Role: UX Researcher, UX Designer, UI Designer
Duration: 8 weeks
Methodology: User Research, Wireframes, UX Design, UI Design, Prototyping
Tools Used: Figma, Figjam by Figma, Figma mirror, Google meet, Google Docs, Notion
Industry: Blockchain, Cryptocurrency, Decentralized Exchange (DEX), Decentralized Application (DApps), Decentralized Finance (DeFi).
Problem Statement
The major problem causing the invention of this product was that users needed to be provided with a seamless crypto exchange different from that used on the regular; one that allows users to easily carry out transactions in the shortest time possible without having to regularly reach out to the support team.
Research showed that most persons barely use Decentralized exchanges (DEX) and their major challenge is the complexity of these DEX platforms.
The Solution
- To help improve the usability and accessibility of the platform
- To create a seamless platform for the users (smooth navigation)
About Cactus Exchange
Cactus Exchange is a Decentralized Trading & Crypto Platform with a whole Ecosystem running fully on-chain. It allows users to swap, provide liquidity, farm, and stake as well.
The platform is designed to deliver all the advantages of Decentralized Finance whilst bringing the traditional Centralized Finance experience and tools onboard.
The Context
I was contacted earlier this year (2022), to design this web application and I was very excited because late last year there was the whole buzz of Blockchain design, and of course, I got interested even though I didn't know what it was, I had to do some personal research. Afterward, I learned that web 3 projects are similar to web 2's which I was familiar with and all I needed to do was approach it with empathy as usual.
Project Goal
- Satisfy — The project aim at solving the existing problem of complexity and satisfy users
- Transparency — Users should understand where their money is going and how it is being used
- Consistent — Design an interface that is consistent across all platforms
- Intuitive — Create a user flow that the users resonate with
- Seamless- Users should be able to smoothly and easily navigate through the platform
The Design Process
Since every good project starts with a proper plan and a good thinking process. I ensured that I applied design thinking as a problem-solving method all through the UX process.
The Design thinking process used is the one proposed by the Hasso-Plattner Institute of Design at Stanford (d.school).
The five stages of Design Thinking, according to d.school, are as follows:
- Empathize
- Define
- Ideate
- Prototype
- Test
Empathize
At this stage I had to immerse myself into the user’s environment setting aside my own assumptions about what the experience should be like, I had to interview several users, study blockchain technology by reading articles, books, watching videos, taking courses, and asking experts in the industry. I also analyzed existing solutions to look out for patterns and flows the users resonates with already, I explored popular exchanges like;
- Pancakeswap
- Position Exchange
- Pokaswap
- Uniswap etc.
Research
I was able to interview about 13 persons (Physical meetings, Google meet sessions/calls, and chats) from two areas, crypto experts, and Crypto enthusiasts, asking them about what they know about blockchain technology, the issues they face using this exchange, how they think it can be improved, what motivates them to keep using DEX platforms, etc. They are the target audience, The result of the interview showed that.
- 2 crypto enthusiasts knew nothing about staking, farming, or liquidy and would rather keep their money in popular coins like Ethereum and Bitcoin and the other 3 of them do not have any wallet at all
- The other 8 crypto experts have issues with existing platforms and their issues range from complexity to big words and some end up exiting these platforms.
The research findings shown here were limited to the experience not including whatever the team is offering to their customers, which of course is a challenge too.
Due to challenges faced by Decentralized Exchanges, users tend to lean towards Centralized exchanges. The following chart expresses the trading volume of DEX to be at the lowest i.e. 0.8% (statistics by TokenInsight).
Key Challenges
Product offering challenge
User preference for different decentralized exchanges depends on what the team is offering and how their companies tend to deliver on the promises whitepaper-wise.
Transparency
The users will always lean towards products that show necessary details concerning how their money is being spent.
Trust and security
Almost all users are skeptical as to if this new platform is safe to use and if they can always harvest their money and they need to trust the team as well.
Define
At this stage I had to put together all the information I gathered so I could generate some problem statements that guides the ideation process, which has to do with thinking of a solution based on the identified problem, then I was able to come up with some How Might Wes (HMW);
The HMWs (How might wes)
- How might we provide users with a better way to provide liquidity, stake, and farm without overwhelming them with unnecessary details?
- How might we make the user flow process intuitive enough for experts and newbies?
- How might we provide this user with a user-friendly interface to improve their involvement and create a link between the customer and the product
Ideation
This stage has to do with the design thinking process after the empathy, Ideation, and Define stage have been completed and the problem statements are laid out.
Some solution ideas I was able to generate after the ideation process
- Based on research I learned that most users prefer platforms that simplify transaction processes and run across multiple chains
- I saw the need to add tooltips so as to explain big/ambiguous words
- I eliminated unnecessary figures/details that could scare the users
- I ensured the interface was friendly and lively enough to keep the users glued to the platform.
- I proposed an FAQ section on the platform to provide quick guide.
- I ensured the major features are easily found so the users don’t get frustrated looking for them.
- I ensured I put Accessibility and Usability in the top check, with regards to my font style, size, weight and color choice.
I also ensured that while I was thinking and making decisions I kept the 5 principles of designing for the blockchain in mind, and this principles include;
- Designing for Understanding — This basically means that the product needs to meet the IQ level of the users, it has to be in line with what they used to know so they don’t have difficulty learning to use the platform, and to increase adoption in the blockchain space we need to design in a way that even a blockchain novice have little or no challenge using it.
- Designing for trust — Blockchain is a new technology compared to web 2, so there’s is still the fear of incompetency in handling finance or storage matters, so this product has to make the users feel comfortable. And also when dealing with sensitive data, maintaining the user's trust is paramount, you have to actively and often remind the users you’re with them, and as well guide them through in every manner possible.
- Designing for communication — Your design should communicate whatever message you’re trying or supposed to pass in a language the users resonates with and it should be clear and concise.
- Designing for consistency — The experience must be visually consistent across different pages and products, This has to do with the layout of the product, colors, the typography used. Leveraging common design patterns reduce the amount of learning the users do on every page visited or on similar products.
- Designing for exposure — This has to do with creatively educating your users using tooltips and elements of the sort, this is basically the best way to educate users about the platform, The better the users understand the platform the better the adoption.
Prototype
With the prototype, I was able to conduct an A/B test for some components like the colors, patterns, icons, font size/weight, and the user flows too. And I ensured my solutions were implemented on the Hi-Fi prototype.
Also, I was able to get a clearer view of how the users would feel using the platform after the prototype was set.
TYPOGRAPHY AND COLORS.
Before the Hi-fi design was created, I reviewed the brand colors and ensure it worked in line with the experience I want the users to feel, based in research.
The colors Green which is the primary color symbolizes nature and it is seen as an easy color on the eyes, and it’s well communicates friendliness. Purple which is the secondary color is considered to have a tranquil quality.
Exchange
I designed the exchange/swap section to be intuitive then placed emphasis on the core figures of the transaction so users do not get overwhelmed seeing other figures equally. As designers we are responsible for directing how our users emphasize on a feature, that was why I made the swap and Liquidity feature on a page since they are similar and are core features.
- The button reads “proceed to swap” it so because I needed the users to understand what they are getting into at first sight, as a method of cutting down the time spent on performing a swap
- For the mobile, I used a floating action button (FAB) because the menu needed to be put out of the main screen to avoid obstruction, since it has to do with money everything needs to be clear and visible.
- The figures/details seen beneath the transaction card overwhelms the users which were why I place them there since they are not entirely useless.
Liquidity
Farming
Most of the time, users prefer a list view when they are searching with specific requirements while they love a grid view for exploring. so it was added here to allow users to navigate based on their preference and what they are searching for.
Staking Pool
Test
Finally, For the test here are some of the upgrades that will be made on the app after some time based on the first usability testing;
- A Darkmode will be designed to aid Accessibility and usability basically to include more users
- More figure will be hidden but can still be viewed to make the transaction process more seamless
Also, the product will be subjected to more tests and it will birth the second version of the case study.
Conclusion:
This app was designed to help improve the experience of Decentralized exchanges and as well enhance the adoption of DEX just as it is with centralized exchanges. I started this project on the 14th of January, 2022. I believe The ecosystem needs a platform like this.
This design may not be perfect, as it still has to go through several iterations and get improved on if we must build for the users.
This is my first shot at writing a Case Study, and this is my first web3 project. I am open to criticism and will appreciate your feedback.
Thanks for reading.
