Mist: DeFi Wallet to track onchain transaction data
Date
05/2023 - 08/2023
Category
UI, UX, Defi, onchain data tracking, crypto currency
Client
Mist (a crypto startup)
Introduction
With the explosive development of the Metaverse, NFT has gradually entered people's field of vision. People can exercise their insight, economic acumen, and financial management skills through NFT. Some NFT help websites have also appeared on the market. But after my research, I found that their functions have their own advantages and disadvantages. Many users hope that a website that integrates the advantages of these websites will appear. Therefore, I designed such a Mist: DeFi Wallet to track onchain transaction data.
Designer
Tu Zhengyao
Background
This website is an NFT assistant website. You can check price changes, intelligence analysis, and buying and selling information in real time on this website. This helps you better manage and invest in your NFT coins. I hope that every user can improve their insight, economic acumen, and financial management skills after using this website.
Objectives
-
User-Centric Design: Focused on user needs, ensuring accessibility and user-friendliness for all, from newcomers to crypto experts.
-
Visual Data Insights: Crafted engaging, clear data visuals for portfolio performance, transactions, and market trends.
-
Intuitive Navigation: Designed smooth, intuitive navigation for seamless app exploration.
Key Features
-
Dashboard Overview: Get a holistic view of your portfolio's performance, assets, distribution, and recent transactions.
-
Market Insights: Analyze historical performance, track trends, and make data-driven decisions with interactive charts.
-
Transaction History: Easily track every transaction, both incoming and outgoing.
Cross-product analysis
First, I researched the mainstream DeFi Wallet Web on the market. I summarized their strengths and weaknesses to help me put together and design what I needed for the website I was designing.
Coin Market Cap
The Coin Market Cap web page contains Time period selection, Time slider, Overview data, Table (including Current browsing data location. Page block and Quick query page) and Related information introduction.
Advantages: Coin Market Ca gives users a clean experience. The content is very rich and users can easily get the information they want.
Disadvantages: The interface is a bit compact, making it difficult for users to find the parts they need at first glance.
Coin Gecko
The Coin Gecko web page contains Time period selection, Time slider, Time range query, Overview data, Table and Related information introduction.
Advantages: The overall layout is looser than Coin Market Cap. The Related information introduction selection is placed at the bottom, making it easier for readers to browse.
Disadvantages: The Table design is insufficient and is very long, so that the entire web page is devoted to the Table because there is no paging. The separation between sections is not obvious, making it difficult for users to quickly find the section they need.
Coin Desk
The Coin Desk web page contains Divider, Time period selection, Time range query, Overview data, Related information introduction.
Advantages: The layout is clearly divided, making it clear at a glance. Very informative.
Disadvantages: The header design is a bit messy. During the sliding process, the page header will be messed up. Timeline sliding is not convenient enough. There is no Table to give users detailed data.
Kraken
The Kraken web page contains Divider, Time period selection and Overview data.
Advantages: The page is very clear and organized. The segments are clearly divided.
Disadvantages: There is relatively little information, users cannot obtain a large amount of information, and they often need to use it in conjunction with other websites.
Technical requirements analysis
After integrating the Web in Cross-product analysis, I compiled a list of sections needed for my website. This is to make sure this design is scalable and spotless.
User's journey map
The user's journey map can help me better understand the user's feelings to improve and identify problems in the website.
Persona
Next, I investigated the overall situation and pain points of users. I hope to have a clearer and more comprehensive understanding of their pain points and difficulties, and to provide some preliminary help to help me properly build the basic functions that the website needs to cover.
Flow Chart
After research, I compiled the logical framework of my website and drew a flow chart.
This flowchart clearly communicates what I need to make the website and how I should connect them.
Overall design
The overall design first needs to include all functions in the flow chart. On this basis, the overall style must be consistent and coherent. This is very difficult and a big test.
Overall design includes Log in, Home, Explore, Setting and History.
DESIGN GOAL: ATTRACTIVE
Log in
Log in is the beginning of the website. A good log in design can attract users to use my website. So I first drew some simple cartoon avatars, so that users can use satisfactory avatars even if they are not ready to upload photos.
And we will first provide some wallet lists so that we can better feed you some content that interests you.
DESIGN GOAL: INFORMATIVE
Home
Home is the most important part of the website. This determines whether users are willing to continue using the website over the long term. Before building the Home page, you first need to design the list in the left column. After referring to Coin Market Cap, I decided to join Account, Home, Explore, Lists, Mest AI and Invite Friends. This gives the website enough white space without losing functionality.
Then I decided to put the latest intelligence news on the Home page. After research, this can quickly attract users to click and get the news they want to know most.
In order to provide users with a comfortable experience, I also designed a night mode.
DESIGN GOAL: CONVENIENT
Explore
Explore can provide users with more efficient services. This allows users to use the website longer. When building Explore, you need to consider all search possibilities. After investigation, Search address, Search tag and search failure will appear. So I designed every possibility to make the Explore system more complete.
DESIGN GOAL: COMFORTABLE
Setting
The Setting function allows users to use the website more familiarly and comfortably. I designed the Theme and Language sections. Theme allows users to choose a comfortable system background. Language can adapt its own language.
At the same time, I also added the billing section. This will make our website more sustainable and give users access to more data and functionality.
DESIGN GOAL: DETAILED
History
History is the core of how users use the website. Users need a good history to analyze buying and selling. Therefore, history is the most important part of retaining users.
After research and analysis, I concluded that I need to add divider, time period selection, time slider, time range query, overview data, table, related information introduction and search bar to the history.
Detailed design & Design steps
The overall design first needs to include all functions in the flow chart. On this basis, the overall style must be consistent and coherent. This is very difficult and a big test.
Overall design includes Log in, Home, Explore, Setting and History.
Low-fidelity mockup
Make a low-fidelity mockup of each section.
The Low-fidelity mockup section serves as a strategic blueprint for my app's development and user experience design. It outlines the core principles that underpin our design decisions, including the user-centric philosophy, aesthetic choices, and functionality priorities. This section provides insight into the conscious framing of our app, ensuring it aligns with our vision of a seamless, secure, and user-friendly DeFi wallet. It's the foundation upon which we build and refine our application, translating our goals into tangible design and development actions.
Upgraded design
After the low-fidelity design, continue to add the required content and design, and the low-fidelity content will be upgraded to a complete high-quality design.
Detailed Analysis
I unveil the visual and structural blueprint of the DeFi wallet app. Through carefully crafted design elements, I translate my vision into reality. Dive into the data and table that showcase the thoughtful decisions and creative solutions that define the user interface and experience of this app.
Reflection
I evaluated the user journey with 10 participants and summarized their concerns and feedbacks of this project. Generally, its clarity and functionality were reviewed positively. The concerns were concentrated in the following aspects.
80%
10
Acceptance rate
Participants
Issue: safety
Problem:
Users expressed concerns for information leaking from the browsing history recording.
Solution:
User information is only saved locally and user data is not transferred to the cloud. Users can choose to turn on the feature: identification is required before entering the website again after exiting.
Issue: feeding
Problem:
Users expressed concerns that feeding information will lead to homogenization of information and miss more new investment opportunities.
Solution:
Enable the option for users to choose whether they need system feeding information.
Conclusion
The DeFi wallet app design journey was an exercise in harmonizing cutting-edge technology with human-centric design principles. Through careful consideration of user needs, intuitive navigation, and compelling data visualization, I aimed to create an indispensable tool for individuals seeking to engage with decentralized finance confidently.
