Introduction
BlockApps is a Series B blockchain technology startup.
At Blockapps, I am a UI/UX and branding designer and focus on helping them build a
Web3 e-commerce platform -Mercata.
I worked directly with the co-founder, VP of the App Team, and senior software engineers to rebrand the entire Web3 marketplace. I also designed features and translated them into tailwind.css to ensure seamless deployment by the software engineers. Additionally, I tested the entire system’s user flow and brainstormed strategies to enhance customer experience and maximize profit.
Team Requirements
I want to redesign the marketplace interface to make it more visually appealing and increase sales.
"
“
CPO/ CO-Founder
Need to introduce more cryptocurrency payment methods and allow users to pay with other currencies and USD
"
“
CEO / Founder
We need a make an offer feature and a dashboard design that is easy to use for both buyers and sellers.
"
“
Sales / Software Engineer
Problems I Found
Lack of system consistency
Limited brand recognition
Low user engagement and active users
My Role
-
Optimized and re-designed the mercata marketplace interface.
-
Designed and prototyped a UI dashboard, including features such as "Make an Offer," "My Wallet," and"Multiple Payments."
-
Collaborate closely with senior software engineers, providing front-end development support, including Tailwind CSS, to ensure the seamless implementation of design solutions.
-
Designed the Mercata VIP program and Mercata Native token.
Design Process
This is a long case study, you can click each button below to quickly navigate you into each sessions.
Laying the foundations Design system & Branding
When I took over this application, they don't have global css, style sheet, and every software engineer worked individually so it caused a problems that: everyone's button looks different.Working as a solo designer meant I had limited time to spend developing the Design System alongside other rapid UX work.
The Design System had to scale fast, as I was discovering new use cases and constantly rethinking and expanding the library, so I had to approach this challenge strategically.
Colors
Icons
.jpg)
Typography
Component
First Task - Shopping Cart
and payments
My first task was to redesign and optimize the payment function to enhance user experience and drive revenue within a tight 1-week deadline.
Challenges
1. Cross-Chain Currency Conversion
-
Enabling seamless cross-chain transactions amid fluctuating conversion rates.
2. Wallet Connection
-
Users struggled with wallet linking due to integration issues, security restrictions.
3. Transaction Friction
-
Each chain has its own gas fees, which can be unpredictable and impact the final transaction amount.
4. Urgency for Revenue Growth
Competitors Research & User Journey Comics
I analyzed competitors (OpenSea, Magic Eden, Rarible) and found their payment and cart flows overly complex with multiple redirects. I streamlined the process to reduce friction between wallets.
Old Page
Our old cart page supported only USD payments via Stripe, ensuring trust but lacking dynamic fiat-to-crypto conversion across multiple blockchains.
Wireframe
CLICK TO SEE HIGH-RESOLUTION MOCKUP
.jpg)
.jpg)
Solution
Dropdown menu to switch between different blockchains.
Dual currency display (crypto + USD) for transparent conversion rates.
Final order summary in the right panel for clarity.
Two redemption options:
-
Secure on-chain (NFT value fluctuates).
-
Redeem for real-world item (shipped to user).
What is "Secured on Chain" and why?
Locking NFTs on-chain ensures transparency,
security, and value growth over time, making it the default secure option for users.
This benefits both the platform, generating revenue, and users, enabling potential profits.
Mobile payment user flow (before)
Home Page
Product Page
Add to Cart
Sign In
Leave the current page
Completed Transaction
Several Redierect
Connect Wallet
Some user give up here❌
Complete Information
users complete and continue ✅
Simplified the mobile payment process.
Mobile payment user flow (after)
Home Page
Product Page
Add to Cart
Express Checkout
✅
Completed Transaction
Connect Wallet or sign up
My Wallet
Mercata is a blockchain-based e-commerce startup that differentiates itself from other NFT platforms by focusing on unlocking real-world assets on-chain. This means users can purchase items and own their digital ownership while also having the option to redeem them in the physical world.
The product team’s functional requirement for this feature was to display five columns:
Assets, Quantity, Price, Price Change, and Value. The page would list the platform’s assets and display both START (the native currency) and USD together.
Grid and spacing system to maintain consistency and standardization
.png)
.png)
Desktop
Mobile
dividing the layout into 3 columns and incorporating a toggle button to switch between them,
Initially, I considered using Flexbox to achieve automatic responsiveness.
but I realized that it could overcrowd the screen with too much information, thereby compromising readability and accessibility.
Design Process
After several meetings and discussions with the product team, we streamlined the interface by removing unnecessary information, making it clearer and more user-friendly for users to manage assets.
.jpg)
Desktop Version 1
Mobile Version 1
My Wallet Iteraction
As the product continued to evolve, the initially defined functions no longer aligned with its development direction, necessitating iteration. Now, it needs to bridge other cryptocurrencies into our chain. Additionally, since the NFT assets have unique characteristics—such as fluctuating prices—the page will function as a portfolio dashboard, allowing users to track their asset values over time.
Desktop
Mobile
.jpg)
.jpg)
New Problem
Fixed pricing models in marketplaces often lead to missed sales opportunities, as buyers may hesitate to purchase due to price concerns, while sellers struggle to optimize pricing dynamically—creating the need for a 'Make an Offer' feature to facilitate negotiations and increase conversions.
Make an offer
The "Make an Offer" feature in an NFT (Non-Fungible Token) marketplace enables buyers to propose a custom price for an NFT, differing from the listed price. In this task, I was responsible for designing two distinct user flows: one tailored for buyers and the other for sellers, ensuring a seamless and intuitive experience for both parties. I've also worked alongside a software engineer to makesure the feature can be implemented with my design.
Userflow
When a buyer submits an offer, the price must be lower than the current listing price. After submission, the system temporarily holds the buyer's STRATS (currency). The seller can then accept or reject the offer. Once the seller accepts the offer, the buyer gains ownership of the item, and their STRATS balance is updated accordingly
Dialog Box Standard
.png)
Low-Fidelity Wireframe Prototype
New users flow -> with 0 STRATS in Balance Version 1
The requirement was that users must complete transactions using the platform's native token.
Therefore, if a new user's balance is 0, the button in the popup will activate as a "Buy STRATS" button, redirecting them to the purchase page to complete the transaction and encourage engagement.
High-Fidelity Wireframe Prototype
Existing User UI Final Version ( adjusted input field )
prototype
.png)
Seller dashboard - Wireframe 1.0
Initially, I planned to display buyer offers as individual cards, sorted by the highest price.
However, I realized this approach would make lower offers less visible and harder for the seller to manage efficiently. To improve organization and usability, I switched to an expandable table format, grouping all offers under a single order.
This allows sellers to easily review, compare, and take action on offers without overlooking lower bids.
After several meetings with the developer, we designed an expandable table, considering feasibility and aesthetics.
Especially since we only had 2 weeks to complete it.
Seller dashboard - Expandable table Component 2.0
.jpg)
Seller dashboard - Prototype - checking offers
Seller dashboard - Prototype - after clicked buttons
My Transaction
My task here is to optimize the wireframe and convert it into a high-fidelity prototype and support the developer in putting it into production.
It needs to include an action bar that allows users to transfer, mint, and purchase items.
Additionally, it needs to ensure that key transaction details such as transaction hash, product item name, thumbnail,
quantity, and price.
Before(software engineer made)
Based on the functional requirement, i optimized the wireframe
After ( wireframe )
.png)
Marketplace
When I joined BlockApps, they were transitioning into e-commerce and establishing Mercata as an independent platform.
So, my first task is to re-design entire homepage and increase revenue.
Old
New
Marketplace
Marketplace Interface Design Step 1 Analysis
After viewing the marketplace UI layout, I noticed several areas that could be improved or adjusted to increase user engagement and improve sales.
Change Img (Banner) Carousel Speed
Old carousel was too fast
Users stay on a carousel slide for about 5 to 10 seconds. However, the current hero banner switch speed is about 2 seconds. This can cause readability problems and directly impact user engagement, reducing the conversion rate.
Adjust/Add Categories Location
Keep the categories at the top of the navigation bar and add several accessible buttons beneath the hero banner to facilitate quick access.
This approach assists users in finding their desired products more efficiently and also improve the conversion for businesses.
Product preview image size inconsistency
A disorganized presentation can make the website appear less trustworthy and professional, discouraging potential buyers. In addition, it makes it harder for users to browse and compare products comfortably.
Step 2 Wireframe
In my design process, hand-drawn sketches play an essential role, enabling me to quickly explore multiple ideas and iterate without the constraints of digital tools. After that, I've converted my low-fidelity sketch into a black & white wireframe in Figma.
To solve the preview image size problem, I designed a safe zone guide to ensure all products are properly displayed.
AI Trend Data recommend products tad in search bar
Also, for solve the category problem. I've designed trend tags and keywords as recomendation tag inside of search bar. When a user clicks on a trend or keyword recommendation in the search bar, the tag sends a query to retrieve items associated with that tag, similar to a pre-filled search. To keep tags relevant, it need to implement automated updates, where tags refresh based on real-time data (like recent purchases or search frequency). This setup would ensure that tags reflect current trends, maximizing user engagement and conversion rates.
it can guiding users towards popular or highly rated items, increasing the likelihood of purchase. This feature enhancing the shopping experience and boosting conversion rates.
Step 3 Prototype
-
After creating the low-fidelity prototype, I developed the high-fidelity version, designed the graphics, and converted it into Tailwind CSS to support the software engineer during implementation. Figma File
-
I re-designed the hero banner and recommended that the developer disable the auto-play feature in the carousel to improve readability. I exported all the banners as backgrounds without text and used HTML for text placement.
-
This approach ensures that all keywords are searchable and beneficial for SEO.
*it is a long video and demonstrates the entire flow
I designed a reward mechanism for the platform to encourage users to log back in and increase their interaction with the platform.
And, I've also created a UI animation to intuitively let users know that every time they log in to their account, a certain amount of STRATS will be automatically allocated to encourage them to consume. The friendly welcome back animation makes users feel warmer.
I designed a buy STRATS icon, that can navigate the user to the purchase STRATS page when the user clicks it.
Increase the Credibility
Displaying real-time number increases in new user and recent completed purchase order numbers on the homepage can significantly boost credibility by providing tangible evidence of your platform's popularity and activity, potentially increasing conversions.
Optimized Categories and Added filter feature.
UX design is essential so that your customers find what they need without barriers. If it takes them ten steps to purchase something, for example, they may well give up and go elsewhere. Good UX design helps you gain their trust and avoid frustrating them, and also makes it easier for them to convert.
A good user experience can also have a big effect on your rankings on search engines, making your site and content more accessible. This functionality improves navigation, reduces frustration, and can lead to higher engagement and conversion rates.
The old platform doesn't have any category and filter features, so i added it.
Price Rising Hover Effect
Incorporating a recent price rising graph in the mouse hover effect of the product card is a clever way to leverage the price increase feature of NFTs to incentivize purchases.
By providing visual evidence of the asset's value appreciation, it effectively encouraging users to take action.
UI Component / Graphic
I've also resized the banner for 4 different sizes for responsive usage and created the tailwind css code for font-end developer. Click to see Figma
