Introduction
BlockApps is a Series B blockchain technology startup.
At Blockapps, I am an UI/UX and also branding designer.
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.
This is an autoplay long demo video.
Problems
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
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.
My Wallet
Desktop
Mobile
Workplace
My Transaction
My task here is to optimize the wireframe according to the tech document and functional requirements.
The wireframe needs to include an action bar that allows users to transfer, mint, and purchase items within the Web3 marketplace.
Additionally, I need to ensure that key transaction details are displayed, including the transaction hash, product item name, thumbnail, quantity, and price.
Since users can pay in both cryptocurrency and USD, the price must be shown in both currencies to support different payment options.
Before(software engineer made)
Based on the functional requirement, i optimized the wireframe
After ( wireframe )
.png)
Payments
My first task is to help the product team to design and optimize the payment interface.The original payment interface only has one payment method and uses third-party payment. We need to design a new program that supports multiple payments and makes the whole process concise and interactive. Because we are about to introduce our own digital currency (start) as the main payment method.
.png)
First design
I designed a set of parallel buttons, where selecting the 'Crypto' option reveals a dropdown menu with various options for user selection
The old payment method only has one button, and when the user clicks it redirects to the Stripe payment interface.
The second design features a dropdown menu that consolidates all payment methods. After the user selects a preferred payment method, the button's status label updates to reflect their choice. When clicked again, this selection is submitted to the backend
A/B Testing
After A/B testing two payment components—popup (A) and dropdown (B)—the dropdown version (B) performed better by reducing user clicks, minimizing hesitation, and increasing conversion and purchase rates. This indicates that the dropdown enhances the user experience by streamlining the payment process, making it faster and more intuitive.
Second Design
A Version Popup
B Version Dropdown
.png)
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
Prototype
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
Front-End Production (work with engineer together)
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.
Since 2012, I have worked as a digital graphic designer in China. I created a lot of digital assets for Alibaba Taobao business owners to optimize their sales.
This experience underscored the essential role of product thumbnails in crafting impactful first impressions for customers.
​​To solve the preview image size problem, I designed a safe zone guide to ensure all products are properly displayed.
A consistent and visually appealing layout makes it easier for users to browse and compare products, leading to a more pleasant shopping experience and building trust, which in turn increases the conversion rate and boosts purchases.
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
