Copy of UIUX_BlockApps(public)

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.

Check Token Design

Design Process

This is a long case study, you can click each button below to quickly navigate you into each sessions.

Design system & Branding

Click here to see design details

The file contains the design thinking process and design system details.

It is password protected, and the password can be found on the resume.

Iteration

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.

See design process

Old

New

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

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

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)